Question

我遇到Safari问题。使用.height()函数后，给我错误的高度属性。只有这一个浏览器工作错误，其他浏览器才能正确显示高度。

HTML + CSS：

.col-header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    color: #fff;
    text-align: center;
}

<div class="cat-col-wrapper">
    <div class="cat-col-header">
        <div class="col-header-content">
            /* next content DOM with 
               width: 100%; 
               position: relative
               float: left; 
             */
        </div>
    </div>
</div>

JS文件：

(function($) {    

$(window).load(function(e) {
    _E.Controller();
}

_E = {
    Controller: function() {
         $('.cat-col-wrapper').each(function(index, el) {
              var headerContent = $(this).find('.col-header-content');
              console.log(headerContent.height());
         }
    }
}

}(window.jQuery));

当元素的实际高度为185px时，Safari会给我584px。

Answer 1

.cat-col-header在.3s上有一个css转换属性，当页面加载脚本时，首先计算高度，然后进行转换以纠正css宽度。

示例解决方案：

JS：

$(window).load(function(e) {
    $('body').addClass('loaded');
});

$(document).ready(function(e) {
    /* count what you want and watch out on Safari browser */
});

CSS：

body.loaded .cat-col-header {
   transition: .3s;
}

Safari提供了错误的height（）属性

1 个答案: