2

パディングを使用すると、奇妙な動作が発生します。

ラッパーとしてdivがあります。このラッパーには、両側に25pxのパディングがあります。

.wrapper #header #navline #log form .small {
    height: 25px;
    width: 180px;
    padding: 5px 25px;
}

そのラッパーには、次のcssを含む入力フィールドがあります。

input[type="text"],[type="password"] {
    font-size: 10px;
    width: 180px;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    outline:none;
}

およびエラークラスとして：

input.error {
    background-image: url(../images/error.png);
    background-repeat:no-repeat;
    background-position: 160px 50%;
    width: 165px;
    padding-left: 5px;
    padding-right: 20px;
    position: absolute;
    z-index: 3;
}

だから私はそれを正しい方法で設定することで夢中になっています。問題は、chrome/safariとFirefoxではパディングプロパティの処理が異なるように見えることです。たとえば、heightプロパティをchrome / safariに残す場合、入力フィールドに自動的に追加される上部/下部のパディングのようなものがあります。Firefoxでは、入力フィールドの高さが異なります。画像を表示するには：

Firefox： Firefox

クロム： クロム

主な問題は、入力フィールドをラッパーdivの中央に配置したいということです。入力の幅は180pxである必要があります。これは、左側に25pxあることを意味します。テキストのパディングも両側に5pxです。したがって、パディングプロパティを使用する場合、新しい入力フィールドの幅は、幅からパディングを引いたものになります。これが最初の質問になります。pading-leftand of 5pxを使用する場合padding-right、これは180px（幅入力フィールド）から10px（パディング）を引いたものに等しいですか、それとも左側が+ 5px、右側が-5pxであるため、パディングは0pxですか？では、入力フィールドの正しい幅はどれくらいになるでしょうか。

2番目の質問は、エラークラスに関するものです。その中で写真を追加し、右側のパディングを5pxから20pxに増やしたいと思います。ここでも、入力フィールドの幅はどうなっているのでしょうか。背後のロジックは180pxから+5pxを引いたもの、-20pxは165pxになると思いましたか？

3番目の質問：すべての方法を試しましたが、結果はブラウザごとに異なりました。パディングはパディングである必要があるかどうかにかかわらず、ロジックの背後に障害がありますか？

4

1 に答える 1

5

パディングのあるすべての要素にcss3ボックスのサイズを追加します。問題が修正されます。

 .text {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
于 2013-03-14T11:23:56.927 に答える