Question

我有一些按钮翻转功能，可以在IE以外的浏览器中正常使用。我没有使用JQuery，这不是IE6 - 我还没有在IE6中测试过它。它在IE8中。

你可以看到这里发生了什么（在IE浏览器和Firefox中看一下）：

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

我正在使用通过更改背景位置来显示一个或另一个按钮以响应翻转的技术。我已经尝试过为IE6问题提出的各种解决方案，但没有任何效果。谁能看到这里发生了什么？为什么我们可以在IE中看到Home按钮，而不是其他按钮？

代码：

  <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

然而我试过

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

在两个浏览器中。它打开了   在Firefox中的图像，但打开一个   IE 8中不可用的图像。

我还遇到了一个问题，一个jpg没有在IE中打开但在其他浏览器中打开它是由于图像在CMYK而不是RGB。

参考： http://www.computerhope.com/issues/ch001283.htm

Answer 3

我认为造成这个问题的原因有很多。我有同样的问题，无法理解如何解决问题，然后我意识到我没有在“）”和“左”之间放置一个空格 background：url（../ images / sample.jpg）left top no-repeat

在这两个之间添加空格后，在ie6,7和8中解决了我的问题。

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变得更加清晰，并为除了唯一的元素之外的所有元素设置完全相同的规则，在这种情况下，仅仅是使用的背景图像和宽度。这样一来，如果出现问题，所有图片都会出错。

我也使用精确像素，而不是依赖CSS中的通用“顶部”，“左”等值。更准确的控制。

也许不是最终的答案，但至少它会清理你的CSS，因此更容易找到问题。

在IE8中消失的背景图像

4 个答案: