css - 当我在重置中使用 `line-height: 1` 时，为什么会向 firefox 元素添加一个额外的像素？

Question

我用这个重置。

* {
    font-family: Arial, Helvetica, sans-serif;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
    text-decoration: none;
    vertical-align: baseline;
    white-space: normal;
    line-height: 1;
}
hr {display: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
blockquote, q {quotes: "" ""}
ul {list-style-type: none}
ol {list-style-type: decimal}
a {text-decoration: none}

.clear {clear: both}

问题是只要我使用 line-height: 1 我就会看到一个额外的像素，无论我在我的 block 链接中做什么，即使我尝试设置高度、行高、字体大小它。没有任何作用。请告诉我 firefox line-height 是怎么回事。

这是我的 CSS。

.tag {
    display: block;
    font-size: 11px;
    background: #fff;
    border: 1px solid #aaa;
    color: #555;
    text-transform: lowercase;
        padding: 3px 6px;
}

很简单吧？好像没有。 Firefox 将在文本顶部创建一个像素我可以清楚地看到它不平衡，即使我将顶部和底部填充设置为相同。有人告诉我为什么会发生这种情况，如果我从重置中删除 line-height: 1 很多其他事情都会搞砸。

Answer 1

尝试使用 line-height: normal;

这告诉它保持与文本相同的高度(这看起来与 line-height:1 相同，但也许 firefox 对它的处理方式不同)。