Question

我正在尝试创建一个包含3列的行，以显示项目描述的悬停效果。

在Google Chrome浏览器上，当我悬停第一个项目时，第二个和第三个列之间会出现间隙。在Mozilla Firefox上，当它是4或2列而不是3列时会发生同样的事情，差距出现在最后两个项目之间。

标记

<div class="row row-3">
    <div class="column">
        <img src="http://placehold.it/800x650" alt="" class="image" />
        <div class="info">
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div><!-- .info -->
    </div><!-- .column -->

    <div class="column">
        <img src="http://placehold.it/800x650" alt="" class="image" />
        <div class="info">
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div><!-- .info -->
    </div><!-- .column -->

    <div class="column">
        <img src="http://placehold.it/800x650" alt="" class="image" />
        <div class="info">
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div><!-- .info -->
    </div><!-- .column -->
</div><!-- .row -->

CSS

body {
    font: normal 0.7em sans-serif; }
.row {
    width: 100%; }
.image {
    max-width: 100%; }
.info {
    background: rgba(0, 0, 0, .5);
    color: #FFF;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all .3s linaer;
    width: 100%;

    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear; }
.column:hover .info {
    opacity: 1; }
}
.column {
    position: relative; }
.row-3 .column {
    float: left;
    width: 33.333333%; }

我做了一个小提示来表明这个问题：http://jsfiddle.net/q5z4B/1/

Answer 1

只需将此CSS属性添加到.image元素

即可

    .image
    {
     margin: 0;
     padding: 0;
     display: block;
    }

检查JSFiddle

Answer 2

问题是你用作宽度的33.333333％。浏览器需要一些时间来计算图像需要填充容器的“33.33333％”的“100％”。

如果您将图像宽度更改为100.1％100％，则可能会有效

具有绝对定位元素的列之间的意外间隙

2 个答案: