新しい技術（CSS3など）は日々でてきますが、肝心のブラウザが対応していないので使いようがない・・・・。
現在のCSS2.1でのコーディングがメインなので煮詰まってきた感があるとおもいます。
しかし、そんなときだからこそ試してほしい事があります。
「ハックを使わないでコーディング」
これを是非ためしてほしいのです。
簡単なところだと、floatをかけた要素にmarginをかけると一部のバージョンのIEではmarginを倍にとってしまうバグがあります。
そんなときにハックをつかって回避していると思います。
そういう部分をpaddingを適用させハックを使わないようにするなど回避方法は色々とあると思います。
そういった部分でハックを極力減らしてコーディングをする事を意識してほしいと思っています。
そういう事を意識する事によってもっとコーディングの技術があがっていくと思います。
やばい、偉そうな事いいすぎた・・・。
すいません、自分はまだまだペーペーなので自分がそういう事を意識して煮詰まったCSSのコーディングを楽しんでいきたいと考えていました。
そんな火曜日の夜。
Popularity: 6% [?]
最近IE8をインストールしたんですが、ブラウザ確認をしていて気づいた事がありました。
結構重要です。
「<label></label>」がブロック要素？として認識されている。
なので、IE7以降やFireFoxなどのモダンブラウザでは意図したレイアウトになっているんですが、IE8ではブロック要素？になっているため次の要素が下に落ちちゃってます。
こんな感じに。
回避するには？
以下のソースコードをIE8用に用意する。
CSSソース
label {
display:inline-block;
}
これで回避できます。
ちゃんとした対応策ではないかもしれないのでもう少し調べてからわかり次第更新したいと思ってます。
これで一応バグ表示は回避できますね。
IE8だけにこのスタイルシートを当ててあげないといけないので条件分岐コメントを使って適用させます。
「<head></head>」内に記述します。
<!--[if IE 8.0]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
< ![endif]-->
ファイル名は任意でけっこうです。
気をつけなければならないのが、メインとなるCSSの下に記述しないといけないので注意してください。
とりあえず、これで回避は出来ますがコレで正しいのかどうかわからないので難しいところです・・・。
いきなり表示に食い違いが出るとは思っていなかったので先が思いやられます。
今後はIE6、IE7、IE8を確認しないといけないんですね。
仕事が増えた！
Popularity: 13% [?]
Published : 13:58 | Category : (x)HTML , CSS , IE
これです。
リンクをクリックした時にでる枠線。
これを消すのはCSSでできます。
CSSソース
a {
outline:none;
}
これだけです。
これでクリックした時に枠線はでません。
ちなみに、「text-indent:-9999em;」を使って画像置換を使用している場合枠線が左にながーく出てしまいますが、コレを使用すればそれも消す事ができます。
あれはあまりキレイではないので「text-indent:-9999em;」で画像置換を使っている方にはお勧めですね。
枠線うざい！！って思っている方は「outline:none;」を使ってみてください！
Popularity: 14% [?]
Published : 18:38 | Category : CSS
Recent Comment