Question

我有一个非常简单的网站，其中有一个简单的水平菜单，似乎在除IE8之外的所有浏览器中都有效（可能更旧，但我无法访问测试）。

我指的是＆＃34;背景图像＆＃34;在这个问题中，因为我经历了一个小的消除过程，当我从代码中省略了背景图像时，发现菜单有效（尽管没有背景图像）。

这里的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

Answer 1

IE8中不支持某些背景属性，我担心http://caniuse.com/#feat=background-img-opts

但是，你可以做3件事之一，

1）提供正确尺寸的图像（意味着你不会在视网膜显示器上得到漂亮的清晰图像）

2）为IE7 / 8的背景图像实现polyfill。您可以在此处找到更多信息：https://github.com/louisremi/background-size-polyfill

3）使用透明渐变hack对选项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

Answer 2

这个条件评论允许我使用特定的样式表来渲染IE8，同时为所有其他浏览器使用另一个样式表。这真的很好，因为我能够使用CSS代码使IE8完美运行而不会弄乱所有其他人的CSS代码。

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

......简单就是这么简单......

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

2 个答案: