WebページのレイアウトはIE6との互換性の問題を考慮する必要がある
以下のグラフは、当サイトの訪問者詳細におけるブラウザの閲覧率ですが、IE6が40％以上を占めています。ブラウザの種類は、IE5.5、IE6、IE7、IE8と多くのバージョンがありますが、IE6はこの多くの高いバージョンでまだほとんどのユーザーに好まれているので、レイアウトはIE6の互換性を考慮しない、またはあなたが多くの訪問者を失うことになるはずです。
IE6で気をつけなければならない10の問題点を紹介します。
1. DOCTYPEの使用
HTMLページの先頭にDOCTYPEタイプを追加する必要があり、もちろんstrictバージョンが推奨されます、例えば
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
あるいは、XHTMLページの「!DOCTYPE」。
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Strict//EN"。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE6が癖のあるモードになるのは一番避けたいことです。実はもう十分癖があるんです。
2. set position: relative
position:relativeを設定することで、特にアライメントを設定する必要がある場合、複数の問題を解決することができます。明らかに、あなたが理解する必要があることの一つは、絶対位置決めが相対的であるということです。たぶん、設定していないために、物がどこに飛んでいくのかわからないからです。たとえば、各投稿の前に画像があるようにデザインしたのに、結局、画像が1つしかないことに気づいたとします。おそらく、画像が重なっているからでしょう。
3. フローティング要素にdisplay:inlineの値を設定する
これはIE6の有名なダブルマージンバグから来ています。例えば、DIVをフロートするようにデザインして、margin-left:5px;と設定すると、IE6ではmargin-left:10pxになりそうです。ここでは、フローティング要素に display:inline; を設定して問題を解決してください。
4. 要素に hasLayout を設定する。
IE6（またはIE7）の多くの問題は、hasLayoutの値を設定することで解決できます。(hasLayoutが何かわからない場合は、こちらを参照してください)
要素に hasLayout 値を設定する最も簡単な方法は、CSS の height または width を追加することです（もちろん、zoom も機能しますが、CSS の一部ではありません）。具体的な値を設定することが推奨されますが、高さがどのくらいかわからない場合もあり、ここでは height:1% とすることがあります。親要素に height が設定されていない場合、要素の物理的な高さは変わりませんが、既に hasLayout 属性を持っています。
5. キャラクターの再起不能問題の解決
複雑なレイアウトの場合、一部のフローティング要素内のテキストが、きれいなフロート位置より下に表示されることがあります。これは奇妙な問題ですが、以下の方法で解決できます。
-floating要素にdisplay:inlineが設定されていることを確認します。
-floating要素にmargin-right:-3pxを使用します。
--フローティング要素の最後の要素の後にIEのコメントを追加する、例えば： <! --[if !IE]> put your comment here... <! [endif]-->。
--最後の要素にDIVを追加する（これは幅を90%かそれに近い高さに設定する）。
UPDATE: 最も簡単な方法は、すべてのコメントを削除することです。(情報ありがとうございます。自分では遭遇しなかったのですが、ちょっとググってみたところ、この方法も有効であることがわかり、おすすめです)
これについては、positioniseverything.netで詳しく説明されていますよ。
6. 6. hover は <a> タグでのみ使用、IE6 では <a> タグのみで hover スタイルを表示する。
もちろん、JSで回避することは可能です。しかし、これはアクセシビリティの話です。JSを使用してホバーに重要なコンテンツを設定しないことをお勧めします。
7. Internet ExplorerとAdvancedを区別するために、!importantまたはadvancedセレクタを使用します。
例えば、min-heightはIEとの互換性を実現するためにCSSを使用する必要性を回避します。
#要素
min-height: 20em;
height: auto !インポート。
height: 20em; /* IE6でこの高さを表示するようにする */。
}
IE6 は min-height を正しく認識しないので、高さを固定にして、IE6 に 20em と解析させることができます。それでも、コンテンツのサイズが拡大すると、高さが変更されます。代替案としては、アドバンスドセレクタを使用することです。
#要素
min-height: 20em;
height: 20em;
}
/* IE6を無視する */
#element[id] {
height: auto;
}
8. スケーリングされた寸法を避ける
プロポーショナルは、親要素に正確な高さを加えないとIE6がおかしくなることがあります。そうでない場合は、他の要素に .important を追加してください、例えば
ボディ
margin: 2% 0 !インポートします。
margin: 20px 0; /* IE6で読み取り可能 */
}
9. 早めのテストと頻繁なテスト
学位が完成していない限り、早めのテストと頻繁なテストを忘れないでください。そうでないと、IE6の問題の修正に多くの時間を費やすことになるかもしれません。一般的に、もしあなたのサイトがIE6とfirefoxでうまく動作するなら、おそらく他のブラウザでは大した問題ではないでしょう。
10. コードのリファクタリング
多くの場合、問題の解決はコードのリファクタリングよりも時間がかかることがあります。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン