jquery - IE8 上的负边距

Question

我有一份产品 list 。将鼠标悬停在产品上时，框会放大，您可以看到该产品其他图片的缩略图。

我找到了一个只用 css 的解决方案:

HTML:

<div class="row">
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
    <div class="boxProdotto"> ... <span class="thumbs"><img><img></span></div>
</div>
<div class="row">
    ... other row with 4 boxes
</div>

CSS:

.row {
    margin-bottom: 13px;
    clear: both;
    position: relative;
    float: left;
}
.boxProdotto{ 
    position: relative;
    width: 175.5px;
    margin-left: 13px;
    float: left;
    background: #FFF;
}
.boxProdotto .thumbs {
    display: none;
}
.boxProdotto:hover{
    border: 2px solid #9d3951;
    border-radius: 3px;
    padding: 11px;
    position: relative;
    left: 0;
    margin: -13px -13px -200px 0;
    z-index: 200;
}
.boxProdotto:hover .thumbs {
    display: block;
}

因为鼠标悬停状态下框的高度会根据缩略图的数量而变化，所以我决定用 JQuery 计算 margin-bottom 应该是多少:

JQuery:

// Set the attribute data-h with the normal height of the box
$(".boxProdotto").each(function(){
    $(this).attr('data-h', $(this).height());
});

// on mouse over set the margin bottom calculated
$(".boxProdotto").mouseover(function(){
    // margin-bottom = boxHeight - boxHeightOnMouseOver - border - paddingBottom
    $(this).css('margin-bottom', ( $(this).attr('data-h') - $(this).height() - 2 - 11));
}).mouseout(function(){
    $(this).css('margin-bottom', 0);
});

此解决方案适用于所有浏览器(Firefox、Chrome、Safari Mac 和 Win)，但在 IE8 和 IE9 中存在一些问题!虽然在 IE10 上运行良好...IE7 我无法测试它但我认为它不起作用..

对于 IE8，应用的负边距似乎没有效果。但奇怪的是，将鼠标放在第一个产品的图像上，框会放大，您会看到下一行向下移动。但是通过将鼠标移到缩略图上(鼠标停留在同一个框上)然后神奇地工作并应用边距底部!

我发现了很多与 IE margin negative 和 Jquery onmouseover/onmouseout 相关的错误/问题，我的情况似乎是两者的混合。

此外，使用 IE 几乎不可能调试页面，也使用神奇的开发人员工具!

Answer 1

你可以尝试做的是使用条件语句来检测 IE8，然后在 jQuery 中向需要 margin-bottom 的元素添加一个类。

 <!--[if gte IE 8]>
    <style>
    .marginBottomIE { bottom: -200px; }
    </style>
<![endif]-->

如果您使用的是 Modernizr，您可以使用添加到正文中的类 .ie8 检测浏览器。

jQuery

 if($('.ie8').length > 0){
        $('.boxProdotto').addClass('marginBottomIE');
    }

那么你可以在计算margin-bottom之后加上一个简单的if条件，例如:

if(marginBottom < 0){ $('.boxProdotto').addClass('marginBottomIE'); }

CSS

 .marginBottomIE { bottom: -200px; }

希望这有帮助:)