タグ

ブックマーク / mb.blog7.fc2.com (2)

  • CSSレイアウトの定石 WinIE6バグ回避法

    CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました(つまり回避法を用いない場合にどんなバグが発現するか)。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう (ブロックレベル要素を内包するボックスにはpaddingを指定しない。) 左右ボーダーとパディングを設

    kasedac
    kasedac 2006/03/21
    "font-sizeは%かpxで指定する。…widthと同時に左右borderや左右paddingを指定しない。…フロートのコンテナブロックにはwidthを指定する。…左フロートの左marginは0にする。右フロートの右marginは0にする。"etc
  • floatとpositionの使い分け

    てんぽ: floatとpositionの使い分け CSSHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSで段組をやるには普通floatかpositionを使いますが、どのように使い分けるのか。 これはいろいろと試行錯誤しているうちにわかってくるものなので、「そんなこと知ってる」という人も多いかと思いますが、まとめてみます。 条件としては以下のような感じ。 HTMLの記述順は「(ヘッダ→)記事→サイドバー(→フッタ)」を守る 記事領域とサイドバーの長さはページによって異なる(どちらが長くなるかわからない) サイドバーとフッタの文字が重なる、とかは駄目 floatとpositionの違いは、「floatは下方向に融通が利く」のに対し、「positionは上方向に融通が利く」といえます。 何のことかさっぱりわからないと思いますが、つまりこういうことです。 フロートはソース上で

    kasedac
    kasedac 2006/02/28
    "clearによってフロートより後に出現する要素との重なりを制御できる(=floatは下方向に融通が利く)、positionを使えばソース上で自身より先に出現する要素より上に配置できる(=positionは上方向に融通が利く)"
  • 1