CSSハック一覧表
2007/07/30 Mon [Edit]
CSS のハックが少しずつ貯まって来たので一覧表を作ってみました。
CSS ハックとは何か簡単に説明すると、それぞれの WEB ブラウザのバグなどを利用し、特定の WEB ブラウザに特定のプロパティ(設定)を適用させたり、逆に適用させないようにし、CSS 内に併記した複数のスタイルのプロパティ(設定)を、それぞれの WEB ブラウザに振り分ける技術のことです。
これからは私が使用した CSS ハックや詳細などはこのエントリで随時まとめていこうと思います。
〔追記:2007年12月4日〕
〔追記:2008年1月12日〕
〔追記:2009年7月23日〕
SafariとOperaのCSSハック
2007/05/16 Wed [Edit]
覚え書きです。
仕事でボックスに overflow-y 属性を指定してある Web サイトの HTML を修正中に見つけた CSS ハックです。
今回、Mac の純正ブラウザ Safari と Windows の Opera で overflow-y では overflow-y 属性を指定出来きず意図したデザインに出来なかったので、overflow にて別途指定しました。
どうやら overflow-y は IE 独自の属性のようです。 ちなみに Firefox は Mac も Windows も問題なく指定した通り表示されました。
ちなみに意図したデザインとはインラインフレーム(iframe)の変わりに div 要素で同じ見た目にする。でした。
div#hajime {
width : 200px;
height : 200px;
overflow-y : scroll; /* IE独自の属性 */
}
html:first-child div#hajime { /* SafariとOpera用 */
width : 200px;
height : 200px;
overflow : scroll;
}
■結論
Firefox はえらい!ルーールルルルルル♪
■追記(07/05/19)
Netscape(ネットスケープ)を完全に忘れてしまっていました・・・
結局 IE 独自の属性 overflow-y は使わない事に。
■さらに追記(07/05/21)
overflow : auto;
で、全てが丸く収まりました。
CSSハック一覧表作りました。





