Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c

Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです

floatした際に背景が消える件(IE編) floatした際に背景が消える件でIEには『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグがあると説明しました。 逆を言えば、親要素に幅や高さを指定しなければFirefoxと同じ表示になります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、FirefoxとIE

input要素などにおけるIEのバグ ちょっと、はまったのでメモ書き IE6やIE7では、margin-leftとwidthが指定されたブロックレベル要素内の行ボックスの先頭にinput要素やtextarea要素がある場合、適切な位置に配置されないというもの。 select要素などは適切に配置される。 CSS p{ margin-left:50px; width:100px; } HTML <p><input type="text" /></p> <p><textarea></textarea></p> <p><select><option>test</option></select></p> サンプル とりあえずmargin値で余白をとるのではなくpadding値を指定することで対応。 関連エントリー operaでのfloatの挙動 IE7でページが表示されない件について IE7用のCS

件名の通り。といっても、英語ブログの訳文です。原文は「Trash All IE Hacks」より。間違いもあるかもしれませんが、訳文の許可をもらったので日本語訳しておきます。以下から訳文。 みんながIE6を嫌っていることをそろそろ認めようよ。僕たちのCSSのデバッグの約80％の時間がIE6のために費やされている。みんな知っていると思うけど、IE6は時代遅れだし、ひどいCSSのレンダリングエンジンを持っている。けれど、ほとんどの平均的なインターネットユーザはそのことをいまだに理解していない。だから、僕たちはそれに時間をかけないといけないし、様々なIEハックを使って、バグを埋めないといけない。そう、何かをやる時間を使ってね。 共通のIEハック 1.CSSコンディショナルコメント 特定のIEのバージョン（不適切なCSSレンダリングをする）で僕たちのサイトを動かすためには、CSSコンディショナルコ

IEハックなんて全部捨てちまえ！に対する意見は結構まちまちで、僕も色々と勉強させてもらいました。では、元ネタの英語圏の反応はどうだったのでしょうか。それを簡単にまとめてみました。 現在の投票の結果 「Trash All IE Hacks」で募集している投票の結果は、現在（2007年8月11日14時ごろ）で、 Yes、全部捨てちまえ！…1,488件（86%） No、僕はIE6のバグフィックスをする時間があるよ…253件（15%） となっています。そもそも、設問の仕方が悪いような気もしますが、それは横に置いておきます。 英語圏の元記事に対するコメント 日本語圏の意見はIEハックなんて全部捨てちまえ！の記事に対するコメント、SBMのコメント、TBなどをご覧になってください。では、英語のコメントから興味深いもの、日本語圏ではあまり見られなかったものだけを下記にまとめておきます。 あと2年も待てば、

This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

IE7とOperaのzoom機能は似ているようで、ちょっとした部分が似ていません。その似ていない部分がこれからのWebデザインを考える上でのキーポイントになりそうな気がします。 IE7とOperaのzoom機能を比較してみる。 まず、IE7とOperaで、どちらもzoom機能を120%に設定し、その上で左サイドバーに「お気に入り」を表示して、それぞれのブラウザで3つのサイトのキャプチャを撮ってみました。（Operaはブックマークなどをサイドバーに表示させる方法が分からなかったので、違うもので横幅だけ代用しました）すいません、簡単にできました。詳細はTrash binさんのところを参考に。 まずは、僕が所属するNPO法人しゃらくのサイト。 IE7 Opera ほとんど一緒ですね。あえて言うなら、IE7には横スクロールバーがブラウザに出ていること。しかし、サイトそのものは画面中央に配置されてお