デザイン崩れ

2013年3月24日




今回HPを一寸変更した事により、あるブラウザ<※1>で予期していない場所にデザイン崩れを発生してしまった。しかし、通常は気が付かなければどうって言うことも無い程度の場合が多い。

Win7上の「Ie9」で作成(変更)したページが、他のブラウザからどう見えるか、可能な限りのブラウザで調べていた結果、Ie9、10やSafariでは、ほぼ同じように見え全く異常無いにもかかわらず、ChromeとFirefoxではデザイン崩れを起こしていた。

従来はIe以外のモダンブラウザ<※2>と呼ばれるものは、ほぼ同じ挙動をしていて、Ieとは動きが異なることが多いのに、今回は珍しくSafariでの異常はおこらなかった。

対策は、CSSのmarginプロパティの値を変えた(左右を減らすことにより、表示領域を拡大した)だけで効果がでました。

スペース

 関連資料


<※1> ブラウザとは

<※2> モダンブラウザとは


同一指定でのブラウザによる見え方の差
No.説   明
 1Ie10−Win8での見え方。
1
 2Ie9−Win7での見え方。HPを作成したPC。
2
 3Google−Chromeの見え方・・・文字が細くなり改行されている。
3
 4Mozilla−Firefoxの見え方・・・予期しない場所で改行されている。
4
 5Apple−Safariの見え方・・・文字が細い程度でIeや下の10と変わらない。
5
 6対策後のIe10−Win8での見え方。
6
 7対策後のIe9−Win8での見え方。
7
 8対策後のGoogle−Chromeの見え方。
8
 9対策後のMozilla−Firefoxの見え方。
9
10対策後のApple−Safariの見え方・・・対策前の5とほとんど変わらない。
10
スペース