2

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

我找到了仅使用 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 计算下边距应该是多少：

查询：

// 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 来调试页面！

4

1 回答 1

1

您可以尝试做的是使用条件语句来检测 IE8，然后在 jQuery 中添加一个类到需要边距底部的元素。

 <!--[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; }

希望这可以帮助 ：）

于 2013-11-26T20:54:54.690 回答