CSS проблема в IE

Question

Мой сайт содержит раскрывающиеся меню в правом верхнем углу экрана. Раскрывающийся список отображается нормально, но когда я наводю курсор мыши на элементы внутри раскрывающегося списка, IE отображает их неправильно. Firefox, однако, отображает их так, как я хочу. Веб-сайт http://www.textsensor.com/test. Кто-нибудь может сказать мне, что вызывает проблему в IE?

Вот подробности. Каждый родительский элемент имеет дочернего элемента <div>, который содержит дочерние элементы в <ul>. Я отображаю их в строке с фиксированной шириной контейнера <div>, так что два из них отображаются в одной строке. Каждый ребенок <li> содержит два изображения и привязку между ними. Эти два изображения обеспечивают закругленные углы, тогда как якорь содержит <span>, который, в свою очередь, содержит текст элемента подменю. Когда мышь перемещается над <span>, я показываю изображения родительского якоря и сестры через javascript, а также устанавливаю его bg-изображение белым. Изображения не выровнены правильно, и тег <span> снизился примерно на 10 пикселей сверху только в IE. Используемый jQuery указан ниже:

   $("#jsddm li ul li a span").hover(function(){
        $(this).parent().siblings("img").css("visibility", 'visible');
        $(this).parent().css("border-bottom", "#a00 5px double");
    }, function(){
        $(this).parent().siblings("img").css("visibility", 'hidden');
        $(this).parent().css("border-bottom", "none");
    });

HTML одного пункта меню:

<li><img src='images/submenuImg1.png' class='leftsubImg'>
<a href="pricerates.php"><span>Price Rates</span></a>
<img src='images/submenuImg3.png' class='rightsubImg'>
</li>

Когда я наведу указатель мыши на span leftsubImg, rightsubImg будет видимым, а bg of span будет изображением, повторяющимся в x. Проблема, которая вызывает проблемы, заключается в том, что интервал имеет отступ около 12 пикселей сверху и примерно на 5 пикселей ниже изображений слева и справа.

IE вывод http://i46.tinypic.com/2858bl.gif http://i46.tinypic.com/2858bl.gif

Приветствия

Аяз Алави

Answer 1

Закругленные углы: вы делаете это неправильно.

Никогда не используйте <img> для чисто стилистического содержания (например, закругленных углов).Конечно, он не предоставит полезную информацию для программы чтения с экрана или пользователю с отключенными таблицами стилей.Вместо этого используйте фоновые изображения.

Кроме того, .hide() - это не то, что вы хотите сделать с изображениями: это удаляет их из потока документа, что означает смещение элементов span.Вместо этого используйте .css('visibility','hidden').

На самом деле вам вообще не нужен javascript.Взгляните на http://www.jsfiddle.net/TeTLw/. Кнопка выглядит не совсем правильно, но она должна работать в разных браузерах.

Чтобы кнопка выглядела правильно, вам нужно сделать ваше изображение дольше: имейте это так:

 ____________________________________
|                                     \
|                                      |
|____________________________________ /

Answer 2

Проблема IE 8 и IE 7 устранена с помощью следующих Условных комментариев

<!--[if IE 8]>
<style>
.leftsubImg , .rightsubImg
{
    margin-bottom:-13px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style>
.leftsubImg , .rightsubImg
{
    vertical-align:middle;
    margin-bottom:3px;
}

</style>
<![endif]-->

Он переместил изображения в правильное положение.Теперь в IE6 у меня проблема с z-индексом, которая заключается в том, что меню не движутся перед картинкой толстяка.

Answer 3

Вы пытались удалить пробелы между элементами li в источнике?

Просто быстрое предположение, это может быть ошибка с пробелами в IE ...

Также в настоящее время я получаю ошибки JavaScript в IE ..