IE6のCSSバグを視覚的にチェック
てんぽ: IE6のCSSバグを視覚的にチェック CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。 IEtest (beta) 具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。 <div class="container"> <div class="div1"> <div class="div2"></div> </div> </div> .container {
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
最小フォントサイズが効かない
自分はFirefoxで最小フォントサイズ14pxにしているんですが、たまに最小フォントサイズが効いていないサイトがあって気になっている。 それでも豆字なサイトで指摘されているBoom Swagger BoomのほかにEngadget Japaneseも。 アドセンス部分には確かに効いているのに。何故だろう。 コメント（2件） 北村:Re: 最小フォントサイズが効かない フォントの設定は言語ごとに分かれているので、「詳細設定」で「西欧」(など対象ページの言語)を確認してみるとよいかもしれないです。 2007年01月28日（日）15:47:33 URL 編集 みりばーる:ありがとうございます 対象言語:「西欧」を確認すると「最小フォントサイズ:10」になっていました。こちらを変更することで上記のサイトでも望みのサイズになります。ありがとうございました。 2007年01月28日（日）22:09:
IE6で最小幅を実現する
CSSでボックスの最小幅を指定するには通常min-widthを使いますが、IE6はこれに対応していません。 そこで、IE6で擬似的にmin-widthを実現する方法としてボーダーとネガティブマージンを使うものが知られています。 Lucky bag::blog: IE で min-width を指定する方法 外側のボックスのボーダーで最小幅を確保しておいて、 その上に内側のボックスをネガティブマージンで重ねる。 これだけならHTMLとCSSは次のようにシンプルで済みます。 <div> <p>ここは可変幅だけど最小幅をもつ</p> </div> div { border-right:400px solid #fff; } p { margin-right:-400px; } 実際、Firefoxはこれだけでうまくいきます。 ところが肝心のIE6はなぜかボーダー部分まで可変になってしまいます。
メモ：MacIE5バグつぶし
MacIE5のCSSバグ対策。とりあえず、検索画面でとんでもない表示になっていたのを修正完了（多分）。 ほかに気になっていた2つのバグも、バグ辞典で対策方法を見つけたので一応対策してみた。直ってるといいけど。 インラインボックス化したブロック要素の背景が左方に広がる(5.x) :hoverへの設定が適用されるたびにa要素がずれてゆく あと明らかにおかしいのは、フロートに後続する通常フローのブロックボックスの幅が短くなってること。 WinIE6のフロートに後続するボックスの幅がフロートに合わせて短縮されるに似た症状。 バグ辞典にはフロート化したh1要素に続くdiv要素が回り込んで表示される(5.x)というのがあるけど、 フロートがh1要素でなくてもこのバグは発生するようだ。 MacIEのバグはバグ辞典にも回避法があまり載っていなくて、自宅にMacもないので修正が大変。サポートも打ち切られたこ
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
