1

irHTML5 ボイラープレート css を使用しており、クラスをフッター メニューに適用したいと考えています。メニューはリスト形式で、インラインブロックを使用してこのリストを横方向に表示します。

これがコードのフィドルです。画像の置換が機能していることがわかりますが、(画像のない) 後のテキスト メニュー要素は下に移動しています。これは.ir:before、ブロック要素をシミュレートする css ルールが原因で、ある程度のスペースが必要です。

この副作用なしで HTML5 ボイラープレート手法を使用する方法はありますか? text-indent:-9999pxそうでない場合は、テクニックに戻ります。

おまけの質問: テキストインデントと比較して、HTML5 ボイラープレート手法の利点は何ですか?

4

1 に答える 1

2

このtext-indent: -9999px方法にはいくつかの欠点があります。主なものは次のとおりです。

  • IE6 および IE7 では、インライン ブロック要素では機能しません。
  • 第1世代 iPad では、この手法を使用するとパフォーマンスの問題が発生することが証明されており、ページのレンダリングがかなり遅くなります。
  • 表示されなくても、どのデバイスのブラウザでも、画面からはみ出す巨大な div (9999 ピクセル以上) を描画する必要があります。これは、ページの読み込み時間が長くなり、より多くのメモリ リソースが必要になるため、パフォーマンスに悪影響を及ぼします。

HTML5 Boilerplateの.ir手法は、パフォーマンスと信頼性がはるかに高いことが証明されています。あなたは正しいことをしています。

そうは言っても、コードで何を達成しようとしているのか、100% 確信があるわけではありません。このフィドルでhtmlを少し再構築しました。

ご覧のとおり、要素が正確にどこにあり、どのくらいのスペースを占めるかを理解するために、赤い枠を付けました。<li>すべての画像/テキストは、次のように意味的にロジック (1 つのリンク/1 つのリスト項目) である独自のものになりました。

 <ul>
     <li>facebook<li>
     <li>twitter</li>
     <li>example page</li>
 <ul>

float:leftコンテナ自体ではなく、その中の要素をフロートさせる必要があるため、ナビゲーションからも削除しました。これで問題が少し解決し、目的の場所にたどり着くのに役立つことを願っています. 改善が必要な場合、またはあなたが達成しようとしていることを誤解している場合は、この回答を編集する準備ができています。

于 2013-03-11T11:09:56.953 に答える