clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix
米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。 The very latest clearfix reloaded clearfixとは おさらい: micro clerafix(IE6+) モダンブラウザ用のclearfix最新版 clearfixとは 「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。 おさらい: micro clerafix(IE6+) まずは、おさらい。 micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。
背景色をrgbaとrgbで2重指定するときのIE地雷
はじめに結論 CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介． 結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります． Goodパーツ こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと． .someClass { background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */ background: rgba(128,128,128,0.8); } 両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です． Badパーツ こうやるとIE6-8で背
IE 7以下で背景画像が表示されない場合の対処法
IEで変な現象が起きてしまったのでメモ。 Internet Explorer 7以下で背景画像が表示されなくなるといったもの。 その原因となった部分と対処法。 背景が表示されなくなったページこういうページを作ってました。 背景画像が表示されなかったページ このページの「タイトル」と書かれている部分ですね。 （実際に作ったページとは画像を変更しています） この部分のHTMLとCSSは以下。 <div id="main"> <div class="article"> <div class="head"> <h2>タイトル</h2> </div> <div class="body"> <p>テキスト。テキスト。テキス...</p> </div> </div> </div>/* ここが表示されない */ #main .article .head { background: url(img/main
ie6で文字が欠ける | helog - Webに悩む人のネタ帳
ie6で文字が欠けることがある。 「文字が欠ける」というのは、テキスト上部と下部で1pxぐらいのラインが表示されないという現象。 例えば、私の場合はブラウザ間で見た目を統一するために、line-heightプロパティを設定したり、リストのマークの位置を揃えようとする場合によく発生する。 webで調べてみると、line-heightとfloatの組み合わせが悪いような記述を見かけますが、実際に検証してみたところ必ずしもそうとはいえないみたい。 いじくり倒した結果、line-heightは1.2がボーダーラインということは分かりました。つまり、ie6ではline-heightを1.2より小さな値を設定すると、文字が欠ける現象が発生する可能性があるということです。 またie6かよ！早くなくなってしまえ！と言いたい気持ちを抑えつつ。 あまり好ましい対策とは言えないかもしれませんが、とりあえず
IE6.0で文字が消える :: Webデザイン
IE6.0で文字が消える現象について。 以下の項目に該当したら、IE6.0のCSSバグです。 ・文字が消えるブロック要素に背景色を指定している ・文字が消えるブロック要素内にフロート配置した要素がある <div style="background:aqua;"> <div>A</div> <div style="float:right; width:3em; background:blue;">B</div> <div style="clear:right;">C</div> </div> 上記のソースをIE6.0で見ると、「A」という文字が消えると思います。マウスなどで選択するとあぶり出しのように「A」という文字が浮かび上がります。 対策 ブロック要素の幅をwidthプロパティで明示することで回避できます。 <div style="width:99%; background:a
【CSS - zoom:1 - ★★★】 - hasLayout問題を解決するzoom:1;の落とし穴 ― Like@Lunatic
IEのヘンテコなCSS解釈の原因と言われるhasLayoutプロパティ。 どうやらこのhasLayoutプロパティの値がfalse（デフォルト値）の場合に、いろいろとまずいことが起こるようです。IEだけfloatした要素周辺のmarginやpaddingがおかしかったり、相対配置/絶対配置した要素がどこかに消えてしまったりする・・・という経験はcssレイアウトの際に誰もがぶつかる問題です。 また、hasLayoutがTrueとFalseの要素が混在している場合には、IE7のズーム機能を利用した際に、隣あった要素が重なってしまったりします。 この辺はコリスさんのIEでのCSSのバグを回避するhasLayoutに分かりやすい説明があります。 このhasLayoutの問題を解決するためにzoomプロパティが利用されることがあります。（zoomプロパティはIEの独自拡張であるため、これを使うこと自
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
