ブログ内検索

2012年2月17日金曜日

スタイルシートで作ったホームページがガタガタ!

スイルシートでデザインしていると、IEでレイアウトがおかしく崩れた。

 クロムやFIREFOXで見ると正常に見えるのに。なんでだろう! 

 そんなときは、とりあえずスタイルシート中で、paddingプロパティを使っている箇所をチェックすると、うまく回避できることがあります・・・・いう記事を見つけた。



 完全にスタイルシートだけでデザインしてるページではなく、元々ある程度HTMLでレイアウトが作られてしまってるようなページに、細かなデザインをスタイルシートで加える必要があるときに、よく問題になる気がするのですが。
もし、IEでだけなぜかレイアウト(や、文字の配置)が崩れちゃうよ…というときには、paddingプロパティを使って余白を調節してる箇所がないか探して、そこを削除してみると、回避できたりします。(もちろん全部がそうというわけではありませんが。)

 スタイルシートで余白量を調節するには、marginプロパティとpaddingプロパティの2つを使います。borderプロパティを使って引ける枠線を基準にして、その外側の余白はmargin(マージン)、内側の余白はpadding(パディング)です。

IEは、横幅や高さの解釈がちょっと正しくありません。スタイルシートで、heightプロパティやwidthプロパティを使って、オブジェクトの高さや横幅を指定する場合、その高さや横幅には、余白分は含みません。

 例えば、あるオブジェクトのwidthプロパティに値「300px」を指定し、そのpaddingプロパティに値「30px」を指定した場合、横幅300ピクセル+余白30ピクセルで、合計330ピクセルのスペースが確保されるのが正しい解釈です。widthプロパティが指定するのは、あくまでも「中身」の大きさですから。

 がー、IEは、「枠線から内側の大きさ」だと解釈するので、widthプロパティに値「300px」を指定したら、paddingプロパティの値がいくらであっても、全体の横幅は300ピクセルです。もし、paddingに値「30px」を指定したら、実際の中身の幅は、300-30=270で、270ピクセルになっちゃいます。



 うーん・・・本当だろうか。試してみる必要はあるな??

0 件のコメント: