IE7 - Фоновый цвет слишком широк

Question

У меня есть текст поверх изображения.

В новых браузерах он работает нормально.

Но когда я проверяю в IE7, это выглядит следующим образом:

Каким-то образом, IE7 очень острый, на давая цвет фона ширину 100%. И я не исправляю это, задав ширину, так как длина текста будет меняться от страницы к странице.

Мой CSS выглядит следующим образом:

#sub-slideshow-wrapper h2 { 
font-family: 'Droid Sans',sans-serif; 
display: table; 
font-size: 20px; 
font-weight: 900; 
color: #000; 
background: #e68e47; 
background: rgba(230,142,71,0.8); 
padding: 7px; 
margin: 0 0 3px 0; 
} 

И я знаю, что IE7 устарела, и что только 1.xxx является usnig его. Но я убежден, что он работает на всех браузерах, даже старых.

Answer 1

Если вы должны поддержка IE7 добавить масштаб: 1 и * Дисплей: встроенный (звезда взломать целевой IE6 & 7), чтобы сделать IE 7 отображать их, как если бы они были рядный блок. Однако у этого могут быть другие эффекты, которые вы не хотите.

#sub-slideshow-wrapper h2 { 
font-family: 'Droid Sans',sans-serif; 

zoom: 1; /* added */ 
*display: inline; /* added */ 

display: table; 
font-size: 20px; 
font-weight: 900; 
color: #000; 
background: #e68e47; 
background: rgba(230,142,71,0.8); 
padding: 7px; 
margin: 0 0 3px 0; 
} 

Answer 2

Как вы можете видеть here, IE7 не поддерживает display:table поэтому ваш h2 визуализируется с display:block (стандарт display для h2), вызывая проблемы.

Поскольку глобальное использование IE7 составляет около 0,1%, я предлагаю вам оставить его как есть.