Question

使用JS和Jquery是新手，但我正在尝试修复一些跨浏览器样式问题。

我有三个使用类似div元素的不同页面

产品页面

<section>
  <ul>
    <li>
     <a class="autoHeight">
         <img></img>
         <div>
              <p></p>
          </div>
      </a>
     </li>
   </ul>
</section>

客户页面

<section>
  <ul>
    <li>
      <div class="autoheight">
         <img></img>
       </div>
     </li>
   </ul>
</section>

案例页面

<section>
  <ul class="result">
    <li>
     <a class="autoHeight">
         <img></img>
         <div>
              <h2></h2>
              <p></p>
          </div>
      </a>
     </li>
   </ul>
</section>

CSS

.autoheight {
   height: auto; 
   /*height: 100%;*/
}

每个页面显示这些项目的列表以及具有类＆＃34; autoheight＆＃34;的元素。在页面加载期间或重新调整窗口大小时使用J Query设置元素高度。

JQuery的

$(document).ready(function () {
 $(window).resize(function () {
        $('nav ul li > ul').css({ 'display': 'none', 'opacity': '0' });
        if ($('#openMenu').css('display') === 'block') {
            /* mobile size */
            $('.subMenuOpen').addClass('subMenu').removeClass('subMenuOpen'); // set the - icons back to a +
            $('nav').css({ 'display': 'none', 'right': '-60%', 'position': 'absolute' });
            $('#openMenu').css({ 'background-image': "url('/img/menu_open.png')" });
            $('#openMenu').className = "menuOpen";
            $('#container').css({ 'left': '0' });
            mobileDOM();
            // product submenu
            $('#product div#productsubsectionnav ul li').css({ 'color': defaultColour, 'background-color': 'white' });
            $('.productsubsectionnavActive').css({ 'color': colourScheme });
        } else {
            /* desktop size */
            $('nav > ul > li > a').removeClass('subMenuOpen');
            var navContent = $("nav > ul").length;
            if (navContent > 1) {
                $('#container').css({ 'left': '0' });
                $('nav').css({ 'display': 'block', 'position': 'relative', 'right': '0' });
                $("nav > ul:nth-child(3)").appendTo($("header > div div:nth-child(2)"));
                $("nav form").appendTo($("header > div div:nth-child(2) ul > li:last-of-type"));
            }
            // product submenu
            $('#product div#productsubsectionnav ul li').css({ 'color': defaultColour, 'background-color': defaultColour });
            $('.productsubsectionnavActive').css({ 'color': colourScheme, 'background-color': colourScheme });
        }
        pdms.utilities.setHeights('.autoHeight'); 
    }).resize();

pdms.utilities.setHeights('.autoHeight'); 
});

ultilites脚本

var pdms = pdms || {};

pdms.utilities = {
    setHeights: function (selector) {
        if ($('.autoHeight').css('background-color') == 'rgba(0, 0, 0, 0)') {
            console.log("setHeights " + selector);
            $(selector).css('height', 'auto');
            setTimeout(function () {
                var heights = $(selector).map(function () {
                    return $(this).height();
                });
                $(selector).height(Math.max.apply(this, heights));
            }, 300);
        } else
        {
            $(selector).css('height', 'auto');
        }

    },

    validateClientLoginForm: function () {
        var itemNumber = $('#item_number').val();
        var itemAmount = $('#amount').val();
        if (itemNumber == "" || itemAmount == "") {
            alert("Please complete invoice number and amount")
            return false;
        }
        return true;
    },
};

除了Safari之外，所有浏览器中的所有页面都呈现正常且行为与预期相同。在safari中，具有自动高度的元素不会设置高度，直到我重新加载页面或移动窗口。

我试图将一个元素包装在一个div中，并将该div赋予该类＆＃34; autoHeight＆＃34;但它似乎没有多大区别。我感觉它很简单，但是我太注意了它，这个让我感到难过。

提前感谢您的帮助。

页面加载和放大的HTML元素Safari中的窗口重新调整大小不能渲染

0 个答案: