Проблема с высотой строки CSS в разных браузерах

Я взял вашу демонстрацию: http://jsfiddle.net/DnGvF/

и добавил только этот CSS в конце: http://jsfiddle.net/gRF9g/

/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
    overflow: visible;
    *height: 24px;
    *line-height: 15px
}

Некоторое объяснение того, что там происходит:

• В IE7 есть известная ошибка, которую overflow: visible исправляет, связанная с шириной кнопки. Попробуйте посмотреть мою демонстрацию в IE7 с ним и без него.
• Я использую взлом свойства Star, чтобы изменить height и line-height только для IE7 и ниже. Вы можете изменить цифры, которые я выбрал, если вам нужно.
• Этот хак — недопустимый CSS, но с его использованием проблем нет. Он никогда не вернется и не укусит вас — это «безопасный взлом». Тем не менее, если вам нужен 100% правильный CSS, есть альтернативы.

Теперь он выглядит одинаково между IE7 и более поздними версиями.

Да, это немного сумбурно, но, по крайней мере, это все вместе в CSS в одном месте, с четким комментарием.

Честно говоря, если IE7 является единственной проблемой, я бы просто пошел на хитрость и увеличил высоту строки:

*+html .button { line-height:24px }

Если вы используете что-то вроде Modernizr, вы можете отказаться от хака и использовать:

.ie7 .button { line-height:24px }

Конечно, другой альтернативой является фактическое отслеживание того, почему IE7 ведет себя так, а не иначе, и переписывание вашего CSS соответствующим образом, но без опубликованного кода я не могу вам в этом помочь.

EDIT: Забыли об этом методе таргетинга только на IE7:

<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->

Кнопки в IE имеют дополнительные отступы/границы/что угодно - они не так хорошо стилизованы, как в других браузерах.