元素之间不需要的空白答案

【问题标题】：Unwanted white-space between elements元素之间不需要的空白
【发布时间】：2014-01-27 01:50:34
【问题描述】：

为什么下面的 CSS 代码会在蓝色（中间）元素的末尾和最后一个（右侧）元素之间创建空白？

    <!DOCTYPE html>
    <html lang="sv">
    <head>
    <meta charset="utf-8" />
    <title>A test page</title>
    <style type="text/css">
    body {
        margin: auto;
    }
    .tte {
        width: 20%;
        height: 50%;
        background-color: green;
    }
    .as {
        width: 60%;
        height: 50%;
        background-color: blue;
    }
    .ground {
        position: absolute;
        top: 0;
    }
    .left {
        left: 0;
    }
    .right {
        right: 0;
    }
    .middle {
        left: 20%;
    }
    </style>
    </head>
    <body>
    <div class="tte ground left"></div>
    <div class="tte ground right"></div>
    <div class="as ground middle"></div>
    </body>
    </html>

我希望代码创建两个绿色块元素，每个元素的宽度为 20%，高度为 50%，分别在左上角和右上角对齐，一个蓝色块元素在中间右对齐，宽度为 60 % 和相同的高度。但是在蓝色元素的结尾和最后一个（右）绿色元素的开头之间有明显的空白。为什么？

在 Mavericks 上使用 Safari 7.0.1

【问题讨论】：

我在这个小提琴中没有看到空白，jsfiddle.net/RGZZL你使用的是什么浏览器？
我在 Mac OS X 10.9.1 上使用最新版本的 Safari。 Safari 显示了一个明显的空白，我也在 Chrome 和 Firefox 中尝试过，虽然那里的空白不那么明显。
删除right:0 看看会发生什么。
也许您只能通过坐标调整元素的大小：.left {left:0;right:80%;} .right {left:80%;right:0;} .middle {left:20 %;right:20%;} 所以值是相同的，即使屏幕宽度是奇数或偶数。
这似乎取决于浏览器窗口的当前大小。有时没有空白，有时有。这可能是浏览器中的错误。

标签： html css alignment

【解决方案1】：

编辑：您是否尝试过使用 display:table-cell？像这样？ http://jsfiddle.net/RGZZL/1/

.wrapper {
    display:table;
    height:300px;
    width:100%;
}

.left, .right {
    display:table-cell;
    width:20%;
    background:green;
}
.middle {
    display:table-cell;
    width:60%;
    background:blue;
}

我没有看到你所说的问题，但试试这个。在 div 周围放置一个包装器，并将该 div 的 font-size 和 line-height 设置为零。然后为里面的三个 div 重新设置 font-size 和 line-height。我发现有时代码中的空格会使浏览器认为您在其中添加了空格字符。

【讨论】：

我试过了，但也没有用。我试图在相对定位的包装器内对所有三个块进行相对定位。它在 Chrome 和 Firefox 上都能完美运行，所以我认为这个问题与 Safari 或其 WebKit 渲染引擎有关。当使用宽度和/或高度的百分比值时，它不能正确缩放。在谷歌搜索，它似乎与每个元素宽度的四舍五入有关。见ejohn.org/blog/sub-pixel-problems-in-css。