6

私は次のcssを持っています:

.btn_container {
cursor: pointer;
font-family: Tahoma,Verdana,Arial;
font-size: 11px;
padding: 0;
width: auto;
}

.btn_center {
background: blue;
color: #FFFFFF !important;
display: block;
float: left;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
}

行の高さ 30 は、Firefox では中央に配置されますが、Webkit では 32 です。

ブラウザによってレンダリングが異なることは知っていますが、テキストを適切に中央に配置するのに問題はありませんでした。

次の例では、firefox で数ピクセル下にドロップされていることがわかります: http://jsfiddle.net/mstefanko/EGzEB/5/

4

2 に答える 2

10

私は過去にこれについて厳しいテストを行ってきました。私はそれをテキストジグルと呼んでいます。それはあなたがコントロールできるものではありません。それを最小化するためにできることは、すべてのテキスト要素に明示的な行の高さ (特に px 単位) を適用することだけです。

デフォルトの行の高さは、ブラウザーによって、またフォント サイズが異なるフォント ファミリーによって、大幅に異なります。明示的な行の高さを設定すると、それに対処できます。

ただし、その範囲内で、行の高さのスペース内のテキストの正確な配置は、何をしてもブラウザーごとにわずかに異なります。font-size と line-height の組み合わせによっては、すべてのブラウザーが一致します。たとえば、Arialは FF、Webkit、および IE で同じようにレンダリングfont-size:11pxされます。line-height:14pxただし、line-height を 13px または 15px に変更すると、ブラウザごとに 1px ずつ異なります。

そのための標準または定義された動作はありません。これは、特定のフォント ファミリ、フォント サイズ、および行の高さが、そのオペレーティング システムのブラウザーによってどのようにレンダリングされるかの結果です。たとえば、Arial は比較的一貫したフォントであり、明示的な行の高さが定義されている限り、一般に 1 ピクセル以上変化することはありませんが、Helvetica は 4 ～ 6 ピクセルほど変化します。

于 2012-06-15T21:52:49.010 に答える
10

私は実際に逆の経験をしました。Chrome/Safari と同様に IE7/互換モードでは、一部のヘッダー要素が上位に配置されていることに気付きました。そのため、多くのトラブルの後、クロムで検査し、 -webkit-margin-before: 1.6em またはヘッダーに追加された何かを見ました。その値を追加して微調整しても機能しませんでした。これは、一部の要素を押し下げたヘッダーの高さに影響を与えたためでしたが、パディング オプションはうまく機能しました...

これがうまくいくことがわかりました：

H1, H2, H3, H4, H5, a.mainTab div {
  -webkit-padding-before: 1px;
}

a.mainTab divには、パディング/マージンに応答しないスパンがあったため、それらをdivでラップしました...これは、liスパンスパンヘッダーでも機能する可能性があります。

于 2012-06-15T21:28:11.670 に答える