Question

我正在构建一个“查看我们的一些产品”部分到一个新网站。当产品的图像悬停在上面时，它应该淡化图像，然后将图像的标题向上滑动到顶部。

我创建了一个JSFIDDLE，所有这些都完全符合我的要求，并且可以在Chrome和Safari中使用，但在IE11和Firefox中它会产生意想不到的结果。

这是HTML：

<body>

    <div class="outerSqrProducts">
        <div class="sqrProductsImage">
            <a href="#">
                <img src="http://www.avenir-accessories.co.uk/media/4367/beewi-fiat-500-white.jpg"/>
            </a>
        </div>
        <div class="overlay"></div>
        <div class="ic_caption" id="caption1">
            <h2 class="centerText">Title</h2>   
         </div>
    </div>


    <div class="outerSqrProducts">
       <div class="sqrProductsImage"> <a href="#">
        <img src="http://www.avenir-accessories.co.uk/media/4367/beewi-fiat-500-white.jpg"/>
        </a>


        </div>
        <div class="overlay"></div>
        <div class="ic_caption">
                <h2 class="centerText">Title</h2>   
        </div>
    </div>

    <body>

这是CSS：

body {
    background-color: #0097F0;
}
.centerText {
    text-align: center;
}
.outerSqrProducts
{
    display: table-cell;
    vertical-align: middle;
    height: 234px;
    width: 234px;
    background-color: #FFF; 
    position: relative;

}
.sqrProductsImage 
{
    display: inline-block;
}
.sqrProductsImage img {
    max-height: 234px;
    max-width: 234px;
}
.overlay, .ic_caption {
    position: absolute;

    left: 0;
    width: 100%;
    display: none;
}
.overlay {
    background-color: rgba(0, 151, 240, 0.5);
    height: 100%;
    top: 0;
}
.ic_caption {
    background-color: rgba(0, 151, 240, 0.8);
    height: 50%;
    bottom: 0;
}

这是Jquery：

$(document).ready(function () {
    var div = $('.outerSqrProducts');
    var overlay = $('.overlay');
    var title = $('.ic_caption');
    var speed = 500;

    div.each(function (i) {
        $(this).attr('id', 'image' + i);
        var divId = $(this).attr('id');

        $('#' + divId).hover(function () {
            // make background opaque
            $('#' + divId).find('.overlay').fadeIn(speed);
            // slide down the title
            $('#' + divId).find('.ic_caption').slideDown(speed);
        },

        function () {
            $('#' + divId).find('.ic_caption').slideUp(speed);
            $('#' + divId).find('.overlay').fadeOut(speed);

        });
    });

});

这是小提琴。 http://jsfiddle.net/aFG9k/

在IE11中，它不会应用叠加div的整个高度，并非所有图像都不会淡出。

在Firefox中，它试图淡出并将标题滑动到div周围的空间，其中包含图像，而不是div本身（非常离奇！）。

我做过明显愚蠢的事吗？

任何帮助赞赏.n

Answer 1

罪魁祸首是display: table-cell;中的.outerSqrProducts。可能是因为Firefox中的this bug，对具有表格单元格显示的元素的相对定位不起作用。

使用float: left;浮动产品容器会使叠加层按预期显示。

位置绝对的JQuery和CSS，高度100％在IE11和Firefox中不起作用

1 个答案: