2

私はこの小さな、しかし非常に厄介なクロスブラウザCSSの問題に取り組んできました。何らかの理由で、Firefoxは他のブラウザとは異なる測定値のボックス/入力フィールドを表示します。Firefoxは、ボックスのサイズ設定を無視しているようです。border-boxでありながら、独自の方法でボックスを測定しています。ここでの原因は何ですか？これに対するバブルガムの解決策はありますか？準備はできています。

ここで行っているのは、動的なjquery入力フィールド加算器です。プラスボタンの横のフィールドは「fakefields」で、Firefoxでは何らかの理由で異なって表示されます。

ここに画像の説明を入力してください

Doctype：XHTML 1.0 Strict

CSS：

.fakeinpfield {
        border: 1px solid #C2C2C2 !important;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; 
}
input#fakeinpfield3 {
        width: 320px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;

}
input#fakeinpfield4 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}
input#fakeinpfield5 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}
4

2 に答える 2

1

なぜFirefoxがこれを行うのかはわかりませんが、私は常にこの問題に遭遇します。最後に私の解決策はborder: none;、背景として（入力のような）imgを設定して追加し、入力フィールドを偽造することでした。同じサイズ。

ちなみに、私が間違っていなければ、Operaにもサイズの問題があります。

于 2013-01-04T11:14:14.910 に答える
1

わかりました、ボックスサイズで解決しました。ボックスの測定方法が異なるため、Firefoxには別のボックスサイズを使用する必要があるようです（要素をインラインブロックに設定しましたが、これが最終的に関係があるかどうかはわかりません）続きを読む：http ：//www.quirksmode.org/css/box.html

input#fakeinpfield3 {
        width: 318px !important;
        margin: 3px 6px 0 0;
        -moz-box-sizing: border-box; 
        box-sizing: content-box;
        height: 26px;
        padding: 0;
        display: inline-block;
}
于 2013-01-04T12:03:26.450 に答える