0

各プラットフォームが異なるサイズでテキストをレンダリングする場合、異なるプラットフォームで正確なサイズを取得するにはどうすればよいですか? この問題は、 Firefox 4の最近のリリースで悪化しました。このバージョンでは、 DirectWriteを使用したテキストのハードウェア レンダリングが有効になります。DirectWrite で書かれたテキストのサイズは、ハードウェア アクセラレーションなしで書かれたテキストよりもはるかに大きくなります。次の例に注意してください。CSS を表示する必要がある場合は、ライブの例を次に示します。

直接書き込みオフ

  • Windows 7 64 ビット ホーム
  • ATI Radeon HD 4670
  • ドライバーが更新されていないため、DirectWrite がオフになっています。
  • 620×283

直接書き込み

  • Windows Vista 64 ビット ビジネス
  • nVidia GeForce 8800GT
  • ドライバーを更新したばかりなので、DirectWrite はオンになっています。
  • 620×293

HTML

<ul>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
</ul>
<div>
 Content
</div>

CSS

ul {
 float: left;
 width: 10em;
}

div {
 margin: 0 0 0 12.7em;
 min-height: 26.1em;
}

DirectWrite がオフのときはナビゲーションがコンテンツとどのように並んでいるかわかりますが、DirectWrite がオンのときはナビゲーションがコンテンツよりも高くなっていますか? 私はいくつかのハッキーな解決策があることを知っています。1 つは、すべて ( font-size, width, height) を px で指定することです。コンポーネントはモジュール化されないため、これは理想的ではありません。つまり、別のサイズにスケーリングされた別の設定で再利用することはできません。また、IE6 のフォント サイズ オプションも壊れます。もう 1 つの解決策は、JavaScript を使用してナビゲーションの物理的な高さを読み取り、コンテンツを同じ高さにすることです。スタイルを設定するのは CSS の役割であるため、これは理想的ではありません。これに対するCSSソリューションはありますか?

これは多くの例の 1 つにすぎません。もう 1 つの問題は、Ubuntu 9 の Firefox 3 のテキストがはるかに広いため、すべてのリンクがメインのナビゲーションに収まらないことです。で最後のナビゲーションリンクを切り落とすことを余儀なくされましたmax-width: 37em; overflow: hidden。

4

2 に答える 2

1

私の正直な答えは、さまざまなフォント サイズに対処する必要があるということです。あなたの最善の策は、min-height: 26.1em「ハッキー」であるため、コンテンツの高さを揃えないことです。UL が DIV 内にあり、最終行が常に一致するように、HTML を再構築することをお勧めします。

ul li { line-height: 1em }それに加えて、LI を常に同じ高さにするように設定することもできます。

于 2011-03-23T19:26:42.027 に答える
0

私はそれについて心配しません。それらは本質的に異なるエンティティであり、「詳細オプション」を押すと展開すると言ったように、コンテンツはとにかく固定されていません。固定された境界ではないことを知らせているかのように、少しオーバーしても問題ないように見えると思います。
これがアイデアです。固定したい場合は、そのすべてをコンテナー DIV 内にラップし、それを使用して境界線を定義できます。次に、コンテンツがコンテナー DIV の外に展開するときに、オーバーフロー スクロールを使用します。縦ならそんなに苦にならない

于 2011-03-23T21:36:26.217 に答える