Question

我疯了，想弄清楚为什么标题链接（在左边）和导航栏中的其他链接（右边）的高度不同。

Safari中的差异很微妙，但IE6中的差异更大。

我在H1的css重置中遗漏了什么？

SAFARI
alt text http://img218.imageshack.us/img218/702/safari.png

IE6
alt text http://img64.imageshack.us/img64/870/ie6.png

HTML

<div id="navbar">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left">
            <h1><a href="http://ide.as">title</a></h1>

        </td>
        <td align="right">
            <a href="about.html" class="color1">about</a>
            <a href="faq.html" class="color2">answers</a>
            <a href="contact.html" class="color3">contact</a>
            <input type="text" name="search" value="" id="searchbox">&nbsp;<a class="color4" href="sss">search</a>
        </td>
    </tr>
    </table>
    </div>

和css

#navbar a, h1 a { padding: 3px 5px; vertical-align: middle;}

h1已重置

h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}

Answer 1

h1 a { padding: 3px 5px; vertical-align: middle;}

为h1中的链接设置样式，而不是h1本身。

h1 {margin:0;padding:0;}
h1 {font-size:100%;font-weight:normal;}

设置h1的样式。所以链接的样式仍然存在，它们没有被覆盖。

Answer 2

我认为这是因为右表格单元格中的文本输入导致表格单元格“拉伸”比左表格单元格高一点（并且根据它们绘制文本输入的大小，它们在不同的浏览器上会略有不同盒子）因此稍微抛弃对齐。尝试vertical-align：bottom;在左边的桌子上。

Answer 3

不同浏览器呈现样式的方式存在一些非常微妙的差异。这只是它的另一个例子。

要查看一个非常好的示例，请尝试在每个浏览器中查看Acid 2测试以查看一些差异。

Answer 4

首先，如果跨浏览器发生这种情况，请在Firefox中使用Firebug告诉您元素的样式规则来自何处。

其次，我会检查<a>和<h1>上的行高以及<a>上的边距。

H1 CSS重置失败？

4 个答案: