スポンサーサイト

一定期間更新がないため広告を表示しています

スポンサードリンク | - | | - | - | - | - |

CSSメモ−IE6対策その2+IE7対策

 3月11日の東北地方太平洋沖地震にて被災された方、関係の方々に、心よりお見舞い申し上げます。

 大変微力ではありますが、個人的には可能な限り、義援金と血液の提供、援助できる人に対する情報提供、各種イベントへの参加を行います。
 何の取り柄も力もない私には、本当に個人レベルのちっぽけなことしかできませんが、できることを見つけて積極的に取り組んでいきたいと思います。

 皆様に、一日も早く笑顔が戻りますように。


*****************************************************************************************************


 HTMLやCSSは、プログラムに比べて個性は出にくいかと思いますが、やはり人によって色々な組み方が存在します。CSSレイアウトの場合、誰かが書いたソースをいじるのは意外と大変です。
 今、久々に他人のソースをいじっているのですが、もう半泣き状態です。
 HTMLテンプレートの状態ではちゃんと対策されているので問題ないのですが、CFを適用させるとそれはもうひどいことに。
 さらに、エミュレーターによって見え方が違うという……もはや何を信じて良いのかわかりません。

 とりあえず、IE6対策メモその2とIE7対策です(その1はこちら)。かなり個人的なメモですが、CFメモ同様、少しでもお役に立てることができれば幸いです。


【追記】
 ColdFusionのコードを埋め込んだ状態で発生する崩れの対処方法ですので、HTMLのみのページにおいて同じ現象が発生するとは限りません。
 また、下記の方法で対処できるとも限りませんのでご注意ください。


-----------------------------------------------------------------------------------------------------


■共通

まず対象となる要素と関連すると思われる要素に、片っ端から1pxのボーダーをつける。余白の問題が多いため、こうするとわかりやすい。
 もちろん後で消去。


-----------------------------------------------------------------------------------------------------


■IE6


floatした要素がずれて下に落ちる

・勝手に余白、もしくは幅が大きめに取られている可能性があるので、padding・marginを指定していない場合は0にしたり、ハックでwidthを縮めたりする。

・floatを逆(leftであればrightに)変更し、子要素のmarginを消して親要素にpaddingをつけてみる。もしくは逆。

・ネストされている子要素のmargin・paddingが影響していることもあるので確認。


要素を元の位置に戻したは良いものの、今度はそれぞれの要素が上に浮く

・margin-topを加えて無理矢理対処。
 floatを使用する場合は特に、確認・調整がしやすいのでwidth及びheightは指定しておいた方が良い。


-----------------------------------------------------------------------------------------------------


■IE7


clearfix問題
 と言うと、なんだか時事問題のようですが。

・親要素のclearfixが原因で、レイアウトの崩れが起こる場合がある。幅や余白に問題が見られない場合、これを疑うと良いかもしれない。
 対策としては、clearを個別に指定する=通常のclear指定にする……くらいしか方法がなかった。

 親要素のclearfixを削除し、親要素終了タグの直下に下記のタグを挿入。

<div class="clearfix"><hr /></div>

 この時、divの中身が空白なのは良くないので、適当に何かを挟んでおく。
 私の場合は、(画像やborderで代用するため)使用することのないhrタグを挟む。

hr {
    display: none;
}

 また、clearfixのCSSは下記のようにハックをかけて指定するか、別のclassとして割り当てる。
 個人的には、特に他人のソースだと紛らわしいので、後者の方が良いと思う。

*+html .clearfix {
    clear: both;
}
くみっち | Webデザイン | 17:27 | comments(0) | trackbacks(0) | - | - |
2/39PAGES | << >> |

10
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--