4

私はオペラでいくつかの奇妙な浮動動作をしています (IE f は完全に異なりますが、それは後で説明します)。i アイコンを右に浮かせています。Fx と WebKit では問題なく動作しますが、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>

ファイアフォックス

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

オペラ http://img41.imageshack.us/img41/112/operaf.jpg

4

3 に答える 3

1

疑似セレクタ :after を使用する場合は、次のようになります。

.dataRow:後
{      
    コンテンツ： "。";  
    表示ブロック;  
    高さ: 0;  
    クリア: 両方;  
    可視性: 非表示;
}

これで Opera は修正されるはずです。私の頭の上では、IE8 も :after をサポートしていると思います。

恥知らずに借りた ポジションが全て

于 2010-03-18T04:09:08.053 に答える
1

これを修正する唯一の方法は、HTML の入力の前にフローティング イメージを配置することです。残念なことに、Opera は float:right が次にフロートする必要がある要素の後に宣言されると、新しい行にまだ配置します。

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

于 2011-06-27T08:45:53.600 に答える
0

cssリセットコードを使用していますか? 頭のてっぺんから、基本的な要素のいくつかに余分なパディングが追加されているようです。

ちょっとした冗談として、手動で設定する前に、dataGroup 内のすべての要素のパディングとマージンを削除してみてください。

.dataGroup *
{
    margin: 0px;
    padding: 0px;
}
...
.dataRow...
于 2009-08-27T14:10:59.107 に答える