Work Note -8ページ目

フロート+左右マージン=指定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プロパティの指定をすれば、余白はできません。




・関連:フロート解除clearは上マージンを増加させる

テキスト右揃え

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

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