Question

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

Answer 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的图像替换一些内容，只有 insert 图片：

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

如何使内容CSS属性语法在IE＆amp;火狐？

1 个答案: