スイルシートでデザインしていると、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 件のコメント:
コメントを投稿