一部のボタンまたは入力をブラウザ間で同じように表示できません。通常、テキストの垂直方向の配置が問題になります。私は複数のブラウザを試しましたが、Firefox(16)はOSXでは行の高さを単に無視し、Windowsではまだ異なって見えます。
通常は1pxの違いがあり、場合によってはそれ以上の違いがあります。これは、iPadや別のモバイルデバイスに切り替えるときに特に問題になります。どういうわけか、常に異なって見えます。これが私のCSSです...
margin : 0px;
padding : 0px;
font-size : 15px;
//height : 15px; // Tried this too with unsatisfying results
line-height : 1;
vertical-align : top;
高さプロパティを使用せずにスクリーンショットを撮りました
編集:
それで私はより多くの情報を探し回って、同様の問題を持ついくつかの質問を見つけました。
しかし、誰もそれを解決しませんでした...-
> FirefoxとChromeの1ピクセルの線の高さの違い
-> firefoxとwebkitの線の高さは2px低くなります
edit2:
さらに、jsfiddleを作成しても問題が発生します。これは、作業しているサイトと同じコンテキストではないため、少し異なりますが、行の高さ/テキストの問題です。
ここを参照してください:http: //jsfiddle.net/XQ7VD/3/
これはOSX上のChrome(左)とFirefox(右)です
edit3:
これは、行の高さが18pxに設定されたスクリーンショットです(このjfiddleから:http://jsfiddle.net/BJ8eR)
jsfiddleボタンとホバーボックスに同じ問題があるのを見たばかりです。xDわかり
ました。スクリーン撮影はこれで完了です...
-
誰かがトリックを知っているなら、連絡してください。どうも!