IE8 负边距答案

【问题标题】：Negative margin on IE8IE8 负边距
【发布时间】：2013-02-22 21:28:34
【问题描述】：

我有一份产品清单。将鼠标移到产品上，框会放大，您可以看到产品其他图像的缩略图。

我找到了一个只有 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;
}

因为在onmouseover状态下盒子的高度会根据缩略图的数量而变化，所以我决定用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，似乎应用的负边距无效。但奇怪的是，将鼠标放在第一个产品的图像上，框变大了，你会看到下一行移动到更低的位置。但是通过将鼠标移动到缩略图上（将鼠标停留在同一个框上）然后神奇地起作用并应用了margin-bottom！

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

同样使用 IE 也几乎不可能使用 Fantastic Developer Tools 来调试页面！

【问题讨论】：

您是否在.boxProdotto:hover 规则中尝试了zoom: 1;position: relative; 技巧？

标签： jquery css internet-explorer-8 margin

【解决方案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; }

希望这会有所帮助:)

【讨论】：