IE6 スタイルシート: 25のIE6の修正 / IE6のバグ

ie6_w

正しいDOCTYPE

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

CSSのリセット

シンプルなリセット

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

人気のCSSリセット

* YUI CSS Reset
* Eric Meyer’s Reset Reloaded

Javascriptフレームワーク

JavaScriptがあなたのウェブサイトの重要でない部分を越えるものを表わす場合は、JavaScriptフレームワークを使用することを考えてください。
ほとんどのフレームワークはIE6を含む多数のブラウザの中でテストされており、あなたのJavaScriptクロス・ブラウザー問題の多く(すべてではありませんが)を自動的に扱うでしょう。
選ぶ多くの異なるJavaScriptフレームワークがあります。
一般に、一つの中でできるものは別のものの中ですべてを行うことができます。なので、個人が使用するのに良いフレームワークを選んでください。
* MooTools
* jQuery
* ProtoType with Scriptaculous
* Dojo
* Ext JS

Internet Explorerの条件付きコメントを使用する

＜！このメッセージはすべてのブラウザで表示されます。！＞
<!--[if lte IE 6]>
  <p>このメッセージは、Internet Explorer6以下です。</p>
  <![endif]-->


 <!--[if gte IE 6]>
  <p>このメッセージは、Internet Explorer6のみです。</p>

  <![endif]-->


 <!--[if gt IE 6]>
  <p>このメッセージは、Internet Explorer6以上です。</p>
  <![endif]-->


 <!--[if IE 5.5]>

  <p>このメッセージは、Internet Explorer5.5のみです。</p>
  <![endif]-->


 <!--IE6以下のスタイルシートの適用-->

  <!--[if lte IE 6]>
  <link type="text/css" rel="stylesheet" href="css/ie6.css" />

  <![endif]-->
＜！このメッセージはすべてのブラウザで表示されます。！＞

IE6だけのCSSセレクタハック

条件付きのstylesheetsを使用したくなければ、CSSセレクタはIE6をターゲットとする別のオプションです。
IE6は子供セレクターを支援しません。
最初にIE6のためにCSS declartionを作り、次に、IE7+および他のすべての現代のブラウザーにCSS宣言を与えるために子供セレクターを使用します。
html
<div>
<p class="header">Some Header Text Here</p>
</div>
CSS
/*IE6用*/
  .content {color:red;}
/*他のブラウザ*/
  div>p .content {color:blue;}

IE6をJavascriptで判別する。

JavaScriptを使用して、あなたがIE6を判別したいが、条件付きのコメントを使用したくない場合
//Pure JavaScript, no framework - NOTE: this must be placed in an onLoad event or after the body has loaded or it will result in an error
  if(typeof document.body.style.maxHeight === "undefined") {
  alert('IE6 Detected');
  }
 //MooTools syntax (for IE7, use trident5)
  if (Browser.Engine.trident4) {
  alert('IE6 Detected');
  }
 //jQuery syntax - Note that the browser method is now deprecated in favor of feature detection through the support method
  if (($.browser.msie) && ($.browser.version == "6.0")){
  alert('IE6 Detected');
  }

より詳細なサイト

# Quirksmode’s Browser Object
# MooTools’ Browser Object
# jQuery’s support utility

画像

IE6での透明PNG。

問題：IE6では階層型レイアウトの効果などができる透明PNGをサポートしていません。それらはIE6 PNG Fixなどを利用して使えるようになります。
簡単な解決方法は、アルファ透過性を持つPNG8でPNG画像を保存すると言うことです。
JavaScript PNG Fixes
# MooTools’ FixPNG
# jQuery PNG fix
# IE PNG Fix by Twin Helix
# TweakPNG
# DD_belatedPNG

Hover時の背景のちらつきの解消

リンクなどの背景に画像を使うとホーバーしたときにちらつきが起きます。理由はIE6が適切に背景イメージを記憶せずに、再びロードするからです。
下のJavascriptで強制的にキャッシュしてして解決します。
document.execCommand("BackgroundImageCache",false,true);

レイアウト

min-height

