/// BANGBOO BLOG ///

  • 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

September 29, 2010

F☆ck CSS

■IE縺?Firefoxで縺?paddingの違い////////////////////

hoge {
 width:100px;
 padding: 10px;
}

IEの場合→横藹??縺?100pxとして鐔??識しされる
Firefoxの場合→横藹??縺?120px(蟾?padding+藹??padding)として鐔??識される
対軆??縺?paddingを使繧?ずmarginを使う or padding分をwidth,heightから引縺?
divを2重にし外側縺?widthを指定し、内側縺?paddingを指定する



■floatによる浮き上がり////////////////////
<div id="container">
 <div class="leftBox">内螳?</div>
 <div class="rightBox">内螳?</div>
</div>

#container {
    color: #000000;
    background-color: #cccccc;
    border: 2px solid #333333;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
}

#container:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

.leftBox {
    width: 45%;
    float: left;
    border: 2px solid #000000;
}

.rightBox {
    width: 45%;
    float: right;
    border: 2px solid #000000;
}

floatはボックスを"浮かせる"ので、内側のボックスが全部浮かんでしまった場合、外側のボックスの饅??さはな縺?なり色も抜けてしまう。

:after縺?contentを指定すると、ボックスの中の臀??番最後に新たなテキストや画蜒?を挿入し外側のボックスが拡張されるようになる。clearfixの方觸??はた縺?さんあり他のやり方もチェック。



■Height100%のテーブ繝?////////////////////
Height:100%の可藹??長テーブルをあきらめた
 →IE縺?Firefoxで挙動が違うので臀??つ縺?cssで制御するのが面倒だったから
 →CSSを切り替えるできると思う

(理逕?)
高さ100%のテーブルは親要素も全縺?Height:100%にする必要がある
タイトル饅??な縺?html100%から高さを引きたいが上手く引けない
IEではブラウザサイズに対し縺?100%となるので、ナビコンテンツが長い場合はコンテナ背景色が消える
Firefoxではコンテンツ高さに対し縺?100%となるので、ナビコンテンツのコンテナ背景色が消える

twitter
Hatena
Google Buzz
newsing
Yahoo!
Buzzurl
Technorati
del.icio.us
Choix
Iza!
Livedoor Clip
Facebook
Evernote
 

Posted by funa : 01:07 AM | Web | Comment (0) | Trackback (0)