Странная ошибка IE9 с UL и скрытыми изображениями в CSS - PullRequest
Новая
       29

Странная ошибка IE9 с UL и скрытыми изображениями в CSS

0 голосов
/ 19 июля 2011

Я работаю над созданием простого навигационного блока в правой части страницы.У меня в основном есть пять ссылок на изображения в UL, которые имеют свойство наведения в CSS, которое задает положение фона, так что есть эффект наведения.

Он отлично работает в Firefox, Safari, Chrome И IE7.Тем не менее, запустите IE9, и у всех изображений будет дополнительный интервал по вертикали или что-то ниже их примерно на 1 пиксель, а при наведении курсора размещение на 1 пиксель или 2 пикселя.

Прежде всего я отключил автоматическую совместимость IE9просмотр с помощью: 

<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />

По какой-то причине IE9 включил представление совместимости, которое испортило мой элемент с плавающей точкой.

Вот мой HTML: 

<div id="right">
    <ul id="greenpractices">
        <li id="rightmission_water"><a href="water.html">Water</a></li>
        <li id="rightmission_air"><a href="air.html">Air</a></li>
        <li id="rightmission_innovation"><a href="innovation.html">Innovation</a></li>
        <li id="rightmission_energy"><a href="energy.html">Energy</a></li>
        <li id="rightmission_design"><a href="design.html">Design</a></li>
    </ul>
</div>

И CSS: 

#right {
float: left;
display: inline;
width: 286px;
border-top: 1px solid #686868;
padding: 17px 16px 0px 17px;
}

ul#greenpractices {
list-style-position: outside;
list-style-type: none;
width: 286px;
height: 260px;
}

ul#greenpractices li, ul#greenpractices li a, ul#greenpractices li a:active, ul#greenpractices li a:visited {
position: relative;
display: block;
width: 286px;
height: 52px;
text-indent: -99999px;
}

ul#greenpractices li a:hover {
background-position: 0 0;
}

li#rightinnovation_innovation a {
background: url('images/rightinnovation_innovation.jpg') bottom;
}

li#rightinnovation_air a {
background: url('images/rightinnovation_air.jpg') bottom;
}

li#rightinnovation_water a {
background: url('images/rightinnovation_water.jpg') bottom;
}

li#rightinnovation_energy a {
background: url('images/rightinnovation_energy.jpg') bottom;
}

li#rightinnovation_design a {
background: url('images/rightinnovation_design.jpg') bottom;
}

Большое спасибо всем, кто может помочь!

1 Ответ

1 голос
/ 20 июля 2011

В итоге выяснилось, что окно IE9, которое я использовал, было увеличено на 105%.Достаточно, чтобы быть незаметным.Спасибо всем, кто помог - это было разочарованием!

...