IE6のは 、min-heightプロパティの、最小の高さが無視されます。
/*Works in all browsers*/
 #container {min-height:200px; height:auto !important; height:200px;}
/*For IE6*/
 #container {min-height:200px; height:200px;}

 /*For all other browsers*/
 html>body #container { height:auto;}

min-height

残念ながらJavascriptでしか対応できません。
 //あなたが指定したいIDに変更して下さい
 var container = document.getElementById('container');
 container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

 //An alternative function. Note: for dynamic resizing, attach to the window resize event
 function setMaxHeight(elementId, height){
 var container = document.getElementById(elementId);
 container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
 }

 //Example usage
 setMaxHeight('container1', 200);
 setMaxHeight('container2', 500);

100% Height

IE6で100％の高さを実現するためには、その親要素の固定の高さを指定する必要があります。 ページの完全な長さのように”高さの適用：100％”どちらもhtmlとbody要素です。
 /*100% height of the parent element for IE6*/
 #parent {height:500px;}
 #child {height:100%;}

 /*100% of the page length for IE6*/
 html, body {height:100%;}
 #fullLength {height:100%;}

max-width

 //あなたが指定したいIDに変更して下さい
 var container = document.getElementById('container');
 container.style.width = (container.clientWidth < width) ? "500px" : "auto";

 //An alternative function. Note: for dynamic resizing, attach to the window resize event
 function setMinWidth(elementId, width){
 var container = document.getElementById(elementId);
 container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
 }

 //Example usage
 setMinWidth('container1', 200);
 setMinWidth('container2', 500);

max-height

 //あなたが指定したいIDに変更して下さい
 var container = document.getElementById(elementId);
 container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

 //An alternative function. Note: for dynamic resizing, attach to the window resize event
 function setMaxWidth(elementId, width){
 var container = document.getElementById(elementId);
 container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
 }

 //Example usage
 setMaxWidth('container1', 200);
 setMaxWidth('container2', 500);

2倍のマージン

Internet Explorer 6は誤ってマージンを、同じ側に適用されたフロート要素の余白のように要素を2倍にする。
インライン　フロート要素には修正する 
 /*Causes a double margin bug in IE6*/
 .floatedEl {float:left; margin-left:100px;}

 /*The fix*/
 .floatedEl {float:left; margin-left:100px; display:inline;}

クリアーフロート

含めようとしているコンテナが正しく含められなくなり、大きさ以上の高さと幅になってしまいます。
そこでオーバーフローを"auto"にすると、表示またはスクロールされます。
html
<div id="container">
<div id="floated1"></div>
<div id="floated2"></div>
</div>
css
 #container {border:1px solid #333; overflow:auto; height:100%;}
 #floated1 {float:left; height:300px; width:200px; background:#00F;}
 #floated2 {float:right; height:400px; width:200px; background:#F0F;}

フロートドロップス

floatのバグで内容コンテナがメインコンテナのサイズを超えると、内容コンテナのサイズが無視されてすべて同じ大きさになってしまいます。
他のIEやFxなどはそのサイズのままFloatが崩れます。
解決方法としては、overflow:hidden; か overflow:scroll;にするのがありますがレイアウトを台無しにすることがありますので、修正されたJSを期待します。

他

IE6でのFavicon

１．ルートディレクトリに favicon.icoを保存する Internet Explorerや他のブラウザは自動的に画像を見てくださいと表示されます。
２．HTMLドキュメントの<head>で、次のコードを配置することです。
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />

その他のサイト

# The Definitive Guide to Taming the IE6 Beast
# IE6 Peekaboo Bug
# hasLayout.net
# CSS For IE6: 6 Common Problems And Fast Ways To Fix Them
# Explorer Exposed!
# The Death of IE6
# 10 Fixes for IE6 Problems
# http://pmob.co.uk/
# IE6 Bug Reports
# MSIE6 Bugs
# Internet Explorer & CSS issues
# IE CSS Bugs That'll Get You Every Time

これはUltimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs - http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
よりの抜粋したものの翻訳等です。

SEO [PR] 花 おまとめローン Windows7 冷え性対策 動画 掲示板 レンタルサーバー ライブチャット SEO