我正在尝试为网站创建一个像div一样的咆哮。它在Firefox中运行良好,但不是IE6(没有尝试IE7,但我仍然需要支持IE6)。
在Firefox中:带有图像的居中文本浮动到div的右侧 在IE6中:带有图像左侧文本的居中文本。
我已经尝试切换img和span标签顺序,但是这导致两者之间的FF换行,IE渲染文本右侧的图像,但没有停靠在div的右侧。
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
在css中:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
答案 0 :(得分:4)
&gt;选择器在IE 6上不起作用。
摆脱它:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
答案 1 :(得分:2)
&gt; IE6不支持css选择器,请尝试删除它们。
答案 2 :(得分:1)
当你只有一个img和span时,为div中的每个元素添加一个类没有意义。这样做是为了更清洁的代码。
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}