0
私は1枚の紙にぴったりフィットした1ページのテキストを構築しています。何らかの不明な理由により、Edgeはすべてのものをより大きくレンダリングします。 私はボーダーボックス、ヌルマージン、およびパディングを使用しています。私はCSSをリセットしようとしましたが、結果は同じです。Edge vs. WebkitとFirefoxのCSSフォントレンダリング（ボックスモデルサイズ）が異なります
添付の例では、H1要素はChromeでは57.03x25px、Edgeでは64.7x25.35pxです。 H2はChromeでは57.031x16px、Edgeでは64.7x16.09pxです。 フォントサイズをそれぞれ25pxと16pxに設定しているので、Chromeが正しいと思われます。
これらのすべての小さなサブピクセルエラーは、テキストのページの後にかなりの違いが生じるまで、這い上がります。幅の増加はそれほど気にならないが、私はそれが関連していると仮定する。
リセットするオプションやマージンが見つからないため、Edge/IEに文書化されていない空白が何らかの形で追加されていると想定します。
編集：Firefoxでは、25pxのフォントの場合、27pxのテキストの高さが大きくなります。
https://jsfiddle.net/m74b0s09/
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
/*font: 12pt "Tahoma";*/
font: 10.66px "Tahoma"; /* IE/Edge does not render as Chrome with pt units, seems to ignore sub-pixel sizes */
z-index: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.section {
margin-top: 0;
z-index: 0;
}
.section h1 {
border-bottom: 1px solid;
margin-top: 8px;
margin-bottom: 3px;
}
h1 {
margin: 0;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
h2 {
margin: 0;
font-size: 10pt;
}
h3 {
margin: 0;
font-size: 9pt;
}
body {
font: 10.66px "Tahoma";
background-color: #fff;
}
a {
text-decoration: none;
}
.header {
margin-top: 0;
}
.header h1 {
border: none;
text-transform: none;
font-variant: small-caps;
font-size: 21px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.header .name {
display: inline-block;
}
.header .contact {
float: right;
text-align: right;
display: inline-block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-variant: small-caps;
}
</style>
<body>
<div class="section header">
<div class="name">
<h1>Lorem</h1>
<h2>Ipsum</h2>
</div>
<div class="contact">
<h3>
H3 text
</h3>
<h3>more H3</h3>
<h3>even more H3</h3>
</div>
</div>
</body>
私はfont-sizeに加えてline-heightを手動で指定することでこの問題を回避することができました。これにより、あらゆるものがほぼすべてのピクセルにわたってブラウザー間で完璧に保たれるようになりますが、面倒な作業がたくさんあります。 – brainwash
'それは面倒な作業が多い' ::同じ結果を得るために複数のプラットフォームと複数の異なる技術を扱うことを歓迎 – Martin