14

私はこの単純なhtmlとcssを持っていますhttp://jsfiddle.net/JVfVv/1/

問題は、Mac の safari/chrome/firefox でテキストがトリミングされていることです。overflow: hidden を削除すると問題が修正されますが、この行は他の理由で必要です。行の高さを削除しています: 1; 問題を解決しているように見えますが、リセットされたスタイルシートからこれを取得しましたが、なぜトリミングが発生するのか理解できません。

なぜこれが起こっているのか、それを修正する方法を誰かが説明できますか? ありがとう

4

2 に答える 2

26

なぜこれが起こるのかという質問に答えるために、キーはCSS 2.1仕様のフォントセクションからのこの特定のフレーズだと思います（私の強調）：

フォント サイズは、タイポグラフィで使用される概念である em 正方形に対応しています。特定のグリフは、em 四角形の外側ににじむ場合があることに注意してください。

このline-height: 1宣言は、段落の高さを と同じ高さに設定しますfont-size(段落には 1 行しかないため)。一部の文字が切り取られているという事実は、それらのグリフが em 四角形の外側ににじみ出ていることを意味します (これが真実であることを明確に証明する方法はわかりません。証拠に基づいて推測しているだけです)。

line-height解決策としては、1.1 や 1.2 などのより大きな設定を使用するのが最も簡単な解決策です。

于 2012-04-17T01:27:58.300 に答える
0

height問題を解決する CSS で設定できますか?

p {
    line-height: 1;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
    height:32px; /* this appears to solve the problem */
}​

参照: http://jsfiddle.net/JVfVv/4/

于 2012-04-16T22:03:25.133 に答える