Web制作をする場合には、ブラウザチェックが欠かせません。
FirefoxとGoogle Chromeについては最新版をインストールして確認しておけば良いと思いますが、問題はInternetExplorerです。
現時点ではIE8を使っている人が多いですが、IE7やIE6などの過去のバージョンを使っているユーザも依然として多いので、無視する事が得来ません。
IE6で、マージンが２倍になってしまうバグ
IE6で、フロートした要素のマージンが２倍になってしまう
バグと解決方法の紹介です。
下記のコードで、IE6はマージンが20pxになります。
#navigation{
float: left;
width: 200px;
margin-left: 10px;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
}
マージンが２倍になってしまうバグは、「display:inline;」で解決します。
#navigation{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
下記IEチェックツールのリンクです。
ダウンロードしてお試しください(´・ω・`)
IETESTER(ブラウザチェックツール)
http://www.my-debugbar.com/wiki/IETester/HomePage
Expression Web SuperPreview(ブラウザチェックツール)
http://www.microsoft.com/downloads/ja-jp
IE6で、hasLayoutプロパティによって起こるバグ
IE6には、hasLayoutプロパティの仕様によりいくつかのバグが生じます。
※hasLayoutに関しては下記のエントリーを参照ください。
IEでのCSSのバグを回避するhasLayout
下記のコードで、IE6は背景色#CCCを表示しません。
sample:バグ
#container{
background-color: #CCC;
overflow: hidden;
}
#navigation{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
hasLayoutのバグは、「height:1%;」で解決します。
sample:解決方法
#container{
background-color: #CCC;
overflow: hidden;
}
* html #container{
height: 1%;
}
#navigation{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
display: inline;
}
IE6で、小さい高さを指定した場合に起こるバグ
IE6で、1pxや2pxなど小さい高さを指定した際、そのサイズより大きくなってしまうバグがあります。
下記のコードで、IE6は高さ2pxではありません。
sample:バグ
#corner{
width: 10px;
height: 2px;
background-color: #C00;
}
小さい高さを指定した場合に起こるバグは、「font-size:0;」で解決します。
sample:解決方法：その１
#corner{
width: 10px;
height: 2px;
background-color: #C00;
font-size: 0;
}
もしくは、「overflow: hidden;」で解決することもできます。
sample:解決方法：その２
#corner{
width: 10px;
height: 2px;
background-color: #C00;
overflow: hidden;
}
