H3 CSS проблема на IE7

Question

Индивидуальный дизайн для тега <h3> ... он отлично работает на IE8, Firefox и Chrome.

Но в IE7 ширина (100%) заполнена, чего не должно быть. Как это исправить?

Также размер шрифта не похож на IE8, Firefox и Chrome

h3 {
    background-color:white;
    display:inline-block;
    color:black;
    padding-right:10px;
    padding-left:5px;
    padding-top:6px;
    padding-bottom:6px;
    margin-bottom:2px;
 }

Answer 1

IE7 просто не поддерживает display: inline-block для элементов, которые не являются встроенными.Вы можете исправить это, установив display: inline и используя различные элементы позиционирования, чтобы заставить его работать, или, альтернативно, используйте специфичную для IE таблицу стилей, используя условные комментарии, которые устанавливают ширину вручную.

Это зависит от вашего макета.

Answer 2

IE 7 не поддерживает: встроенный блок

но вы можете "взломать" его, добавив в конец

zoom:1;
*display: inline;

хак найден на: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

Это то, что вам нужно:

h3 {
    display:inline-block;
    *display: inline;
    zoom: 1;

    background-color:white;
    color:black;
    padding-right:10px;
    padding-left:5px;
    padding-top:6px;
    padding-bottom:6px;
    margin-bottom:2px;
 }

*display: inline использует "безопасный взлом CSS" для таргетинга только на IE7. zoom: 1 предоставляет hasLayout для IE7 и ниже, что необходимо для этой работы.

Чтобы исправить размер шрифта, укажите явный font-size. Например font-size: 24px.