CSSハックで、クロスブラウザ対応のCSSを記述する：CodeZine
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介しています。 連載第1回目となる前回は、CSSを使ったクロスブラウザなデザインを実現するための第一歩として、「表示モード」について解説しました。今回からは、表示モードを統一してもカバーできないブラウザの実装差異を補う方法として、CSSハックを中心に紹介していきます。対象読者XHTMLとCSSの基本を理解していている方。Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。 必要な環境 クロスブラウザなデザインを目指す上でターゲットとする視覚系ブラウザを一通り用意してください。本稿では、ユーザー数が多く、表示上の問題も多いことから、Windows Internet Explorer 6を中心に解説していますが、それ以外の視覚系ブラウザ（モダンブ
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
clearfix - 10press
floatするボックスを含む親ボックスの背景表示 floatプロパティを用いて段組をしたときに、Internet Explorer以外のブラウザだと親ボックスの背景色や背景画像、borderが途切れることがあります（サンプルHTML）。 これは作成者の立場からするとIEの挙動がありがたいのですが、CSSの仕様を見るとfloatはボックスを"浮かせる"ものなので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなってしまうと言うのが正しい挙動のようです。 親ボックスの背景を表示させるための一工夫 親ボックスの背景を表示させるには以下の方法があります。 親ボックスの幅を指定する 親ボックスの高さを指定する 親ボックスにvisible以外のoverflowを指定する 親ボックスの最後に完全な「クリアされた」要素を置く 1.の方法ではIEだけしか背景を表示することが出来ません。
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
clearfixの決定版を作る －IE編－
今回は、floatバグ対策における鬼門ともいえるIEのclearfixに挑戦する。しかし、その前に、何をもって「決定版」とするか、あらためておさえておこう。本来なら、ひとつでも多くの種類、バージョンのブラウザでfloatをクリアできる（もしくは同じ効果を得られる）ことをもって、決定版とすべきなのだろうが、ここでは少し違う方針をとりたいと思う。簡単にいえば、CSS自体の正しさとか美しさを優先したいということだ。逆に、そのためには古いバージョンのブラウザなどは犠牲になってもしょうがない、と考えている。ここでいう「決定版」を定義してみよう。 1. 文法的に正しいこと このこととイコールとするには異論があるかもしれないが、「W3Cのvalidatorを通ること」と言い換えることもできる。少なくとも、通らないより通るほうがいい。 2. 内容的に理にかなっていること、意味不明でないこと いわゆるCSS
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
Harukiya Archives
2006/07/09 category / HTML いかにも息切れネタ切れな、苦しさすら感じるタイトルである。以前もちょっとふれたIE独自拡張のexpression()を使いつつ、広い範囲で読むことのできるWEBページをデザインしてみよう。 ekken♂： １カラムにはmax-width レイアウトにはそれぞれ利点欠点があり、ワンカラムにも当然それはあります。例えば<body>要素直下の<div id="main">というブロックをリキッドレイアウトし、かつ800px以上には広がらないようにスタイリングするには div#main { width: auto; max-width: 800px; } のようにしますね。しかし、IEでもmax-widthを取り入れてくれないかなぁ……と、えっけんさんもこぼしてるように、IEはmax-widthを理解しません。これにはsvendtofte.co
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
そろそろCSSハックの良し悪しについて考えてみる（書式編） | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tanreisoftware.com
http://green.ap.teacup.com/adan/39.html
CSSハック | BLOG × WORLD ENDING