IEでCSSのfloatが効かず改行されてしまう問題を解消する方法
CSSで、float:leftだとかfloat:rightとかで指定することで
左右に並べて表示させることが出来るが
これが時々左右に並べて表示出来ず
改行されてしまうことがある。
これの原因としてはwidthの指定値よりも
合計が多くなってしまった場合などで
カラム落ちが起こってしまったりする。
しかしこれら問題はなく
Google chromeでも問題なく表示されていても
IEでカラム落ちが起こってしまうことがある
個人的にはIEは不具合も多く
最悪なブラウザだと思っているので
自分では使うこともないのだが
お客様は使っている方も多く
それに合わせる必要があったりするため
対処しなきゃならない時もある。
ちなみにTwitterの埋め込みコードも
IEでは表示されない仕様になってます。
ということで
もしカラム落ちが起こった場合は
まず合計幅がWidthを越えていないか確認して
それら基本的問題がない場合は、
「display: inline;」を追加することで改善します。
.test{
float:left;
display: inline;
}.test2{
float:right;
display: inline;
}こんな感じです。
お試しください。
＜スポンサーリンク＞