Html 如何使内容CSS属性语法在IE&；中工作；火狐？_Html_Css_Internet Explorer_Firefox

Html 如何使内容CSS属性语法在IE&；中工作；火狐？

html css internet-explorer firefox

Html 如何使内容CSS属性语法在IE&；中工作；火狐？,html,css,internet-explorer,firefox,Html,Css,Internet Explorer,Firefox,我对这一切都很陌生，所以我可能错过了学习过程中的几个重要步骤。我有我的代码，用于顶部导航条。在chrome中，一切似乎都很正常，但是当我在IE或firefox中打开.html文档时，它不会显示图像（请记住，我不能只做标记，因为我希望图像在悬停时发生变化）。几个小时以来，我一直试图解决这个问题，但似乎仍然无法解决。我只知道css中的内容语法在IE中不起作用，除非！已指定DOCTYPE。我用指定了文档，应该是正确的。你知道如何在IE和Firefox中正常工作吗 HTML: 问题似乎在于使用带有URL

我对这一切都很陌生，所以我可能错过了学习过程中的几个重要步骤。我有我的代码，用于顶部导航条。在chrome中，一切似乎都很正常，但是当我在IE或firefox中打开

.html

文档时，它不会显示图像（请记住，我不能只做

标记，因为我希望图像在悬停时发生变化）。几个小时以来，我一直试图解决这个问题，但似乎仍然无法解决。我只知道css中的

内容

语法在IE中不起作用，除非

！已指定DOCTYPE

。我用

指定了文档，应该是正确的。你知道如何在IE和Firefox中正常工作吗

HTML:

问题似乎在于使用带有URL值的CSS属性插入图像。使用的语法本身是正确的，但它不是CSS 2.1规范的一部分，仅在CSS3草稿中描述，并且仅在浏览器中部分实现。这个问题可以简化为这样一个简单的情况：

<!doctype html>
<title>content issue</title>
<style>
#foo { content: url('http://lorempixel.com/100/100') }
</style>
<div id=foo></div>

不完全相关，但你不能有一个锚标签作为一个孩子的UL。UL只能将LI元素作为子元素。您应该将锚定标记移动到LI标记中。要清楚，问题在于在元素上指定

内容，而不是在：前/：后伪元素上指定内容，而不是像看上去那样使用URL值。
#menu{
    width: 100%;
    font-size: 10px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: left;
    background-color: #93b873;
    border-bottom: 1px dotted #2d2d2d;
}
#menu ul{
    height: 82px;
}
#menu li{ 
    text-align: center;
    height: 76px;
    width: 60px;
    display: block;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-right: 1px dotted #2d2d2d;
    float: left;
}
#menu ul .logoli{
    width: 350px;
}
#menu a{
    text-decoration: none;
    color: #282828;
    padding: 8px 8px 8px 8px;
    line-height: 36px;
}
#menu li:hover {
    background-color: #88ad6a;
}
#menu a:hover{
    color: #FFFFFF;
}
#menu a:hover .archive{
    content: url('archive2.png') no-repeat;
}
.archive{
    content:url('archive1.png') no-repeat;
    width: auto;
    height: 40px;
    margin:auto;
}
.contact{
    content:url('contact1.png') no-repeat;
    width: auto;
    height: 40px;
    margin:auto;
}
.logo{
    content:url(logo1.png) no-repeat;
    width: auto;
    height: 70px;
    margin:auto;
}
#menu a:hover .contact{
    content: url('contact2.png') no-repeat;
}

#menu a:hover .logo{
    content: url('logo2.png')no-repeat;
}

<!doctype html>
<title>content issue</title>
<style>
#foo { content: url('http://lorempixel.com/100/100') }
</style>
<div id=foo></div>

#foo:after { content: url('http://lorempixel.com/100/100') }