奇怪的（？）Opera浮動

我有一些奇怪的歌劇浮動行爲（IE瀏覽器的完全不同，但這是爲了以後）。我正在將i圖標向右移動。它在Fx和WebKit上很好地工作，但是Opera將圖標向下移動一點。任何人都知道這是怎麼發生的？奇怪的（？）Opera浮動

CSS：

.dataRow { 
    margin: 5px 0; 
    clear:right; 
} 
.dataRow label{ 
    display: block; 
    float:left; 
    width: 160px; 
    vertical-align: middle; 
    font-size: 80%; 
} 
.dataGroup a img { 
    border:0;float:right; 
    position:relative; 
    right:0; 
} 
.dataGroup a:hover { 
    background:#EBEDC7; 
    text-decoration:none; 
} 
.dataGroup a.tooltip span { 
    display:none; 
    padding:2px 3px; 
    margin-top:20px; 
    width:100px; 
    font-size: 80%; 
} 
.dataGroup a.tooltip:hover span { 
    display:inline; 
    position:absolute; 
    border:1px solid #632D11; 
    background:#C2BD6C; 
    color:#fff; 
}

HTML：

<fieldset class="dataGroup"> 
<div class="dataRow"><label>Foobar:</label> <input name="foobar" size="10" value="somedata" /> <a href="#" class="tooltip"><img src="/img/admin/information.png"/><span>Tooltip Info</span></a></div> 
</fieldset>

FireFox http://img245.imageshack.us/img245/6484/firefoxq.jpg

Webkit http://img197.imageshack.us/img197/3269/webkit.jpg

Opera http://img41.imageshack.us/img41/112/operaf.jpg

來源

2009-08-14 SkaveRat

你可能想試試這件文檔類型：http://doctype.com/（http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/） – 2009-08-14 11:50:52

你使用任何CSS重置代碼？關於我的頭頂，似乎你正在爲你的一些基本元素添加額外的填充。

僅適用於踢腿和笑聲，請嘗試在dataGroup中的所有元素上移除填充和邊距，然後再手動設置它們。

.dataGroup * 
{ 
    margin: 0px; 
    padding: 0px; 
} 
... 
.dataRow...

來源

2009-08-27 14:10:59

如果使用僞選擇：之後，就像這樣：

.dataRow:after 
{  
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

這應該修復Opera和我的頭頂，我相信IE8還支持：後。

從 Position is everything

來源

2010-03-18 04:09:08

無恥借用來解決這個問題的唯一方法是在你的HTML的輸入之前有浮動圖像。不幸的是，Opera仍然把一個浮點數放在一個新行上：當它在它應該浮動的元素之後聲明時。

http://bytes.com/topic/html-css/answers/587691-float-right-goes-next-line

來源

2011-06-27 08:45:53

奇怪的（？）Opera浮動

回答

相關問題