渲染（错误）显示：table-cell；

Question

我目前正在做一个网站。 HTML 文件的 Header 如下所示：

<div id="page">
    <header>
        <a href="#" class="redsquare">&nbsp;</a>
        <div class="head-wrapper">
            <!-- some more -->
        </div>
        <div class="flags-container">
            <!-- some more -->
        </div>
    </header>

此 html 部分的 css 如下所示：

#page {
    width: 100%;
    display: table;
    clear: both;
    margin-bottom: 30px;
}

header {
    width: 100%;
    height: 223px;
    background: #F0F0F0 url("../resources/header-background.png") repeat-x;
    margin: 0;
    padding: 0;
    display: table-row;
    clear: both;
}

header > a.redsquare {
    background-image: url("../resources/logo-figure.png");
    float: left;
    height: 223px;
    width: 240px;
    margin: 0px;
    padding: 0px;
    display: table-cell;
    vertical-align: top;
}

header > .head-wrapper {
    height: 223px;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: top;
}

header > .flags-container {
    width: 110px;
    height: 100px;
    padding: 20px 5px 20px 5px;
    margin-bottom: 83px;
    float: right;
    display: table-cell;
    vertical-align: top;
    clear: both;
}

所有元素都在它们的位置上，但是在 redsquare 和 head-wrapper 之间以及 head-wrapper 和 flags-container 之间有一条小线（如图所示在下图中）。

我的问题是，如何防止这种情况发生？

Answer 1

我使用了标记，css 你发布了一个 fiddle，因为 table 的默认行为是用边框分隔单元格，你需要通过添加

border-collapse: collapse;

给你#page元素。

在 IE 和 Chrome、fiddle can be found here

中快速测试了这个

但是我非常同意其他评论，因为你不应该使用 tables，或者出于设计原因模拟 tables，相反，我建议使用相同的 html 结构而不是

display: table-cell;

尝试使用

display: inline-block;

这将导致相同的 'column' 效果，但不那么悲惨。表是悲剧。

渲染（错误）显示：table-cell；

Rendering (error) with display: table-cell;

html

css

tablecell