CSS-based table 内的菜单栏：li 关闭 1px； table 边框有问题？

Question

编辑：目标浏览器为IE10以上；无需与其他浏览器兼容。

在页面的 header 里面我有 3 个元素（这也是顺序）：

一个应用程序徽标
申请标题
一个CSS-based菜单栏

Here is a JSFiddle 对于那些迫不及待的人 ;)

header 本身是 60px 高，元素应垂直居中并 "floating" 靠左。我无法在它们上使用 float: left 来让它工作，因为我不太擅长纯 CSS 布局，所以我务实地插入了 table 来让它工作。

除了一个烦人的 1px 大问题外，它的工作原理是：li 项（即可单击的菜单栏项）与页面顶部的偏移量为 1px ，因此在 header 内没有完全对齐，而是延伸到 #content。所以我的问题是：

我该如何修复这个偏移量及其原因？ 我认为这可能是 table 的边界问题，但看起来并不像那样。可能是因为 line-height?
不是很重要，但对我来说很有趣：如何在不使用 table 的情况下实现我想要的布局，因为我经常读到它是非常糟糕的风格？

这是我用的HTML：

<body>
    <header>
        <table>
            <tr>
                <td style="vertical-align: middle">
                    <img class="logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.png" />
                </td>
                <td>
                    <label class="title">Title</label>
                </td>
                <td>
                    <div class="menu">
                        <ul>
                            <li>Home</li>
                            <li>Test
                                <ul>
                                    <li>One</li>
                                    <li>Two</li>
                                    <li>Three</li>
                                </ul>
                            </li>
                            <li>About</li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </header>
    <div id="content"></div>
    <footer>Footer</footer>
</body>

这是 CSS:

/* ------ General layout ------ */

 body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Verdana;
    font-size: 12px;
}

header {
    width: 100%;
    height: 60px;
    background-color: #eeeeee;
    position: fixed;
    top: 0;
}

#content {
    width: 90%;
    margin: 0 auto;
    padding-top: 70px;
    /* header height + 10 */
    padding-bottom: 50px;
    /* footer height + 10 */
}

footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #eeeeee;
    position: fixed;
    bottom: 0;
    text-align: center;
}

.logo {
    resize: both;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
}

.title {
    font-weight: bold;
    color: green;
    margin-right: 20px;
}

/* ------ CSS-based menu bar attempt ------ */

 table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

table td:last-child {
    width: 100%;
}

.menu ul {
    line-height: 60px;
    text-align: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 0 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu ul li:hover {
    background: #555;
    color: #fff;
}

.menu ul li ul {
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 160%;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.menu ul li ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}

.menu ul li ul li:hover {
    background: #666;
}

.menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

Answer 1

如果您检查您的页面（使用 Firebug、Chrome 开发人员工具或类似工具），您可以看到 td 中堆叠了 li 元素（以及所有其他 tds）有一个 1px 的填充，这是困扰您的像素的来源。恐怕我真的不能告诉你这个填充是从哪里来的，因为我在检查器中看不到它的规则，所以我假设它只是 tables / tds 的默认渲染。您可以添加如下规则来覆盖它：

td {
  padding: 0;
}

理想情况下，您还应该在 table 上使用 CSS class，并在 CSS 中使用它以仅针对这些特定的 td，如果您需要对页面中的另一个 table 应用不同的规则。

Answer 2

你的 td 似乎有 1px 的填充。并查看此列表项。

                        <li>Test
                            <ul>
                                <li>One</li>
                                <li>Two</li>
                                <li>Three</li>
                            </ul>
                        </li>

Answer 3

使用 table 布局解决此问题。

只需添加 td{padding:0}.

默认td周围有一些1px的白色space你可以通过添加它来删除它。

Answer 4

您的 <td> 似乎有 1px 的填充。尝试添加这个 td{padding: 0px;}

关于你的第二个问题。尝试参考 this 以在不使用 <table> 元素的情况下获得相同的输出 :) 希望它有所帮助。编码愉快。

Answer 5

td's 具有固有的 CSS 属性，与其他元素一样，您需要重置这些属性才能根据自己的属性进行自定义。这里，td 带有默认填充。因此，为了规范化这个 1px 问题，您需要将 td 设置为零填充。

例如，

td {
  padding: 0;
}

LIVE DEMO LINK

希望这对您有所帮助。

CSS-based table 内的菜单栏：li 关闭 1px； table 边框有问题？

CSS-based menu bar inside a table: li's are 1px off; problems with the table border?

html

css

drop-down-menu