CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。 IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。 検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。 また、W3C CSS validator でValidなもののみに限定しています。 Internet Explorer 7のハック 「*+html hack」（*+html bodyのハック）は、じつはOpera 8.0 以降にも適用され
このページは普段ホームページを作っていて ブラウザのバグや独特？の仕様、 各ブラウザでの実装の違いなど気が付いたことをまとめたものです。 すぐ試せるように できるだけ症状が出るサンプルを載せ、 その回避方法についても触れるようにしました。 勘違いしているところ、或いは バグ回避のうまい方法があったらお知らせください :-)。 問題点だけ列挙しても とっつきにくいと思うので 「バグや互換性問題を避けるコーディング作法」 のページを作りたいと思っています。
javascriptライブラリは、使いすぎないようにせねばなー的体験。 jQueryな罠 以前、とある案件で、jQuery1.13を使っていたんだけれど、公開してから、Safari1.3でクラッシュするという問題が出た。調べてみたところ、これはどうやらjQuery自体のバグらしく、しゃーない新バージョンのjQueryにアップグレードしますかとのことで、アップグレードした。 ところが今度は、jQueryベースのライブラリ、interface elementsが一部、動かなくなった。これはアップグレードできんな…となり、jQuery最新版にアップグレードするのはヤメにした。まぁ、jQueryは、Safari1.3には対応していないのだけれど、フリーズはほんとかんべん。さらにその案件では、最初、jQueryが1.3でもそこそこ動くと自分が思っており、Safari1.3を対象ブラウザに入れてた。と
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
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
