Chrome中垂直div之间的1px未指定边框

Question

这里有很多代码，我不确定是什么导致了它。该网站是www.wearedeja.com

在Chrome中查看页面时，每行div之间有一个1px的边框 - 注意当垂直移动鼠标时，鼠标会从食指（指定可点击的链接）闪烁到箭头，如果你努力尝试，你可以将鼠标悬停在div之间。这不是水平发生的。我不希望这个网站上的单个像素不可点击，我已经尝试了一切我能想到的删除它。在Firefox中，这根本不会发生（我知道文本在FF中搞砸了......也在处理它）

在选择的几个空格中，这不会发生。这应该会产生可重复的结果，但我似乎无法弄明白。我相信它与最低级别的div或文本有关...

这是相关代码

HTML结构

<div id="container">
    <div id="row">
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        </div>
    <div id="row">
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>   
        <div class="cell"><div id="text"></div></div>
        </div>
    <div id="row">
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        </div>
    <div id="row">
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        <div class="cell"><div id="text"></div></div>
        </div>
        </div>

CSS

    #text{
    opacity:1;
    display:table;
    position:absolute;
    z-index:999;
    color:#fff;
    text-align:center;
    width:100%;
    top:44%;
    left:0;
    }

/* table rules */
    .container{
    display:table-row;
    width:100%;
    }

    .row{
    display:table-row;
    width:100%;
    }

    .cell{
    vertical-align: top;
    position:relative;
    display:table-cell;
    background-color:black;
    width:700px;
    height:auto;
    }

    body{
    margin:0;
    padding:0;
    }

        /* image rules */
    img{
    max-height:600px;
    max-width:600px;
    height:auto;
    width:100%;
    }

如果您知道是什么导致了这种情况，请尝试解释为什么在FF中不会发生这种情况，以便将来可以避免...谢谢

Answer 1

它不是边框，而是显示background-color的{​​{1}}。因为它们设置为.cell，所以高度将是行中最高单元格的高度。但是，您的一些图像宽313像素，高312像素，有些图像宽313像素，高313像素。这意味着虽然这些单元格中的某些图像覆盖整个313px高，但是您的一些图像是1px害羞，因此显示了父容器的背景。

如果你修好图像，一切都会正确。我怎么知道的？因为如果你强制所有图像的高度，黑线就会消失：

display: table-cell;

：）

Answer 2

您的图像没有显示为相同的尺寸，因此背景显示...黑色线条根据浏览器窗口大小而变化和消失（奇数尺寸除以4不能有4个大小均匀的图像）

我会尝试将图像用作背景图像，以便您可以使用background-size属性更精确地定位它们。

像这样：

HTML（将类添加到.cell）

<div class="cell A1">...</div>
<div class="cell D1">...</div>

其他CSS

.A1 {
    background: url(A1.jpg);
    background-size: cover;
}

.D1 {
    background: url(D1.jpg);
    background-size: cover;
}

但是，您可能需要使用<a>代码宽度和高度以及.cell高度。最简单快捷的方法是使用某种 hack ，比如用透明的gif替换当前的<img>，以保持单元格和链接的大小与当前的方式相同，然后视觉中的背景图片。

另外，如果您使用多个内容，那么它不应该是类而不是 ID 吗？