にこにこ風味 :: Weblog » Blog Archive » IE6 の “Peekaboo Bug”
このバグが有名なのか、そうでないのかは知らないけども。このバグに遭遇しても対処法を検索してもなかなかヒットしなくて悩んでしまった。 挙動としては CSS の float 属性を使用していると、float に内包されたコンテンツ、または float 要素に接する一部が一部表示されなくなるというもの。表示されないと言っても、スクロールしたり、選択すると現われる。その動きが “いないいないばぁ” と似ているので ‘Peekaboo’ と呼ばれるらしい。 詳細な説明は Position Is Everything に詳しくあります。 簡単な対処法は上記のサイトや次の evolt.org にあるように、float に含まれる要素に position: relative を指定するとバグを回避できます。 しかし、これではCSSの可読性も落ちるし、複数の要素に指定してやらなければならないので、面倒なので
peekabooに気を付けて[IE6のバグ] - パソコンＱ＆Ａ
Peekabooバグ Internet Explorer 6のPeek-a-boo Bug Peek-a-boo＝『いないいないばぁ』 Internet Explorer 6で、float領域とclear指定領域が接すると表示が隠れることがある現象のことです。 floatに重なる領域にリンク[a:hoverの指定アリ]があると現れたり隠れたりする。 ブラウザウインドウを最小化して開くと現れることがあります。 もちろんIE6のバグなのでそれ以外のブラウザでは正常に表示されます。 バグ発生の条件 以下の２つの条件が重なると発生します。 (1)floatを含むコンテナがclearを含むコンテナに接している。 (2)floatの親要素に背景色が指定されている。 a:hoverでアクションがあるとランダムに動作するようです。 バグ回避の方法 以下の３つのいずれかで回避できるようです。 (1)floa
CSS3に関する情報をまとめたサイト「CSS3.info」
次のIE7やFirefox、Opera、Safariなどでサポートされる「CSS3」に関する情報をまとめたサイトです。テーブルの角を丸くするとか、文字に影を付けるとかの効果を確認できる実際にCSS3を使ったサンプルもあります。 Everything you should know about CSS3 - CSS3.info http://www.css3.info/ プレビューいろいろ。 CSS3 Preview - CSS3.info http://www.css3.info/preview/ 例としては以下のような感じです。なお、FirefoxなどのCSS3に対応したブラウザで見ないと効果がわかりませんのであしからず。 角を丸くする、四隅の内2つとか、上だけとか下だけとかも可能 http://www.css3.info/preview/rounded-border.html 文字に影
CSS Nite vol.6～vo.11のゲストスピーカー | Web標準Blog | ミツエーリンクス
毎月第三木曜日の夜に、アップルストア銀座店にて行われているイベント、CSS Nite。つい先日行われたvol.5もたいへん盛況だったようです。ところで、来月以降8月のvol.11までのゲストスピーカーが既に発表されていますので、まとめてご紹介させていただきます。 vol.6（2006年3月） 「XHTMLマークアップ＆スタイルシート リフォームデザインガイドブック」をはじめ、書籍や雑誌記事などを多く手がけていらっしゃるほか、講演活動など多方面でご活躍中の教育デザイナー・境祐司さん。 vol.7（2006年4月） 大人気の書籍「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」の著者、益子貴寛さん。ご自身のWebサイト「CYBER GARDEN」では、Web標準を中心としたリファレンスやリソースを提供されています。 vol.8（2006年5月） 株式会社ビジネス・アーキテ
[を] CSSで半透明
CSSで半透明 2005-03-27-3 [Tips] CSSで指定した箇所を半透明にするには、 IE なら alpha フィルター、FF なら -moz-opacity。 <style> #sukesuke1 { position:absolute; padding:5px; background-color:red; filter:alpha(opacity=75); /*IE*/ -moz-opacity:0.75; /*FF*/ opacity:0.75; } </style> <div id="sukesuke1">ザ・半透明</div> 設置例： ザ・半透明 下に隠れている 部分です。 先日[2005-02-24-3]の似非Ajaxサンプルも半透明にしてみた。 ま、ともかく CSS3 の opacity まではこれだね。 参考：「JavaScript&DHTMLクック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
http://book.mycom.co.jp/book/4-8399-1796-5/4-8399-1796-5.shtml
チープカ:CSS
http://www.sixapart.jp/movabletype/beta/2005/09/stylecatcher_pl_1.html
ウェブスキン (SkinGmail.com) | 100SHIKI.COM