Почему дополнительный пиксель добавляется к элементам Firefox, когда я использую `line-height: 1` в моем сбросе?

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}

Проблема в том, что, пока я использую высоту строки: 1 я вижу дополнительный пиксель, который не исчезает, независимо от того, что я делаю в ссылках моего блока, даже я пытался установить высоту, высоту строки и размер шрифта Это. ничего не работает Пожалуйста, расскажите мне, что происходит с 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 создаст пиксель поверх текста. Я четко вижу, что он не сбалансирован, хотя я установил верхний и нижний отступы одинаково. Кто-то скажет мне, почему это происходит, если я удаляю высоту строки: 1 из моего сброса много других ошибок.

Answer 1

Попробуйте использовать line-height: normal;

Это говорит о том, что он должен иметь ту же высоту, что и текст (которая, похоже, будет такой же, как line-height:1, но, возможно, firefox относится к этому по-другому).

Answer 2

Я не понимаю, я не вижу места, используя ваш CSS выше, я использую Firefox 3.6.13

Может быть, посмотрите, можете ли вы воссоздать макет вашей проблемы на JSbin?

http://jsbin.com/ajinu3