Исчезающее фоновое изображение в IE8

Question

У меня есть некоторые кнопки, которые отлично работают в браузерах, отличных от IE. Я не использую JQuery, и это не IE6 - я еще не тестировал его в IE6. Это в IE8.

Вы можете увидеть, что здесь происходит (посмотрите на это в IE против Firefox):

http://www.brighttext.com/socialtech/index.html

Я использую технику показа той или иной кнопки в ответ на опрокидывание путем изменения положения фона. Я пробовал различные решения, предложенные для проблем IE6, но ничего не помогло. Кто-нибудь может увидеть, что здесь происходит? И почему мы видим кнопку «Домой» в IE, а не другие?

Код:

  <ul>
    <li id="homeLink" class="ord"><a href="index.html">Home</a></li>
    <li id="faqLink" class="current"><a href="faq.html">FAQ</a></li>
    <li id="speakersLink" class="ord"><a href="speakers.html">Speaker Info</a></li>
    <li id="sponsorsLink" class="ord"><a href="sponsors.html">Sponsor Info</a></li>
  </ul>

CSS для первых двух кнопок (я сделал это для всех четырех) внутри div, который называется mastheadLeft:

    #mastheadLeft li#homeLink a {
        height: 32px;
        width: 86px;
        display: block;
        text-indent: -1000em;
        background: url(../images/home_dual.jpg) no-repeat left top ;
        border: none;
    }

    #mastheadLeft li#homeLink.current a {
        background-position: left top;
    }

    #mastheadLeft li#homeLink.current a:hover {
        background-position: left top;
    }

    #mastheadLeft li#homeLink.ord a {
        background-position: left bottom;
    }

    #mastheadLeft li#homeLink.ord a:hover {
        background-position: left top;
    }

    #mastheadLeft li#faqLink a {
        height: 34px;
        width: 75px;
        display: block;
        text-indent: -1000em;
        background: url(../images/faq_dual.jpg) no-repeat left bottom;
        border: none;
    }


    #mastheadLeft li#faqLink.current a {
        background-position: left top;
    }

    #mastheadLeft li#faqLink.current a:hover {
        background-position: left top;
    }

   #mastheadLeft li#faqLink.ord a {
        background-position: left bottom;
    }

    #mastheadLeft li#faqLink.ord a:hover {
        background-position: left top;
    }

Answer 1

Я перепробовал много вещей, включая воссоздание вашего проекта (копирование и вставка вашего исходного кода и CSS с данного сайта). со своей стороны, используя мои собственные изображения, он отлично работает как в IE 8, так и в Firefox 3.

однако я пытался

http://www.brighttext.com/socialtech/images/faq_dual.jpg

в обоих браузерах. и он открывает изображение в Firefox, но открывает недоступное изображение в IE 8. Поэтому, возможно, вам стоит взглянуть, где хранятся ваши изображения. как я уже сказал, с моими тестовыми изображениями, кажется, работает отлично.

Answer 2

Ну, я думаю, что есть много причин, которые вызывают эту проблему. У меня была та же проблема, и я не мог понять, как решить проблему, тогда я понимаю, что не ставил пробел между ")" и "слева" фон: URL (../ images / sample.jpg) слева вверху без повтора

После добавления пробела между этими двумя я решил проблему в ie6,7 и 8.

Answer 3

как бы я ни пытался

http://www.brighttext.com/socialtech/images/faq%5Fdual.jpg

в обоих браузерах. и это открывает изображение в Firefox, но открывает недоступное изображение в IE 8.

У меня также была проблема с jpg, который не открывался в IE, но открывался в других браузерах, потому что изображение было в CMYK, а не в RGB.

Ссылка: http://www.computerhope.com/issues/ch001283.htm

Answer 4

Существует ли причина, по которой некоторые изображения представляют собой PNG, а некоторые - JPG? Мне любопытно, связана ли проблема с отсутствующим файлом с типом файла. Наверное, нет, но мне интересно.

Кроме того, когда я делаю фоновые изображения в тегах привязки, как это, изображение имеет половину без наведения, расположенную поверх половины наведения, и делаю мой CSS следующим образом:

    #mastheadLeft li a {
      height: 34px;
      display: block;
      text-indent: -1000em;
      border: none;
    }

    #mastheadLeft li a:hover, #mastheadLeft li.current a {
      background-position:0 -34px;
    }

   #homeLink a {
      width: 86px;
      background: url(/images/home_dual.jpg) no-repeat;
    }

   #faqLink a {
      width: 75px;
      background: url(/images/faq_dual.jpg) no-repeat;
    }

Это делает CSS намного чище и устанавливает одинаковые правила для всех элементов, кроме уникальных, которые в данном случае представляют собой только используемое фоновое изображение и ширину. Таким образом, если что-то пойдет не так, это будет неправильно для всех изображений.

Я также использую точные пиксели вместо зависимости от общих значений "top", "left" и т. Д. В CSS. Более точный контроль.

Возможно, это не окончательный ответ, но, по крайней мере, он очистит ваш CSS, чтобы легче было найти проблему.