Текст для тегов <a></a> не отображается в Internet Explorer (7-8) с заданным фоновым изображением - PullRequest
Новая
       18

Текст для тегов <a></a> не отображается в Internet Explorer (7-8) с заданным фоновым изображением

2 голосов
/ 08 октября 2011

Хорошо, Я чувствую себя глупо, спрашивая об этом, но у меня возникают проблемы со стилизованным тегом привязки и отображением как повторяющегося фонового изображения, так и текста в IE7 / 8. Мой код прекрасно работает в Firefox, IE9, Chrome и Safari, но в IE7 / 8 текст не будет отображаться.

Мой PHP выводит что-то вроде этого: 

<a class="anchorLink border-radius-5 anchorButton" href="#anchorPanel2">Would you like to know more?</a>

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

.anchorButton {
    background-image: url("./images/button-gradient.png");
    height: 52px;
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: 0 0;
    float: left;
    line-height: 52px;
    font-size: 1.4em;
    color: #fff;
    border: 3px solid #a8a8a8;
    margin-top: 10px;
    padding: 0 15px;
    z-index: 900;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    color: #fff !important;
    text-shadow: -1px -1px #707070 !important;
    display: block;
}

Чтобы узнать, о чем я говорю, посетите: dtelepathy.swampedpublishing.com . Если вы посмотрите на сайт в Firefox и IE7 / 8, то увидите, что оранжевые «кнопки», которые я сделал из якорных тегов, не отображают текст в IE.

Я готов сделать все возможное, потому что я ДЕЙСТВИТЕЛЬНО не уверен, что здесь происходит.

Ответы [ 3 ]

2 голосов
/ 08 октября 2011

У меня нет IE7 / 8 для тестирования, но это звучит подозрительно, как вариант ошибки IE peek-a-boo . Может быть, помогут некоторые из изменений , предложенных в паутинах .

1 голос
/ 08 октября 2011

Я только что написал руководство для вас. Убедитесь, что вы выполните эти шаги, и, возможно, отредактируйте свой вопрос, чтобы быть более конкретным. В настоящее время мы можем только догадываться и находить проблему методом проб и ошибок.

Шаги для отладки вашего кода CSS (да = следующий шаг, нет = см. Ниже):

  1. Убедитесь, что проблема вызвана CSS
    Отключить JavaScript. Проблема сохраняется?
  2. Что за источник
    Временно отключите все определенные селекторы, например: <a class="foo bar">> <a x-class="foo bar">. Проблема исчезла? [2]
  3. Какой селектор?
    Добавьте все селекторы, один за другим. Когда новый добавленный селектор вызывает проблемы, отключите все селекторы и используйте тот же селектор, чтобы убедиться, что проблема вызвана только этим селектором.
  4. Какая недвижимость?
    Отключите все строки и добавьте несколько строк (блоков) кода CSS. Когда проблема появляется после повторного добавления блока, удалите только что добавленный блок и добавьте свойства обратно, одно за другим.
  5. Причина найдена
    Используйте Google, переполнение стека или сеть разработчиков Mozilla , чтобы найти документацию об объекте. Возможно, вы использовали свойство неправильно.

[2] Проблема вызвана селектором тегов или унаследованным стилем.

0 голосов
/ 08 октября 2011

Я хорошо вижу текст в оранжевых кнопках в IE8 на Win7.

Ваше наведение на цвет границы не работает на них, хотя в IE8, но это из-за VML, используемого для эффекта закругленного угла. Я много экспериментировал с VML, и это вызывает массу проблем для разметки элементов.

Я бы проверил, решает ли проблема удаление класса border-radius-5 . Таким образом, вы можете увидеть, вызывает ли это текстовую проблему, которую вы видите.

...