如何使内容 CSS 属性语法在 IE 和 Firefox 中工作？答案

【问题标题】：How do I make the content CSS property syntax work in IE & Firefox?如何使内容 CSS 属性语法在 IE 和 Firefox 中工作？
【发布时间】：2014-03-26 22:09:19
【问题描述】：

我对这一切都很陌生，所以我可能错过了学习过程中的一些重要步骤。我有我的这个代码，用于顶部导航栏。 chrome 中的一切似乎都运行良好，但是当我在 IE 或 firefox 中打开 .html 文档时，它不会显示图像（请记住，我不能只使用 <img> 标签，因为我想要图像悬停时更改）。我一直试图解决这个问题几个小时，但似乎仍然无法解决它。我所知道的是，除非指定了!DOCTYPE，否则css 中的content 语法在IE 中不起作用。我用<!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;
}

【问题讨论】：

不完全相关，但您不能将锚标签作为 UL 的子标签。 UL 只能将 LI 元素作为子元素。您应该将锚标签移动到 LI 标签内。

标签： html css internet-explorer firefox

【解决方案1】：

问题似乎在于使用带有 URL 值的 CSS 属性 content 插入图像。使用的语法本身是正确的，但它不是 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') }

【讨论】：

需要明确的是，问题在于在元素上指定 content 而不是在 :before/:after 伪元素上指定，而不是像看起来那样使用 URL 值。