Question

如果图像是肖像，我正在尝试将一些css应用于图像标记，但出于某种原因.css（）在webkit中不起作用。基本上，图像标记不会获得“样式”属性。这是我的代码：

$(document).ready(function () {

    $('.listing .item .thumb img').each(function () {

          var _img = $(this);
          var _imgWidth = _img.outerWidth();
          var _imgHeight = _img.outerHeight();

          if (_imgHeight > _imgWidth) {
               _img.css('top', '-40%');
          }
    });
});

<div class="listing about">
    <div class="item">
        <a href="#" class="thumb">
            <img src="../_uploads/siteassets/images/thumb-carousel-2.jpg" />
            <span class="frame"></span>
        </a>
        <span class="snippet">
            <a href="#" class="title">Name Surname</a>
            <span class="date">Role in the company</span>
            <p class="description">Lorem ipsum dolor sit amet...</p>
        </span>
    </div>
</div>

我尝试使用.attr（）而不是.css（）但没有。它不起作用！

知道为什么吗？

Answer 1

触发.ready()时，图片可能没有设置尺寸。

0 > 0为false，因此永远不会设置top属性。

改为使用$(window).load();或this plugin。

Answer 2

Webkit不解释偏移左侧或顶部，因为默认位置为无，添加位置相对。当有位置相对与否时，mozilla的Gecko会解释偏移。

    <div style="position: relative; left: 10px;"></div>
    <script>
         alert($('div').offset().left);
    </script>

jquery CSS在webkit中不起作用

2 个答案: