[Safari]Clearfixで下スペースが出てしまう問題 [css,hack,safari,tips] - BlurBlue-Note
以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。 CSS .hoge:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; line-height: 0; } .hoge { display: inline-table; min-height: 1%; } /* for macIE \*/ * html .hoge { height: 1%; } .hoge { display: block; } /* end of for macIE */ どこが変わったかというと、モダンブラウザ用に書かれている、.hoge:afterの部分に line-height
IEバグ：peek-a-booバグ
WinIEの動作確認をしている時に、時々表示が違うってことありませんか？ ボクはソレが結構発生したりして、原因が分からず悩んだりする事が多々有ります。 IEにバグが多すぎるってばそれまでですが、それにしてもIEはよくハメてくれる… 現在仕事で組んでいるサイトがあるんだけど、ソレも時々表示がおかしくなったりして、納期との戦いだったりする昨今。 そんな中、ふと読んでいたブログにpeek-a-booバグなる記事が書かれていたので、今更ながら「あ！」 と思わされました。 びっくりするくらいタイミングが良かった。 ちょっと発生条件が分かってませんが、WinIEだけ読み込み時にボーダーが出たり消えたり、背景がスクロールしたら消えちゃうとかそういうバグにハマってしまったら、 height:1%; のように、高さを指定して上げる事で解決するそうな。 IEは、高さを固定しても内容物にあわせて自動的に高さもあ
IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
ブラウザバグ回避用CSSセットアップ / IEバグ対処フロー | Takazudo Clipping*
暇だからCSSのセットアップでも載せとく。 CSSレイアウトで問題になるのは、ブラウザごとにバグがあって、それに対応するのにどうするかっていうのが一番困る。でも、ブラウザごとにっていっても、実際に問題があるのは、ネスケ4とかIE4とかMacIEとの本当に古いブラウザと、バグの多いけどまだちょっと使っている人がいるIE5、IE5.5、まだまだこれからも高いシェアを続けていくIE6と、かなりましになったけどまだちょっと問題のあるIE7を、なんとかすればいい。逆に言えば、これら以外のブラウザには、フツーに何の仕掛けもなしに、きちんと表示される必要がある。FirefoxとかOperaは、かなりきちんと表示してくれるから。 要するに問題なのはIEばっかりなんだけれど、FirefoxやOperaできちんと表示されていれば、IEでボロボロになってても、大して心配はない。一定の流れでバグ回避をしていけば
IE7 の隣接セレクタで気が付いたこと
「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつき... 「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつきました。 IE7 は隣接セレクタに対応してるはずなのでおかしいな、なんか自分の書き方がおかしいのかな？なんて思って、手元にある CSS をいじったりしてみたのですがまったく効果なし。何でだろうと思って HTML 文書の方を見て、何気なくソース内のコメントを削除してみたら...... 普通に適用されてる...... orz 該当する HTML ソースは下記の通り。 <div id="navigation"> <h2>Contents</h2> ...中略... </di
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のバ
「clearfix」のIE 7対策
CSSで、フロートした要素がはみ出してしまうのを回避させる「clearfix」のIE 7対応版です。 「clearfix」の解説ページ Clearing a float container without source markup（Position Is Everything） 「clearfix」のIE 7対策方法 「.clearfix」に「min-height:1%;」を追加します。 .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ display:inline-block; <span class="accent1">min-height:1%; /* for IE 7*/</span> } /* Hides from IE-mac &
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (23) 08-01 ブロック要素化による問題 | クリエイティブ | マイコミジャーナル
リストコンテンツをブロック要素化すると余白が挿入される問題[未修正] IEでは、リスト内のインライン要素をブロック要素化すると、リストの各項目の下に余白が挿入されるという問題が発生する。 サンプルソース8-1-0では、リストのコンテンツとしてリンクを記述している。リンク部分には背景色などのデザインを指定しているが、<a>で構成されるのはインライン要素であるため、そのままでは文字の部分だけがリンクとして機能する。この段階では、リストの各項目の下に余白はなく、すべての項目がくっついて表示される。 図8-1-0a:IE6での表示 図8-1-0b:IE7 beta2での表示 図8-1-0c:Firefoxでの表示 サンプルソース8-1-0 a {background-color:cyan; padding: 5px; color: black; text-decoration:none
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://hpbuilder.net/weblog/2007/08/07123842.html
ピクセル単位で合わせるところではborderを使わない（IE7でも！） - ADP