fei*_*fei 1 css background internet-explorer-6
我正在制作一个启动图像div,用不同的css类改变背景,这里是我定义的规则:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
这在firefox和chrome中运行良好,但背景以某种方式不会显示在ie中.奇怪的是,它适用于主页类,但不适用于projectspage类.因此,似乎6不同地解释这些几乎相同的规则.我试过清除缓存,没有帮助.我对css很新,即6个黑客,所以我在这里缺少任何东西吗？
另外一个与此有点相关的问题,似乎它在firefox中没有效果,如果在课前有空格,比如"#splash .homepage",但不知怎的,我看到其他人的网站使用带有空格的css.可能是什么问题呢？
更新: 我试图颠倒#splash.homepage和#splash.projectspage的顺序,然后现在projectspage工作但不是主页.似乎使用了#splash后立即出现的任何内容.
这里有一些相关的CSS和htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6不支持多个组合选择器来选择元素(#id.class或.class.class等).IE6只会识别您链中的最后一个类/ ID.
但是,在这种情况下,只要您在页面上的一个元素上只有.homepage和.projectspage,背景图像就应该显示在正确的元素上.
我注意到你可能正在使用.homepage和.projectspage来区分这些不同页面上的两个PAGES和相同的ELEMENT.一个好的做法是将类放在<body>元素上,以便您可以使用它来区分每个页面及其后代.
<body class="homepage">
<div id="splash">
然后你的CSS将是:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
附加好处:您现在可以基于每页定位任何元素,而不仅仅是您添加".homepage"或".projectspage"的元素.