Фоновое изображение CSS не отображается только в IE7

Question

HTML это:

<div class="choose-os">
<p>
   <a href="someLink" class="windows">Microsoft Windows</a> 
   <a href="someOtherLink" class="macos">Apple Mac OS</a>
</p>
</div>

CSS это:

.choose-os {
    margin: 20px 0;
    padding: 20px;
    background: #e7eefa;
}
.choose-os p {
    margin: 0;
}
.choose-os p a {
    display: inline-block;
    text-indent: -100000px;
    height: 56px;
    width: 308px;
}
.choose-os p a.windows {
    background: url(../images/button-windows-bg.png) 0 0;
}
.choose-os p a.macos {
    background: url(../images/button-macos-bg.png) 0 0;
}
.choose-os p a:hover {
    background-position: 0 -56px;
}

Буду признателен за любые предложения, так как фоновое изображение также появится в IE7.

Answer 1

text-indent: -100000px; в сочетании с inline-block - это то, что делает эти два элемента невидимыми в IE7 из-за ошибки.

Вам нужно найти какой-то другой способ скрыть текст для IE7(или не использовать inline-block вообще, см. ниже для более подходящего исправления).

Опции включают метод в комментарии @Sotiris или:

.choose-os p a {
    display: inline-block;
    height: 56px;
    width: 308px;

    text-indent: -100000px;

    /* for ie7 */
    *text-indent: 0;
    *font-size: 0;
    *line-height: 0
}

, который использует*property: value взломайте несколько раз, чтобы скрыть текст в IE7.

---

Проблема, похоже, связана с использованием display: inline-block.

Итак, еще один обходной путь ( который я предпочитаю моему предыдущему ):

.choose-os {
    margin: 20px 0;
    padding: 20px;
    background: #e7eefa;
    overflow: hidden
}
.choose-os p a {
    float: left;
    margin-right: 4px;
    text-indent: -100000px;
    height: 56px;
    width: 308px;
}

Answer 2

Чтобы правильно отобразить inline-block в IE7, добавьте следующие стили к .choose-os p a

zoom:1
*display:inline

(Звезда важна! Она игнорируется современными браузерами, но не IE6 / 7)

IE7 не учитывает встроенный блок, поэтому вам нужно немного поработать, чтобы он заработал. Здесь есть отличное описание: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

[править] Если текстовый отступ также является частью преступника, вам лучше придерживаться display:block и устанавливать float:left на свои элементы. Вероятно, несколько допустимых путей:)

Answer 3

IE7 имеет некоторые серьезные ограничения в CSS. Я бы рекомендовал избегать сокращенных обозначений и явно объявлять каждое свойство, а затем проверять таблицу CSS здесь .