Question

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

Answer 1

＆gt;选择器在IE 6上不起作用。

摆脱它：

#growl .text {
    font-size:120%;
    font-weight:bold;
}

#growl .action {
    float:right;
    cursor:pointer;
}

Answer 2

＆gt; IE6不支持css选择器，请尝试删除它们。

Answer 3

当你只有一个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;
}

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

3 个答案: