Css поведение в разных браузерах

Question

Я пытаюсь что-то исправить в css моего проекта, но поведение этой кнопки отличается в IE8. Так что это код:

.virtualS{
    background: -moz-linear-gradient(top, #FF734C, #FF0000);
    background: -webkit-linear-gradient(top, #FF734C, #FF0000);
    background: -o-linear-gradient(top, #ff704a 0%,#ff0201 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF734C, endColorstr=#FF0000);
    border:1px solid #eaeaea;
    height:14px;
}

проблема в height:14px, потому что в Firefox, Chrome, Opera у меня должно быть 16px, а в IE 14px. Так что я могу сделать, чтобы это исправить? Я не хочу использовать другой файл .css с условными комментариями только для этого, так что я могу сделать, чтобы правильно установить одинаковую высоту для этой кнопки в IE и Firefox.

Answer 1

Я думаю, что если вы хотите 14px, вам может потребоваться установить line-height: 14px

Answer 2

Проверьте, выполняет ли IE рендеринг в режиме причуд, если это так, размер будет неправильным.Но это можно исправить, исправив HTML.

Answer 3

Несмотря на то, что он не совместим с W3C, вы можете использовать 'hacks' в своей CSS для таргетинга на определенные браузеры, но совместимый способ - использовать <!-- [if IE x]> <link ... /> <![endif] -->, эти "специальные комментарии" распознаются IE и он загружает соответствующую таблицу стилей