为什么我的列表元素是1px？

Question

尝试重现标头here，到目前为止，我有http://www.webdevout.net/test?0A。我无法弄清楚为什么文本容器延伸到条形图底部下方1px，以及为什么它们不在另一个网站上。

由于

Answer 1

我在这里修好了：

http://jsfiddle.net/HZLC4/1/

我删除了包装器的宽度以适应JSFiddle的显示。你可以把它加回来。

提示要注意：

• 重置永远是第一个
• 有友好的链接，填充链接。使链接有更大的“框”点击
• 填充链接和文本会向父容器添加高度，因此您无需为包装器声明高度。
• 如果没有声明维度，则将自动调整内容转换为内容。这意味着divs自动调整链接和文本导致不再“1px问题”
• 我忘了，要使链接填充生效，<a>必须使用display:block
进行样式设置

Answer 2

您将.header h1的行高设置为11px，但实际上您只需要10px。

Answer 3

问题是标题样式：

header li, header h1 { 
    display: block;
    font-weight: bold;
    font-size: 12px;
    line-height: 11px;
    padding: 20px;
    background-color: #2d2d2d;
    border-right: 1px solid #333;
}

padding-top 20px + padding-bottom 20px + line-height 11px = 51px

您需要将标题的高度增加到51px，或者您需要减少填充或行高。

Answer 4

不知道你是否能看到它。

但是我将行高从11改为10 标题li，标题h1 {

这很有效。