Chrome と Safari でボタンの下部に 1 ピクセルの隙間があるのはなぜですか?

ブラウザ間でのボタンのレンダリングにおけるサブピクセルの不一致

ボタンが埋め込まれた入力フィールドで構成されるコンポーネントのレンダリングにおける不一致の原因は、次のとおりです。ブラウザ間でのサブピクセル計算の違い。

問題の説明

Firefox ではボタンが 100% の高さと表示される境界線で正しくレンダリングされますが、Chrome と Safari では 1 ピクセルが導入されます。底の隙間。この問題は、Chrome がマージンを整数に丸めるため、ボタンの下マージンが誤って計算されるために発生します。

解決策

このブラウザ間のレンダリングの不均衡を解決するには、ボタンから透明枠までのマージンの使用量。ボタンの境界線を 1px に設定し、background-clip:padding-box プロパティを適用して、透明度が背景に影響を与えないようにします。さらに、Chrome のズーム関連のバグに対処するために、em ベースのパディングを固定ピクセル値に置き換えます。

最終コード スニペット

<code class="css">.wrapper {
  position: relative;
  width: 60%;
  margin: 1em;
  background-color: #ccc;
}

input {
  border: 1px solid red;
  width: 100%;
  background-color: limegreen;
  line-height: 3em;
  padding: 10px;
}

button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid transparent;
  width: 7em;
  margin: 0px;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 0px 2px black;
}</code>

以上がChrome と Safari でボタンの下部に 1 ピクセルの隙間があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。