2

個人のブログ用に罫線入り用紙の効果を作成しようとしていますが、紙の実際の線の1つに各線をレンダリングする際に問題が発生しました。すべてが適切に開始されますが、行がページを下るにつれて丸め誤差が累積するように見えました。行の高さを24pxに設定し、24pxの要素にパディングを追加しました。基本的には、すべての行が正しくレンダリングされるように、高さを追加するものが24の倍数であることを確認しようとしました。しかし、クロムは線の高さのプロパティを正確に尊重していないことがわかりました。以下のスクリーンショットを誰かが説明できますか?

これが基本的に私が目指している効果です。ご覧のとおり、かなり近いです。 望ましい効果のイラスト

しかし、heightプロパティを見ると、実際には72(24 * 3)であるはずの70.909...です。基本的に私の質問は、<p>[6char]の高さが行の高さの倍数ではないのはなぜですか?

高さは行の高さの倍数ではありません

<p>テキスト内の要素のCSS計算スタイルは次のとおりです。

font-size:16.363px;
height:70.909088;
line-height: 24px;
padding-top: 24px;
margin:0px;
padding-bottom:0px;
4

1 に答える 1

1

これは、ブラウザがデフォルトのテキストサイズを上書きしているためです。これは、ズームレベルまたはオンにした可能性のあるユーザー補助オプションが原因である可能性があります。

私はこれを作成しました(jsFiddleで表示できます):

<html>
<head>
<style type="text/css">
p {
    line-height: 24px;
}
</style>
</head>
<body>
<p>
three<br>
lines<br>
of text<br>
</p>
</body>
</html>

そして、Chromeで計算されたスタイルは次のとおりです。

display: block;
height: 72px;
line-height: 24px;
width: 1584px;

ページを押しcrtl+-てリロードすると、次の計算スタイルが生成されます。

display: block;
height: 70px;
line-height: 23.981483459472656px;
width: 1761.8148193359375px;

ズームレベルにとらわれない罫線入り用紙のテーマを作成する唯一の方法は、Javascriptとキャンバスを使用して自分で紙をレンダリングする(または単に線の高さに基づいて画像データを生成する)か、ズームレベルを自分で調整することです。詳細はこちら:

最新のすべてのブラウザでページズームレベルを検出するにはどうすればよいですか?

于 2012-12-12T02:43:12.557 に答える