Стилизованные теги привязки (<a>) исчезают после нажатия на IE 8 и ниже - PullRequest
2 голосов
/ 16 января 2012

Добрый день сообществу stackoverflow. Я столкнулся с ошибкой в ​​отношении HTML, CSS и Internet Explorer.

Стилизованные теги используются как своего рода фильтр. Они выглядят и действуют как кнопки, функциональность прекрасно работает в Chrome и Mozilla, но графические ошибки появляются после нажатия на эти теги в IE.

В IE9 фоновый div просачивается в изображения стилизованных тегов (после долгих испытаний я обнаружил, что это было вызвано изменением смещения значений Layout после щелчка по элементу.)

В IE8 и IE7 теги просто полностью исчезают после нажатия. Он запустит процесс onclick и завершит его выполнение (мы изменим атрибут class = "", чтобы изменить внешний вид при нажатии и наведении курсора в соответствии с CSS), но после этого завершится он просто полностью удаляет визуальный элемент в передней части (в соответствии с компоновкой ширина и высота изменяются на 0, а значения полей изменяются на auto). Постскриптум затрагивается только выбранный элемент.

2 примера тегов затронутых элементов.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link href="styles/screen.css" rel="stylesheet" type="text/css" />
 </head>   
    <body>
       <a id="virginActiveTag" class="vaOff" href="#"     onclick="tagClick('virginActiveTag')"></a>
       <a id="laFitnessTag" class="lafOn" href="#"     onclick="tagClick('laFitnessTag')"></a>  
    </body>
 </html>

Пример оформления для одного из элементов.

 a.vaOn:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 5px 5px #5c822a;-webkit-box-shadow: 0 0 5px 5px#5c822a;box-shadow: 0 0 5px 5px #5c822a;}
 a.vaOff:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -110px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
 a.vaOff:hover {background:#fffffe url(../images/logos_va_on.gif) no-repeat 0 -8px;}

Ссылка на доработанный сайт: http://pru -partnerfinder.appspot.com /

Я полагаю, что это как-то связано со свойством hasLayout, которое IE выделяет для определенных элементов. Но я не совсем уверен. Я попытался физически жестко закодировать элементы обратно к их исходным размерам в событии onclick, но он не принимает новые значения, и только поле в ie8 устанавливается правильно.

Заранее спасибо за любую помощь. Я просто в тупике, кто-нибудь может помочь?

1 Ответ

1 голос
/ 18 января 2012

HasLayout отсутствует в IE8 и выше (но вы можете запустить его, переведя IE в режим Quirks, IE7 compat или любой другой ...): http://msdn.microsoft.com/en-us/library/ff405844(v=vs.85).aspx

Вы запускаете режим Quirks или аналогичный?

Можете ли вы решить проблему, если вместо псевдокласса вы стилизуете прямой элемент? IE был довольно известен тем, что испытывал зуд при изменении состояний отображения между псевдоклассами. Кроме того, после того, как на якорь нажали, он больше не: ссылка, а: посещен, и стилизация самого элемента естественным образом распространяется на: ссылку, посещение и т. Д. Затем: hover,: active и: focus нужно только переопределить «a».

a.vaOn, a.vaOff {
  margin: 0 10px 10px 0; 
  display: inline-block;
  width: 200px;
  height: 95px;
  background: #fff url(../images/logos_va_on.gif) no-repeat 0 -8px;
  ...etc...
}
a.vaOff {
  background-position: 0 -110px;
}

Это устанавливает основу для самих элементов: состояние отображения (встроенный блок, для чего бы то ни было в IE7), ширина и высота. Если бы были задействованы IE6 и абсолютное позиционирование, вам нужно было бы просто смириться с этим и снова указать высоту: hover, но вы не упомянули об этом.

a.vaOff:hover, a.vaOff:focus {
  background-position: 0 -8px;
}

То, что я говорю, по крайней мере, в более старых версиях IE (6, 7), где вы устанавливаете размеры и состояния отображения, так что, если вы попробуете этот стиль настройки, проблема исчезнет или изменится?

IE8 и 9 делают это интересным, потому что ни один из них больше не имел Layout, и ни один из них не был так разборчив в отношении того, где вы указали состояния отображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...