html - 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

您的图像未显示为相同尺寸，因此背景显示为...黑线根据浏览器窗口大小改变和消失(奇数除以 4 不能有 4 个大小均匀的图像) .

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

像这样:

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，比如替换当前的 <img>它带有透明 gif 以保持单元格和链接按当前方式调整大小，然后是用于视觉效果的背景图像。

此外，如果您使用多个东西，它不应该是一个类而不是一个id吗？