背景图像在IE8中无法正确显示

我有一个非常简单的网站，其中包含一个简单的水平菜单，它似乎可以在所有浏览器（IE8以外的浏览器）下工作（并且可能会更老，但我无法访问测试）。背景图像在IE8中无法正确显示

我在问题中引用了“背景图像”，因为我经历了一个小的消除过程，发现当我从代码中省略背景图像时，该菜单起作用（尽管没有背景图像）。

CSS代码这里：

.cssmenu ul { 
     display: block; 
     overflow: auto; 
     margin: 0px; 
     padding: 0px; 
     list-style-type: none; 
     font-size: 16px; 
     font-weight: normal; 
    } 
    .cssmenu a { 
     display: block; 
     /*width: 6em;*/ 
     color: black; 
     text-decoration: none; 
     white-space: nowrap; 

    } 
    .cssmenu a:hover { 
     display: block; 
     /*width: 5em;*/ 
     color: #46a446; 
     text-decoration: none; 
     white-space: nowrap; 
    } 

    .cssmenu li { 
     float: left; 
     margin-right: 1.5em; 
     background-image: url('Images/Dark_Green_Beveled_Circle.jpg'); 
     background-position:left center; 
     background-size: 16px 16px; 
     background-repeat: no-repeat; 
     padding-left: 20px; 
     padding-right: 5px; 
     white-space: nowrap;    
      } 
      .cssmenu li:hover { 
     background-image: url('Images/Light_Green_Beveled_Circle.jpg'); 
     background-position:left center; 
     background-size: 18px 18px; 
     background-repeat: no-repeat; 
     white-space: nowrap;   
     } 
     .cssmenu ul li.current { 
     background-image: url('Images/Light_Green_Beveled_Circle.jpg'); 
     background-position:left center; 
     background-size: 20px 20px; 
     background-repeat: no-repeat; 
     white-space: nowrap; 
     }

HTML代码在这里：

<td colspan="2" class="cssmenu"> 
       <img src="Images/image1-8.png" alt="logo"> 
        <ul> 
        <li class="current"><a href='#'><span>Home</span></a></li> 
        <li><a href='UberUns/UberUns.html'><span>Über uns</span></a></li> 
        <li><a href='Termine/Termine.html'><span>Termine</span></a></li> 
        <li><a href='Angebot/Angebot.html'><span>Angebot</span></a></li> 
        <li><a href='Verkaufen/Verkaufen.html'><span>Verkaufen</span></a></li> 
        <li><a href='WeitereInfos/WeitereInfos.html'><span>Weitere Infos</span></a></li> 
        <li><a href='Kontakt-Lageplan/Kontakt_Lageplan.html'><span>Kontakt</span></a></li> 
        <li><a href='Intern/Intern.html'><span>Intern</span></a></li> 
        </ul> 
    </td>

这里是网址：http://www.boerse-daellikon.ch/index.html

来源

2014-03-28 Scott

最不是'背景image'其他的'background'属性在IE8不支持。像'background-size'。你最好使用一个图像相同的图像，而不是稍后应用'background-size'。 –

您使用尺寸为93x93px的图像'Light_Green_Beveled_Circle.jpg'。 IE8将显示此图像的完整大小。您可以使用小尺寸图片作为背景图片 –

我想非常感谢这样的快速回复！我很高兴能够找到这个支持网站:-) – Scott

一些背景属性在IE8的arent支持我怕http://caniuse.com/#feat=background-img-opts

但是，您可以做3件事中的1件，

1）提供正确大小的图像（意味着你没有得到视网膜显示非常清晰的图像）

2）实施IE7/8的背景图像的填充工具。你可以在这里找到更多的信息：https://github.com/louisremi/background-size-polyfill

3）使用透明的渐变劈死排序的组合选项1和2

background: transparent url("path/to/non-retina-sized-image.jpg") left center no-repeat; 
background-image: linear-gradient(transparent,transparent), url("path/to/retina-sized-image.png"); 
background-size: 16px 16px;

的原因选项3名的作品是CSS3兼容的浏览器将取代第一线与第二和第三。其中，作为IE8不会明白的透明线性渐变，而忽略它的背景大小沿着

这个原本建议作为一个变通为svgs跨浏览器支持浏览：http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique

来源

2014-03-28 09:07:09 haxxxton

我想对这样的快速反应表示非常感谢！我很高兴能找到这个支持网站:-) – Scott

我在这里的回复将和我上面写的有关图像大小是一个可行的解决方案相同:-) – Scott

这个条件注释允许我使用一个特定的样式表仅用于渲染IE8，而另一个样式表则用于所有其他浏览器。这真的很成功，因为我能够使用CSS代码来让IE8完美工作，而不会搞乱所有其他代码的CSS代码。

<!--[if IE 8]> 
      <link rel="stylesheet" type="text/css" href="CSS/styles2_ie8.css" /> 
<![endif]-->

...简单很简单呢？

来源

2014-03-29 17:18:00 Scott

:)很高兴你找到了解决方案，尽管你的问题具体问为背景图像解决方案。您是否介意对此问题进行正确回答或标记答案 – haxxxton

背景图像在IE8中无法正确显示

回答

相关问题