【バグ】幅と高さ 1.14em は必ずしも一致しません (^.^)_html/css_WEB-ITnose

前編

input[type="radio"] のスタイルを製品のデザイン案に合わせてカスタマイズしたいと考えています。

-webkit-Appearance は、ボタンやその他のコントロールの外観を変更するために使用される CSS プロパティです。CSS 仕様のドラフトには含まれていません。

-webkit-Appearance: none を使用してスタイルをカスタマイズした後、Chrome のクリック ボックスが少しフラットであることがわかりました。これはブラウザーのバージョンのバグだと思い、初めて無視しました。

数日前、同僚が、私たちが設定したフォントファミリーを無効にすると通常に戻る可能性があることを発見しました。

Text

-webkit-Appearance: none を設定した後、入力は通常の div ではなく、display: inline-block を持つ div になります。これは、これが同じ段落に存在する可能性があるためです。自動的に折り返されないテキスト。

display: inline-block で div を作成し、input[type="radio"] のフラット化されたスタイルを再現するために境界線、幅、高さを設定します。

Chrome (私のバージョンは 49.0.2623.112 (64 ビット) MAC ですが、ほとんどのバージョンで再現できるはずです): 特定のフォントを設定した後、インラインブロック div の幅と高さの単位は次のようになります。 em、幅と高さが不均一になる問題が発生する可能性があります。

(次のテストはページのフォントサイズ: 12px に基づいています)

幅 1.11em ～ 1.14em は 1.1 em にほぼ等しく、1.15em ～ 1.19em はほぼ 1.2 に等しいem、丸めと一致します。

高さ 1.11em ～ 1.13em は 1.1em にほぼ等しく、1.14em ～ 1.19em は 1.2em にほぼ等しいため、幅と高さが 1.14em に設定され、input[type=] が発生します。ラジオ』]がフラットになる。

さらに悪いことに、幅と高さは両方とも 1.1em で正確に等しくありませんが、1.2em は正常です。

計算によると、1.14em は 13.68px にほぼ等しくなります。小数点を含む幅と高さに px 単位を使用することには依然として問題があります。