Html 背景图像在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;
        }

    <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>

此处的HTML代码：

    .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;
        }

    <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>

---

以下是URL:

IE8恐怕不支持某些后台属性

但是，你可以做三件事中的一件

1） 提供正确大小的图像（这意味着你无法在视网膜显示器上获得清晰的图像）

2） 为IE7/8的背景图像实施多边形填充。您可以在此处找到更多信息：

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无法理解透明线性渐变，并将其与背景大小一起忽略

---

这最初被建议作为SVG跨浏览器支持的一种解决方法：

此条件注释允许我仅使用一个特定的样式表来呈现IE8，而对所有其他浏览器使用另一个样式表。这真的很有效，因为我能够使用CSS代码使IE8完美工作，而不会弄乱所有其他的CSS代码

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

---

…简单就像简单一样…

IE8不支持除

背景图像

以外的大多数

背景

属性。像

背景大小

。您最好使用相同图像的图像，而不是稍后应用

背景大小

。您使用大小为93x93px的图像'Light\u Green\u Beveled\u Circle.jpg'。IE8将显示此图像的完整大小。你可以用小尺寸的图片作为背景图片，我非常感谢你这么快的回复！我很高兴找到了这个支持站点：-）同时，我尝试了一个图像大小的解决方案，瞧，相对于CSS布局，精确的图像大小确实会有所不同，但是与其他浏览器相比，布局仍然存在一些问题（希望是小问题）。这意味着我必须有一些不同的CSS布局代码的IE8（和潜在的旧版本）与所有其他浏览器和版本，这意味着我需要能够使用不同的CSS布局的IE8。这可能吗？我可以检查一下IE8是否正在访问该网站，如果是，请更改CSS代码或文件吗？我非常感谢您这么快的回复！我很高兴找到了这个支持站点：-）我在这里的回答与我在上面写的关于图像大小是一个可行的解决方案的回答相同：-）：）很高兴你找到了一个解决方案，尽管你的问题专门询问背景图像解决方案。你介意对这个问题进行投票或将答案标记为正确吗