无法将图像浮动到IE 6中的文本右侧

时间:2009-04-07 21:32:24

标签: html css

我正在尝试为网站创建一个像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;
}

3 个答案:

答案 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;
}