Question

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

我发现只有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计算边缘底部应该多少：

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＆amp; Win），但在IE8和IE9中存在神秘感！虽然在IE10上运行良好... IE7我无法测试它，但我认为它不起作用..

对于IE8，似乎应用的负边距没有影响。但奇怪的是，将鼠标放在第一个产品的图像上，框放大，你会看到下一行向下移动。但是将鼠标移到缩略图上（将鼠标放在同一个盒子上）然后神奇地工作并且应用了margin-bottom！

看着我发现了很多与IE保证金负面和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; }

希望这会有所帮助：）

IE8的负利润率

1 个答案: