Сбой сброса CSS H1?

Question

Я схожу с ума, пытаясь понять, почему заголовок ссылки (слева) и другие ссылки в навигационной панели (справа) не имеют одинаковую высоту.

Разница невелика в Safari, но больше в IE6.

Я что-то упустил при сбросе css H1?

SAFARI
альтернативный текст http://img218.imageshack.us/img218/702/safari.png

IE6
альтернативный текст 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>

и КСС

#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

Я думаю, это потому, что ввод текста в правой ячейке таблицы приводит к тому, что эта ячейка таблицы "растягивается" немного выше, чем левая ячейка таблицы (и она будет немного отличаться в разных браузерах в зависимости от того, насколько велики они отрисовывают ввод текста) коробка) и тем самым немного сбрасываем выравнивание. Попробуйте выровнять по вертикали: снизу; в левой ячейке таблицы.

Answer 3

Есть некоторые очень тонкие различия в том, как разные браузеры отображают стили. Это просто еще один пример.

Чтобы увидеть ДЕЙСТВИТЕЛЬНО хороший пример этого, попробуйте посмотреть тест Acid 2 в каждом браузере, чтобы увидеть некоторые различия.

Answer 4

Во-первых, если это происходит в разных браузерах, используйте Firebug в Firefox, чтобы сообщить вам, откуда берутся правила стиля элемента.

Во-вторых, я бы проверил высоту строки в <a> и <h1>, а также поля в <a>.