我对这一切还很陌生，所以我可能错过了学习过程中的几个重要步骤。我有我的这段代码，用于顶部导航栏。在 chrome 中一切似乎都运行良好，但是当我打开 .html IE 或 Firefox 中的文档它不显示图像(请记住，我不能只做 <img> 标签，因为我希望图像在悬停时发生变化)。几个小时以来，我一直在尝试解决这个问题，但似乎仍然无法解决。我所知道的是 content css 中的语法在 IE 中不起作用，除非 !DOCTYPE被指定。我用 <!DOCTYPE html> 指定了文档，这应该是正确的。关于如何使其在 IE 和 Firefox 中正常工作的任何想法？
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Biologi</title>
<link rel="icon" href="favicon.ico" type="image/gif" />
<link type="text/css" rel="stylesheet" href="home.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
p.light {font-weight:lighter;}
a{text-decoration: none}
</style>
</head>
<body>
<div id="menu">
<ul width="100%">
<a href="index.html"><li class="logoli"><div class="logo"></div></li></a>
<a href="index.html"><li><div class="archive"></div><div><p class="light">ARKIV</p></div></li></a>
<a href="index.html"><li><div class="contact"></div><div><p class="light">KONTAKT</p></div></li></a>
</ul>
</div>
</body>
</html>
CSS:
#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;
}
最佳答案
问题似乎与使用 CSS 属性插入图像有关 content带有 URL 值。使用的语法本身是正确的，但它不是 CSS 2.1 规范的一部分，仅在 CSS3 草案中描述并且仅部分在浏览器中实现。这个问题可以简化为这样一个简单的案例:
<!doctype html>
<title>content issue</title>
<style>
#foo { content: url('http://lorempixel.com/100/100') }
</style>
<div id=foo></div>
这适用于某些浏览器，但不是全部，甚至不是所有现代浏览器。通过 CSS 2.1，content 属性仅允许用于 :before 和 :after 伪元素。如果您的实际代码确实有一个空的 div 元素，您可以使用伪元素，因为您不想使用 CSS 将某些内容替换为图像，只有 < em>插入一张图片:
#foo:after { content: url('http://lorempixel.com/100/100') }
关于html - 如何使内容 CSS 属性语法在 IE 和 Firefox 中工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22661122/