無法將圖像浮動到IE中文本的右側6

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

的>選擇不能在IE瀏覽器6

剛剛擺脫它：

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

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

Answer 2

的> 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; 
}