Home > Memo > Webサイト作成

Webサイト作成 Archive

クロスブラウザ:ワンファイルでIE向けとその他ブラウザ向けのCSSを記述する方法

IE5以降には、CSSの記述でアンダースコア(「_」)を無視するというバグがあるそうな。
そんで、最初にアンスコ無しのCSS、そのあとにアンスコありのCSSを記述する。と、IEでは後に書かれたほうのCSS(のアンスコを勝手に外して)を採用し、その他ブラウザではアンスコは読み込まないので、前文のCSSが適用される、という。
width=yyy
_width=xxx  ←IE以外では無効。IEだとアンスコを外しちゃうので、yyyよりも後に書かれたxxxの設定の方が上書き採用されてしまうのです。
前はIE用のCSSファイルを別に用意してたんですが、やっぱ別ファイルだとメンテが大変なんですよね。だからこのCSSハックはマジで大助かりしました。ありがとうございますー。

HP作成メモ mt.vicuna

●mod_eyeCatch-header.css
・幅の変更 800>700
div#header,
div#content,
div#footer {
width: 700px;
}
・画像の高さの変更
div#header
115>200
●html
>utilities
・「recent entries」を削除
・ArchivesのMonthlyのlasten 3を削除、全表示に。

HP作成メモ

>>CSS
>position
>width、height
>レイアウト
・ボックスサイズより大きい半角英字の長文について
FFだとボックスサイズは固定で、文字がはみ出す。
IEだとボックスサイズが指定した値よりも大きくなり、floatによるレイアウトだとレイアウトが崩れる。
・positionを使ったレイアウト – 縦方向にボックスを積み重ねる場合
positionでrelative、absoluteを指定しているとき、heightで単位数値を指定しないと、上下のボックスは重なってしまう。
・ナビゲーションデザイン – DIVのボックス(中身なし、もしくはテキスト)にaをつけてリンクはる場合
IEではリンクは有効にならない。FFではOK(ボックスのサイズ分のリンクが有効)。
・bodyにposition属性つけると、その中身の幅が固定される(mozziraにて確認、ieは適用されず)
→bodyにpositionつけてたら、その下のheaderのbg(横リピート)がコンテンツサイズで固定された。bodyのposition解いたらリピートが効くようになった。
・インライン要素(a)にpaddingつけても、折り返しにインデントは発生しない。折り返し含めてインデントつけたい場合は、ボックス要素を用意する。
・自由に字数が変化する文字列にbg-colorをつけたい場合は、pなどのボックスでは包含ブロックいっぱいにwidthが広がる。display:inlineでインライン化すると、その時々の文字の背景にのみ背景色が適用される。

ホーム > Memo > Webサイト作成

発売 / イベント カレンダー:12/09/17版
最近のお気に入り / オススメ
  • BOOK:12/08/15版
    • (AA)
  • アニメ:12/08/20版
  • 3D:12/08/15版

Return to page top