フロート+左右マージン=指定2倍のマージンに
■IE6バグ
floatプロパティと同じ方向にmarginプロパティを指定すると、
指定の値の2倍のマージンが表示される。
●回避
----------------------------------
box {
float: left;
margin-left: 10px;
display: inline; /*IE6対策*/
}
----------------------------------
指定しているcssに「display: inline;」追加してあげる。
場合によっては、marginプロパティを使わずに、
paddingプロパティの指定で回避できる。
フロート解除clearの指定で不要な余白ができる
●IE6・7バグ
フロート解除のために、
clearプロパティを指定した要素の
上余白(padding-top)に余分な余白ができる。
バックグラウンドとかボーダーを使っていると、すごく目立って気になる。。。
●回避
clearプロパティを指定した要素に、widthプロパティの値を指定する。
※値autoはダメ。
widthプロパティの指定をすれば、余白はできません。
テキスト右揃え
align="right"
以外で右揃えをCSSで指定する場合
-----------------------------------------
p.right {
unicode-bidi: embed; /* Unicodeによる文字表記を一部変更 */
direction: rtl; /* ←↑これで右揃えに*/
}
-----------------------------------------
テキストを<p>タグで囲み上記2行の指定で
右揃えになります。
unicode-bidi:bidi-override; と指定すると、Unicodeがムシされて
日本語が右から左方向に表示される。
アラビア語など日本語と逆方向の表示のときに使えるテクニック。
※DreamWeaverのデザインビューでは左揃えのままだが、
ブラウザーで見ると右揃えになっています。
検証済み環境
------------------------------------
■OS:WindowsXP
ブラウザ
・ Internet Explorer 6.0.2900
・ Mozilla Firefox 2.0.0.18
・ Safari 3.1.1
・ Opera 9.50
・ Google Chrome 0.4.154.25
・ Sleipnir 2.8.3
------------------------------------
■OS:Mac 10.4.1.1
ブラウザ
・ Safari 3.2.1
・ Mozilla Firefox 3.0.4
------------------------------------