0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせFireFoxやIEでpaddingのパーセントが効かない！？
以前、ボックス要素を縦横比を保ちながらリサイズさせる方法について書きました。
[RefArticle no=”4309″]
この方法なんですが、ある条件でpaddingのパーセント指定がFireFoxやIEでうまくいかないことがわかりました。
少し調べてみたらバグに近い現象ということのようなのですが、
特定条件に置いて起こるようで、うまくいく場合もある。
その原因がわからないと、うまくいかないときに間違いなくハマります。
今回制作中にpaddingのパーセント指定が効かない状態が起こりました。
たまたま、うまくいくところとそうでないところが同じページ内に存在したので、
それらを比較してなんとか原因を突き止められた。
WEBで調べるとちらほら質問はあったものの、具体的な解決法は見つからず。
と言っても何時間も調べたわけじゃないので、単に調査不足かもしれませんが、
無事解決方法が見つかったのでご紹介。
これで困っている人がいれば、参考にしてください。
要素にwidth指定がないとpaddingのパーセントが効かないことがあるみたい
起こるっぽい？っていうのは厳密に調べたわけではないから。
どこかに仕様上の解説があったわけでもないので経験上の表現。
<body> <div class="aspect"></div> </body>
こういうものが裸の状態でbody直下とかに置いていればpaddingが効かなかったりします。
<body> <div><div class="aspect"></div></div> </body>
このようにdiv要素で囲まれていても、外側のdivにwidthが指定されていなければpaddingのパーセント指定は効かない。
paddingのパーセント指定を反映させるには
たいていはなんらかの要素に囲まれていて、外側の要素にwidthが指定されていることも多いので問題なく表示されます。
でも、場合によっては上で説明したような状況になることもあります。
クロスブラウザチェックしてFireFoxやIEでうまく表現されていなかったらこれを疑ってください。
具体的にはこのようにします。
paddingが聞かない要素をdiv等で囲ってwidthを指定するだけです。
.aspect_wrap{
width: 100%;
}
.aspect{
.aspect_wrap{
width: 100%;
}
.aspect{
width: 50%;
padding-top: 50%;
background-color: #0aa;
}
paddingを指定したい要素（今回の場合div.aspect）を囲むように何らかの要素（今回の場合はdiv.aspect_wrap）で囲って、
外側の要素にwidthを指定してやればいい（今回の場合width=100%）。
たったこれだけ、たったこれだけだからこそ分からなかったらハマる！
ヒントなかったら間違いなくハマると思う。
今までこのようなことが無かった人も、いつかのために念のため知っておいてください。
