Почему комбинация псевдокласса атрибута фона плюс a и a:hover не работает при обычной логике в IE6? Я проверил, что эта проблема существует в браузерах IE6 и ниже. Я часто сталкивался с этой проблемой и использовал другие методы для ее замены. Теперь я нашел другое решение.
Возьмем в качестве примера навигацию. Следующий код полностью соответствует логике CSS. Теоретически, для получения ожидаемого результата должно быть « a:hove background image » в сочетании с «a.nav_1 позиционированием фона». ненормально отображается только фоновое изображение. Демо-версия фоновых координат отсутствует (для сравнения используйте браузеры IE6 и IE6 или выше).
*{маржа:0;дополнение:0;}
.header{позиция: относительная; ширина: 745 пикселей высота: 225 пикселей; фон: URL (bg.jpg) без повтора;}
/*навигация*/
#nav p {позиция: абсолютная; слева: 0; снизу: 0; ширина: 100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover{background:url(bg.jpg) no-repeat 0 0;}
/*Состояние навигации: браузеры IE6 и ниже несовместимы, другие браузеры работают нормально*/
#nav a.nav_1{ширина:80 пикселей;background-position:0 -213px;}
#nav a.nav_2{ширина:86px;background-position:-80px -213px;}
#nav a.nav_3{ширина:227px;background-position:-166px -213px;}
#nav a.nav_4{ширина:92px;background-position:-393px -213px;}
#nav a.nav_5{ширина:98px;background-position:-485px -213px;}
#nav a.nav_6{ширина:162px;background-position:-583px -213px;}
Решение, которое я использовал ранее, заключалось в добавлении соответствующего селектора через состояние. Этот метод кажется, что код кажется раздутым, и мне, как фанату кода, трудно принять демо-версию .
/*Состояние прохождения навигации: предыдущее решение*/
#nav a.nav_1:наведите курсор,
#nav a.nav_1{ширина:90 пикселей;background-position:0 -211px;}
#nav a.nav_2:наведите курсор,
#nav a.nav_2{ширина:86px;background-position:-80px -213px;}
#nav a.nav_3:наведите курсор,
#nav a.nav_3{ширина:227px;background-position:-166px -213px;}
#nav a.nav_4:наведите курсор,
#nav a.nav_4{ширина:92px;background-position:-393px -213px;}
#nav a.nav_5:наведите курсор,
#nav a.nav_5{ширина:98px;background-position:-485px -213px;}
#nav a.nav_6:наведите курсор,
#nav a.nav_6{ширина:162px;background-position:-583px -213px;}
Теоретически селектор «a.nav_1» выше, чем «a:hover», но когда я попытался добавить !important, я обнаружил, что IE6 отображает обычный Demo .
При тестировании других браузеров побочных эффектов не наблюдается. На этот раз дело, похоже, не имеет ничего общего с haslayout, но его причины и результаты также вызывают недоумение.
/*Состояние прохождения навигации: текущее решение*/
#nav a.nav_1{ширина:80px;background-position:0 -211px!important;}
#nav a.nav_2{ширина:86px;background-position:-80px -213px!important;}
#nav a.nav_3{ширина:227px;background-position:-166px -213px!important;}
#nav a.nav_4{ширина:92px;background-position:-393px -213px!important;}
#nav a.nav_5{ширина:98px;background-position:-485px -213px!important;}
#nav a.nav_6{ширина:162px;background-position:-514px -213px!important;}
Решение, предоставленное ytzong, очень хорошее~ Похоже, что отказ от использования фоновых сокращений все еще имеет свои преимущества. Действительно, существует проблема с логикой добавления фона в IE6. Я также протестировал атрибут границы, и в демо-версии этой проблемы нет.
*{маржа:0;дополнение:0;}
.header{позиция: относительная; ширина: 745 пикселей высота: 225 пикселей; фон: URL (bg.jpg) без повтора;}
/*навигация*/
#nav p {позиция: абсолютная; слева: 0; сверху: ширина 180 пикселей;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{background-image:url(bg.jpg); background-repeat:no-repeat;}
/*Состояние навигации: браузеры IE6 и ниже несовместимы, другие браузеры работают нормально*/
#nav p a.nav_1{ширина:80 пикселей;background-position:0 -213px;}
#nav p a.nav_2{ширина:86px;background-position:-80px -213px;}
#nav p a.nav_3{ширина:227px;background-position:-166px -213px;}
#nav p a.nav_4{ширина:92px;background-position:-393px -213px;}
#nav p a.nav_5{ширина:98px;background-position:-485px -213px;}
#nav p a.nav_6{ширина:162px;background-position:-583px -213px;}
Я не знаю, есть ли способ лучше~