奇妙な（？）オペラフローティング

Question

私はオペラに奇妙な浮動動作をしています（IE fは全く違っていますが、それは後であります）。 私はiアイコンを右側に浮かべています。 FxとWebKitではうまく動作しますが、オペラはアイコンを少し下にシフトします。誰でもこれがどのように起こるか考えましたか？

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

Answer 1

あなたはどのCSSリセットコードを使用していますか？私の頭の上から、あなたの基本的な要素のいくつかに余分なパディングがあるようです。

ちょうどキックとジッキルのために、手動で設定する前に、データグループ内のすべての要素のパディングとマージンを削除してみてください。

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

Answer 2

あなたは擬似セレクターを使用する場合：の後に、そのような：オペラを修正する必要があり

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

を、そして私の頭の上の、私はIE8もサポートして信じている：後。

は臆面もなくこの問題を解決する唯一の方法は、あなたのHTMLで入力する前に浮動画像を持っている Position is everything

Answer 3

から借りました。残念ながら、Operaはまだフロートを置いています：要素の後ろに宣言されたときに新しい行の上に置いてください。

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