为什么浏览器会错误呈现 、<a>、、&c？答案

【问题标题】：why are browsers mis-rendering , <a>, , &c?为什么浏览器会错误呈现 、<a>、、&c？
【发布时间】：2011-12-15 08:21:11
【问题描述】：

转到此example page。如您所见，链接、“呼叫”和“电子邮件”这两个词的对齐方式都低于文本的其余部分。当我将标记包装在或类似标签中时也会发生这种情况。

我正在重置，所以...到底是什么原因造成的？这会出现在所有浏览器中，所以它不是 Chrome 问题或 Safari 问题，或任何浏览器问题。

写！

【问题讨论】：

标签： browser tags rendering

【解决方案1】：

这是因为这些元素上有 4px 的填充，请检查您的规则

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 4px;
    vertical-align: middle;
    border-image: initial;
}

包括您在 Call 和 Email 上使用的 span

【讨论】：

schiesse。完全错过了；以为我把它们都拿出来了。菜鸟监督...谢谢。 :'(

【解决方案2】：

这是由“重置默认浏览器 CSS”引起的。反正我不会推荐这样的东西。特别是，a 元素上的 4px 的 padding 与 vertical-align: middle 一起导致它们呈现低于不在任何指定标签内的普通文本。请参阅http://jsfiddle.net/nxzEA/ 以获取最小示例。

【讨论】：