IE7 バグ 早見表 By Nobu
IE6でよく遭遇するCSSのバグとその解決方法
IE6でよく遭遇する３つのCSSのバグとその解決方法
IE6で、マージンが２倍になってしまうバグ
マージンが２倍になってしまうバグは、「display:inline;」で解決します。
IE6で、hasLayoutプロパティによって起こるバグ
hasLayoutのバグは、「height:1%;」で解決します。
IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。
それぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を保持しているかどうかを示す値
デフォルトの状態では「hasLayout = false」です。
「hasLayout = false」の場合、幅や高さが他の要素のレイアウトに影響されて伸び縮みし、
表示が他の要素と重なってしまう場合があります（レイアウト崩れの原因）。
hasLayoutの値を調べたい場合、IE Developer Toolbar で要素を選択すれば確認することができます
（ちなみに、「-1」というのが「hasLayout = true」の状態で、「hasLayout = false」の場合、hasLayoutプロパティ自体表示されません）。
「hasLayout = false」の状態でレイアウトが崩れる場合、「hasLayout = true」に値を切り替えると問題が解決する場合が多いです。
切り替える方法ですが、CSSの特定のプロパティに下記のような値を指定することで可能なようです
Holly hackは、 heightをスタイルで指定することで「hasLayout = true」に切り替え、
レイアウト情報を要素に持たせるための工夫だったわけです。
IEでレイアウト崩れがどうしても直らない場合、 hasLayoutの値を確認してみるといいかもしれませんね。
IE6で、小さい高さを指定した場合に起こるバグ
小さい高さを指定した場合に起こるバグは、「font-size:0;」で解決します。
もしくは、「overflow: hidden;」で解決することもできます。
CSSでレイアウトする時問題になるのが、ブラウザ間のCSSの実装の差異（バグなど）
つまずきやすいポイント
- CSSレイアウトの基礎
- レイアウトする際は管理し易いように、positionかfloatに統一する。（ブラウザの実装上floatを推奨）
- 不用意にpositionやfloatを使わず、なるべくmarginやpaddingで対処する。
- win、macではフォントの大きさが異なるので、ある程度ゆとりを持たせてデザインする。
- marginは前後または親子の要素間で相殺する場合としない場合がある
（IE6互換以下ではこれに関するバグが多い）
ので、思い通りにレイアウトできない場合はpaddingでの指定を試すのもありかも。
- Opera8.x バグ
#container #nav #flash { display:block }
というように文脈的セレクタ記法だと、javascript（DOM）が正常に動作しない可能性あり。
この場合は単純に、#flash { display:block }
と置き換えることで動作する。（プルダウンナビを作る時はまった。。。）
- IE6 バグ
- XHTMLでページを記述する際、xml宣言を行うと （ 正確にはDOCTYPE宣言より先行して何らかの文字を入れると）
互換モード（ IE5.xに近いモード ）になってしまう。
（文法的にはxml宣言を行うほうが正しいので指定したほうがいい。
IE5をターゲットブラウザにするのであれば宣言するデメリットは無いわけだし。）
- XHTMLでページを記述する際、xml宣言を行うと （ 正確にはDOCTYPE宣言より先行して何らかの文字を入れると）
- IE5、IE6互換モード バグ
- CSSの正式な仕様ではwidthは純粋に内容自体の幅を示すのに対し、
IE6互換モード、IE5.xでは「内容+パディング+枠線」を示す。 - smarll、largeなどの相対フォントサイズが他のブラウザより大きい。
px指定などで回避する。 （ javasciprtで文字サイズの変更をできるようにするのが好ましい 。 ） - 先に挙げたようにmarginの相殺に関するバグが多く見られる。
- floatされる要素の親要素にもwidthを指定しないと
（CSS２の仕様では親にはwidthを指定しなくてもOKだったはず。）
不具合が起こるの可能性あり。
- CSSの正式な仕様ではwidthは純粋に内容自体の幅を示すのに対し、
- IE5.01 バグ
- テキストを非表示にして画像だけを表示させたい時に使うテクニックの一つに
text-indent:-9999px;
が挙げられるが、この指定をa要素に対して行うと、背景画像とリンク領域がテキストと一緒に画面の外に追いやられてしまう。 - インライン要素（テキスト）にマージン、パディングが適用されない。
- テキストを非表示にして画像だけを表示させたい時に使うテクニックの一つに
- firefox1.5 バグ
- IE5.01と同様に
text-indent:-9999px;をa要素に指定した場合、これをアクティブな状態にすると不要な枠が表れる。
- IE5.01と同様に
- mac IE バグ
- clearを指定している要素にfloatを指定しても無効化される。wrappingするなどの対策が必要。
- positionとfloatを併用すると大きくレイアウトが崩れる恐れ有り。
IEでのCSSのバグを回避するhasLayout
IEのhasLayoutが原因のひとつとなっているので、それを回避する方法
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。
IEでのCSSのバグを回避するhasLayout- hasLayoutとは
- オブジェクトがレイアウトを持っているかどうかを示すものです。
hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 - hasLayoutの値（read-only）: false
- デフォルト値。オブジェクトがレイアウトを持っていない。
- hasLayoutの値（read-only）:true
- オブジェクトがレイアウトを持っている。
- IEでのCSSのバグを回避するhasLayoutの値
- バグは、このhasLayoutの値がfalseの場合に起きます。
これらのIEでのCSSのバグを回避するためには、hasLayoutの値をtrueにする必要があります。
IEのCSSでのバグを回避するためには、例えば「height」の値に「1%」を指定し、「hasLayout」の値を「true」にして回避します。
上記の表の中でよく使用されているものは「height="1%"」や「widthの値を指定する」などがあります。property value display inline-block height any value float left or right position absolute width any value writing-mode tb-rl zoom any value - CSSのバグに効果のあるhasLayoutの指定方法
- hasLayoutを変更するプロパティには、「float」「position」「writing-mode」のように実装するレイアウトでその値を指定できないなどの制限があるものもあります。
また、「height="1%"」のように特定の箇所には使用できないものもあります。
ほとんどのレイアウトでは、拡大縮小せず100%の状態でユーザーに利用してもらうことを前提に制作していると思うので、この「zoom」を利用して指定する方法がよいと思います。 - CSSのバグに効果のあるhasLayoutの指定方法
- *{zoom:1;}
「*」は全てのタグに適応する意味になります。
全てを対象にするのが具合の悪い場合は、個別の箇所に指定してください。 - 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、
floatに後続するmarginの値が無視されるとか、
widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。
IEの様々なバグの真相らしきもの - こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、
IE7でもwidthを指定して回避したり
IE独自拡張のzoomを使ったりと色々やってると思います。今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。
と認識していましたが、hasLayoutというIE独自拡張の一つ。
←hasLayoutがIEの様々なバグの元凶
私が支払うことなく、オンラインでCDを焼くことができるサイト
デフォルトの値がfalseでレイアウト無しになっているので
「背景色が指定された要素内でfloatがある時、要素内の文字が消える」とかって現象が起こるっぽいです。
そして、
heightやwidthを指定することでトリガーとなりhasLayoutの値がtrueになり、
レイアウトが有るとみなされ表示されるようになると。
その他トリガーになるプロパティと値は、、
その他のバグもこのhasLayoutがfalseになってたり、trueになってたりするから引き起こっているような気がします。
様々なバグもIEからしてみたら仕様だって事でしょう。
[CSS]いろいろな問題を解決する1行のスタイルシート集
- IEで position:absolute した要素が消えるバグ
- 次のケースで position:absolute のボックスが消えるようです。
* position:absolute が float と hasLayout をもつ clear の直前に存在する場合。 * position:absolute が float と hasLayout をもつ clear との間に存在する場合。 * position:absolute が width:100% の float の直前に存在する場合。（IE6以下のみ） * position:absolute が width:100% の float の直後に存在する場合。（IE6以下のみ）
- ボックスの幅が拡がらない
- px単位で指定されたボックスは、ブラウザの文字サイズを拡大しても、それに伴って広がることはありません。
ボックス幅が狭い場合、文章の折り返しが頻繁に行われて読みづらいなってしまいます。
これを解消するためには、ボックス幅をpx単位ではなくem単位で指定します。
emは1文字分の大きさを1とする相対単位で、文字サイズが大きくなれば、それに伴って1emのサイズも大きくなり、結果としてフォントサイズと連動した変化が可能となります。 - 画像の下に隙間ができる
- 画像の下に隙間が空くのは、IEのデフォルト設定がbaselineになっているからです。
下の隙間というのは、アルファベットの「g、y、j」などの下の部分を表示するための隙間です。
これを解消するには、CSSでマークアップした画像に対して、baselineの設定を変更すればよいのです。vertical-align: top; vertical-align: bottom;
- 擬似クラスの記述順序Just think 'LOVE' (LV) and 'HATE' (HA)….
-
* セレクタの固有性（specificity）は4つとも同じ。 * なので、最後に書かれたものから優先的に適用される。 * 例えば、link、active、hover、visited の順番で記述しているとすると・・・ * 未訪問リンクの場合は、active を hover が打ち消すので active は無効になる。 * 従って、active は hover の後ろに記述しなければならない。 * 訪問済みリンクの場合は、active も hover も一番最後の visited が打ち消してしまって無効になる。 * 従って、visited は hover や active の前に記述しなければならない。 * つまり、link、visited、hover、active の順番で書くべし。 * ちなみに、link と visited は打ち消しあうことがないので順番はどっちでもOK。 * link はあくまで「未訪問（unvisited）」のリンクのみに適用される擬似クラスで、 「リンク全般」に適用されるものじゃないので要注意。 * link じゃなくて unvisited にすればいいのにね。
- フロートとフロートの間にコメントがあるとテキストの一部が下に複製される
- フロートしているボックス内において、最後の内容物の文字が複製されて下にはみ出してます。
テキストではなく背景画像だった場合、画像が複製されるケースもあります。
解消法はコメントを削除するだけ。これ以外の解決法は今のところ知りません。。 - peek-a-boo bug（ピーカブーバグ）
- peek-a-boo bugを直訳すると「いないいないばあバグ」です。
ピーカブーバグとは、ブラウザをリロードしたり、スクロールした時に、CSSで指定したborderやbackgrund-imageが出たり消えたりするバグのことです。
解消法としては下記の方法があります。div に line-height を指定 width または height を指定 position:relative を指定
- 縦方向のセンタリング
- 高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。
line-height:24px;
- はみだす箇所を隠す
- 横幅の広い画像などをフロートした要素に配置した場合に、はみだしてしまう箇所を隠します。
#main{ overflow:hidden; } - リンクが複数行になるのを避ける
- 指定箇所の自動改行を禁止します。 ※強制的に一行になるので、レイアウトに注意。
a{ white-space:nowrap; } - ブラウザのスクロールバーを常に表示させる
- Firefoxのデフォルトでは縦方向のスクロールバーを表示しないため、ページごとに高さが異なる際、レイアウトがずれる場合があります。
html{ overflow:-moz-scrollbars-vertical; } - 水平方向のセンタリング
- 全てのモダンブラウザ用に、ブロック要素を水平方向のセンタリングに配置します。
margin:0 auto;
- textareaの縦のスクロールバー
- Internet Explorerのデフォルトでは、textareaの縦方向にスクロールバーを表示します。これを取り除きます。
textarea{ overflow:auto; } - 印刷時の改ページを指定する
- ページを印刷する際、改ページ箇所を指定します。
h2{ page-break-before:always; } - リンクのボーダーを削除する
- リンクのアクティブ・フォーカス時のボーダーを削除します。
a:active, a:focus{ outline:none; }
バグ 一覧｜CSS HappyLife
- IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件 - 2008-01-31
IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。
その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、
一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法
ただ、float指定してる子要素にposition指定とかあったりなんやかんやと色々やってる時に発生したような記憶があるので、そんな時は要注意です。
paddingでいけるときはpaddingにしたり、IE6用のハックとか使って指定しておくのが良さげですって事で。- IE7のborder-styleの不思議 - 2007-11-01
border-bottom: 1px dotted #000;とかって書くと、IE6だけ破線の間隔が広くなってしまうじゃないですか。
というか、dashed を指定したときと同じになるアレです。
IE7はなおってるーって喜んでたんですけど、
solid で2px以上なborder があると、IE6と同じ破線になってしまう- IEの様々なバグの真相らしきもの - 2007-01-09
- DW8で生成するポップアップメニューがIE7で崩れる件を解消 - 2007-01-08
- IE7バグ：横幅が指定値よりも広がる - 2006-11-09
WinIE7の環境下においてある特定の条件を満たしてしまうと、
横幅が指定した値より大幅に大きくなり、横スクロールバーが出てしまうというバグが見つかりました。
原因は、
ある条件下でfloat:rightを指定したとき、IE7は親のボックスがサイズ指定されていても、ソレを無視して右に行ってしまうからだと思います。
さらにソコに特定の条件が重なると発生。
* floatでrightを指定している
* リンクを貼っている
* a要素をdisplay:blockにしている
* a要素のmarginでマイナス値を指定している
右を基点とする場合があやしいと思う。
positionなどで、rightを基点に指定した場合にも発生するかもしれません。
p要素に横幅を指定してあげるか、マイナス値の指定を取ればなおります(?)。- InternetExploerer7 日本語正式版で早々に気になったバグ... - 2006-11-03
margin-bottomが効いていない箇所を発見。
リンクが貼ってある画像にカーソルを乗せると（hover時）、何故かそのスグ下にある同様のリンクが貼られている画像のmarginが増える。
widthがありえないくらい大きくなり、bodyにcenterで指定している背景もその幅にあわせて、centerに配置される解決策- IEバグ：img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる - 2006-10-18
line-height が半分になるバグ
CSS 2.
しないAdobe Acrobatの作業方法1 推奨事項 (リファレンス) では、
line-height と font-size との相違は leading と呼ばれ、leading の半分は half-leading であると指定されています。
ブラウザとその他のユーザエージェントでは、
それに応じて half-leading をインラインエレメントの上部と下部に適用する必要があります。
ただし、Internet Explorer (バージョン 6 以前) では、
現在の行に置換エレメントが含まれている場合、その行の half-leading が前の行と後続の行の half-leading を使用して折りたたまれます。
WinIEだけ読み込み時にボーダーが出たり消えたり、背景がスクロールしたら消えちゃうとかそういうバグにハマってしまったら、
height:1%;
のように、高さを指定して上げる事で解決するそうな。
IEは、高さを固定しても内容物にあわせて自動的に高さもあわせてくれるので、そこを利用して回避します。
大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、
h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。
該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。
対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。
IEのフロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置されるバグが発生した際は…
* divなどを追加してfloatを指定していないボックスにmarginを指定する
* 背景画像が指定されていない場合は、paddingで対応
* IE限定バグの為、アンダースコアハックなどのハックで対応
* 見映えがさして変わらない場合、気にしないのが得策
class属性に複数の値を指定する際のバグ一覧
便利なことにclass属性には複数の値を設定することが可能です。
ただ、例によってブラウザによってはバグがあるので注意が必要。
下にまとめてみました。
・そもそもNN4.x、IE4.0には対応していない。
・Win IE（5.0、5.5、6.0）では複数のclass属性を使うセレクタでは最後のclass属性のみ適用される。
※これらはともにスタンドアローン版での報告。
・Mac IE5.0では子要素に 指定した値が親要素に反映してしまう。
さらに似た名前のclass名（abc、abcdeなど）を指定するとなぜか共に反映してしまう。←天才！！
・ 一部のJavaScriptのライブラリを使うときに、スタイルシートが半角スペースで区切っていくつも指定できる、
というルールを考慮していないものがあり、その際不具合が出る。
ちなみにFirefox、OperaやIE7.0などのモダンブラウザは問題なく動作するようです。
参考サイト
複数のclassをセレクタに指定した際のIEのバグ:hamashun.com
どうやらIE様は、複数のclassを使うセレクタは、最後の一つのclassしか見ていないようです。
(この現象はIE5.0 IE5.5 IE6（全てスタンドアローン版）で確認)
複数のクラス名を付けた時のmac ie5のCSSに関するバグ:Melanges
どうしたら回避できるのか、いろいろと悩んだけど、結論。
「似たような名前は付けるな！」
クラス名を複数つけちゃうときは、似た名前を付けるのは危険です。
classを複数指定したときにMac IEで:MSM-O3C
解決法
* classの複数指定をしない
* 複数指定の代わりにidで指定
* cssで記述するときに子要素の後に親要素の記述をする。
「CSSで1つの要素に複数のクラスを指定する」に対応したブラウザは？：教えて！goo
IE6のバグ
メインコンテンツの一番下のテキストの数文字が、何故か複製されて下にはみ出してしまうのです。
解決方法は「コメントタグの削除」！！
でも、 テキストを内包している、ボックスまわりのコメント削除だけでは解決しない場合もあり、 影響範囲がどの程度かはよく分かりません。
でも、とにかくコメントを削除すると、何事も無かったかの様に余分なテキストが無くなります。
『CSSバグ辞典スレッド』の要約の要約
WinIE6バグ回避法
WinIE6のバグを回避するための「定石」
CSSレイアウトの定石 WinIE6バグ回避法フォントサイズ関係
* font-sizeは%かpxで指定する。
em単位で指定した値が文字サイズ変更後に正しく反映されない
*状況：- WinIE6.0では標準・互換モードともに不具合の発生が確認されました。
*症状：-
font-sizeプロパティをem単位やex単位で指定した要素がネスト状態にあるとき、文字サイズを変更すると文字の大きさがばらばらになることがあります。例えば以下の例では文字サイズが「中」以外の場合、4つの文字のフォントサイズがすべて異なります。
文字サイズが「中」の場合のフォントサイズは A=B=C=D ですが、「大」や「最大」でのフォントサイズは A
*問題：- メニューの［表示→文字のサイズ］で文字サイズを変更すると、変更後にem単位で指定されたマージンなどが変更後の文字高さを正しく反映していない。
*問題回避:-
font-sizeは%かpxで指定する。 なお、祖先要素でfont-sizeプロパティを%値や絶対単位の値で指定することで不具合を回避できます。
キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6)
*状況：- WinIE6.0標準モードでは font-size: medium; と font-size: 100%; が同じサイズで扱われるように変更されました。
*症状：- font-sizeプロパティなどでフォントサイズを指定する際、mediumなどのキーワードを使用すると、標準モードで表示したときと互換モードで表示したときとでは文字サイズが変わる。
*問題回避:-
font-sizeは%かpxで指定する。
* widthと同時に左右borderや左右paddingを指定しない。
* heightと同時に上下borderや上下paddingを指定しない。
ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう
*状況：- CSS1/CSS2ではボックスの幅を算出するときにパディングやボーダーのサイズは除外される。
しかしWinIEではこれらを含めて幅や高さを算出する。
*症状：- ボックスサイズの算出時にボーダーまでを含めるという考え方はCSS3で導入される予定です。
ただし、現在WinIEは公式的にはCSS3をサポートしていません。
*問題：- WinIE6.0標準モードはCSS2に従ったサイズ算出を行います。
IE6互換モードでは従来同様、ボーダーまでを含む算出が行われています。
*問題回避:-
widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。
左右ボーダーとパディングを設置した要素に後続する部分がずれる
*状況：- WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。
*症状：- 最後の子要素が非匿名ブロックレベル要素である要素の四方にパディングを設置し、さらに左または右にボーダーを設置すると、
その要素に後続する要素の内容物がボーダーを設置した方向にずれてしまう。
*問題：- この不具合によって左右にずれている文字列にリンクが含まれており、
さらにその:hover擬似クラスに背景やfont-weight, font-sizeなどのプロパティを指定している場合、
リンクが:hover状態になったときに周辺の文字列が移動することがあります。
例えば、このページの末尾にあるリンクにマウスポインタ等を乗せると、左方にはみ出していた文字列が右に移動するはずです。
*問題回避:-
（ブロックレベル要素を内包するボックスにはpaddingを指定しない。）
症状で示した条件が1つでも満たされなければこの不具合は発生しません。
例えば、ボーダーを内側の要素に設置するなどの方法で不具合を回避することができます。
あるいは、
外側の要素に対して下ボーダーを設置することでもこの不具合を回避することができます。
body要素に設定したボーダーが閲覧領域全体を囲むように表示される
*状況：- WinIE6.0では、互換モードでこのバグが発生します。標準モードではマージンなどを反映するように修正されています。
*症状：- body要素にボーダーを設定すると、マージンや子孫要素などを無視し、閲覧領域を囲むようにボーダーが表示されてしまう。
*問題回避:-
body要素にはborderやwidthを指定しない。
初期コンテナブロックを生成する要素の幅を指定できない
*状況：- WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードでこの現象の発生を確認しました。
*症状：- 初期コンテナブロックを生成する要素（WinIE6標準モードではhtml要素、WinIE6互換モードとWinIE5.5以前はbody要素）に対してwidthプロパティを指定しても無視されてしまい、幅を指定しないときと同じ結果になる。
*問題回避:-
body要素にはborderやwidthを指定しない。
* フロートのコンテナブロックにはwidthを指定する。
背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)
*状況：- WinIE6.0では標準・互換モード共に文字が消える現象が発生します。
*症状：- 背景色を指定したブロック要素内にフロート配置した要素があるとき、ブロック要素内の文字列が消える。
*問題回避:-
このバグは、親要素の幅をwidthプロパティで明示することで回避できます。
フロートのコンテナブロックにはwidthを指定する。
パワーポイントのデザインテンプレートとして画像を保存する方法
フロートを含むボックスのマージンが無視される(5.x/6.0)
*状況：- WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。
*症状：- * （複数の子要素または多くの内容物を含む）右フロート
* 上記のフロートの直後にclearプロパティで回り込みを抑制したフロートでない要素
これら全ての要素を子に持つ要素で、左や上のマージンが無視されることがある。
※左フロートでは左マージンが、右フロートでは左マージンと上マージンが無視されます。
*問題：-
*問題回避:-
フロートのコンテナブロックにはwidthを指定する。
以下のいずれかの方法を用いることで不具合を回避することができます。
* 問題のフロートを含むボックスの上パディングに0より大きい値を指定する。
* 問題のフロートを含むボックスのwidthプロパティにauto以外の値を指定する。
フロートの左右マージンが指定値より大きくなる(5.x/6.0)
*症状：- フロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置される。
フロートに後続するボックスの幅がフロートに合わせて短縮される(5.x/6.0)
*状況：- フロートに後続する要素のボックスは左端がフロートの陰になります。
WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。
*症状：- フロートに後続する要素に幅か高さが指定されているとき、その要素の幅はフロートの幅を確保するように短縮される。
また、フロートと後続要素の間に無くすことができない隙間ができる。
*問題：- この不具合のために幅が短縮された要素の内部にあるフロートでは、
その要素の外部にあるフロートに対してclearプロパティが効きません。
以下の例で背景が空色のフロートは青色ボーダーのフロートの下に置かれるはずですが、
WinIEでは赤色ボーダーのボックスの内容領域の左上端、つまり青色ボーダーのフロートの右に置かれます。
*問題回避:-
フロートに後続する通常フローでかつclearしていないブロックボックスにはwidthもheightも指定しない。
clearを指定した要素ではフロートに対して上マージンを設置する(5.x/6.0)
*状況：- WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。
*症状：- clearプロパティによってフロートとの隣接を抑制した要素に上マージンを指定すると、
フロートの下に指定値分の幅の上マージンを設置する。
clearプロパティの「フロートに後続する要素のボックスを先行するフロートに隣接させない」効果は、
後続する要素の上マージンの値を調節することで実現しています。
従って前出の例示の場合は、
後続する要素へ実際に設置するmargin-topの値を3emに変えることでclearプロパティの効果を実現することになります。
そもそもフロートは通常フローに属していないため、
位置指定されていない（position:static; である）ブロックボックスのマージンがフロートのボックスに対して設置されることはないはずです。
*問題：- フロートの高さが3emであるのに対し、
後続のdiv要素の上マージンの指定値が1emしかないので、フロートの下端と後続要素のボーダー上端は接するはずです。
※「フロートの高さ」はフロートの上マージン領域上端から下マージン領域下端までの高さを表します。
*問題回避:-
clearするボックスの上marginは0にする。
margin-top と clear: both を同じエレメントで使用しないようにします。
# 絶対配置要素のコンテナブロックにはwidthを指定する。
ポジショニングされた要素が後続要素のマージンを引き継ぐ(IE5.5)
*状況：- WinIE6.0では標準・互換モードともに不具合の発生が確認されました。
*症状：- 絶対配置された要素が、後続する別の要素のマージンを引き継いでしまう。
*問題回避:-
絶対配置要素のコンテナブロックにはwidthを指定する。
このバグを回避するには、マージンを引き継いでしまう要素で左からの位置（leftプロパティ）を定義し、
さらに親要素で幅（widthプロパティ）を定義してください。
または、親要素にボーダーかパディングを設定してください。
rightプロパティが親要素のボックスを基準にした配置を行わない(IE5.5)
*状況：- WinIE6.0では標準・互換モードともに不具合の発生が確認されました。
*症状：- ポジショニングした要素の子孫要素を絶対配置するとき、rightプロパティは指定した値どおりの配置をしない。
*問題：- 問題が起きる要素の親要素で幅を指定（widthプロパティ）すればこの不具合を回避できます。
*問題回避:-
絶対配置要素のコンテナブロックにはwidthを指定する。
leftとrightやtopとbottomを同時指定しない。
left, topが指定された要素ではright, bottomを認識しない(IE6)
*状況：- leftおよびtopプロパティが指定された要素では、rightおよびbottomプロパティの指定が無視される。
*症状：- WinIE6.0では標準・互換の両モードで不具合の発生が確認されました。
*問題回避:-
絶対配置要素の位置指定はtopとleftまたはrightとbottomで行う。leftとrightやtopとbottomを同時指定しない。
# overflowを使うときは同時にwidthやheightを指定する。
幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない
*状況：- WinIE6.0では標準・互換の両モードで不具合の発生が確認されました。
*症状：- 幅も高さも明示されていない相対配置要素に overflow: hidden; を指定しても、
絶対配置された子孫要素に対してその指定が効かない。
*問題：- 親要素をはみ出す部分は表示しないようにしています。
親div要素の高さが1行分に対し子div要素の高さは2行分なので、子div要素の下側は隠れてしまうはずです。
*問題回避:-
overflowを使うときは同時にwidthやheightを指定する。
CSSで見る、IE7
IEの CSSへのサポートが、どのように変化するのか
いないいないばぁのバグ →
*状況：- foatしたdivの横に普通にコンテンツを出したいとき、
divをclearすると、なぜかfloatされたdivの横に出る筈のコンテンツが消えるという奇怪な現象を起こらなくしたらしい。
*発生の条件：-
以下の２つの条件が重なると発生します。
(1)floatを含むコンテナがclearを含むコンテナに接している。
(2)floatの親要素に背景色が指定されている。
*問題回避:-
問題をほぼ全て解決！
以下の３つのいずれかで回避できるようです。
(1)floatを含むコンテナのdivにline-heightを指定する。
(2)floatの親要素にwidthまたはheightを指定する。
(3)floatに含まれる要素にposition:relativeを指定する。
勝手に横幅を引き伸ばすバグ→
*状況：- 横幅をpxで設定しているのにもかかわらず、
URLなど途中で切れないテキストが入ってしまったとき、勝手に横幅を拡張しないようにしたらしい
*問題回避:-
問題をほぼ全て解決！
%(パーセンテージ)がわからないバグ →
*状況：- もし、marginを比率で指定している場合、marginはその指定されているboxの横幅を参考にするべきですが、
そのbox の横幅が、親のboxの横幅に依存している場合、IEはどうやってmarginを取っていいのか途方にくれる、というバグ
*問題回避:-
問題をほぼ全て解決！
line-heightがへんてこなバグ →
*状況：- テキスト内にIMG, INPUT, TEXTAREA, SELECT そしてOBJECTが内在しているとき、
つまり、text text text text text などとなっているとき(絵文字とか、こんな感じですね)、
line-heightが突然狂う、というバグ
*問題回避:-
問題をほぼ全て解決！
混乱したborderのバグ →
*状況：- IE6では、divのなかに複数のdivがあって、その２つ目以降のdivのmargin-topが、「-1px」など、0より下の値が定義されており、
さらにその2つ目のdiv、あるいはそのchild elementにボーダーが設定されているとき、
IEは拒否反応を示してやけっぱちになる、という大人気ない行動
*問題回避:-
問題をほぼ全て解決！
ギロチンバグ →
*状況：- boxの中にあるもうひとつのboxが、floatされているがclearされておらず、
さらに、floatされているboxのあとに来る、floatされていないコンテンツに含まれるのリンクで:hoverが指定されているとき、
floatされている部分の下のほうが、チョッキリ切られてしまうという残酷なバグ
構造のマークアップなしでフロートをクリアする方法
*問題回避:-
問題をほぼ全て解決！
listのbgが消えるバグ →
*状況：- floatされたdivがrelativeで位置づけられていたとき、
中にあるlistに設定されたbackgroundが無視される奇妙な現象を修正したらしい → 祝。
*問題回避:-
問題をほぼ全て解決！
# スクロールできないバグ →
*状況：- ページのコンテンツがrelativeにpositionされており、高さや横幅が定義されてないとき、
その中にabsoluteにpositionされたboxたちが存在すると、たとえ（absolute内のコンテンツを見るのに）必要であってもスクロールバーを出さないバグ
*問題回避:-
問題をほぼ全て解決！
かってにコンテンツを繰り返すバグ→
*状況：- 何回かfloatを繰り返すと、
時に、最後にfloatされたelementの中にあったtextがその最後のelementの後に重複して現れるという脅威の現象
*問題回避:-
問題をほぼ全て解決！
イタリックで横幅がわからなくなるバグ →
*状況：- 読んで字のごとく、イタリックだと横幅を指定しても無視する
*問題回避:-
問題をほぼ全て解決！
2倍の値のmarginをつけるバグ →
*状況：- 例えば、float: left; されているに100pxのmargin-leftを指定すると、
つまり、floatの方向と、marginの方向が同一だった場合、太っ腹にも与えた marginの2倍である200pxもmarginをくれる、というバグ
*問題回避:-
問題をほぼ全て解決！
# 奇妙なインデントのバグ →
*状況：- inline elementであるイメージやテキストが、floatされたboxに隣接するとき、
そのテキストやイメージは、floatされたboxに与えられたはずのmarginを受け継いでしまう、というバグ
*問題回避:-
問題をほぼ全て解決！
3pxの悪魔、のバグ →
*状況：- floatされたboxの横に来るテキストは、微妙な3pxの隙間を持つことになる、という奇怪な現象
*問題回避:-
問題をほぼ全て解決！
最初の文字がないバグ →
*状況：- boxの中にboxがあり、内側のboxにテキストが入っており、letter-spacingが設定されているとき、
最初の文字が消えてしまう！という怪奇現象
*問題回避:-
問題をほぼ全て解決！
inline listのバグ→
*状況：- boxに横幅がpxで指定されており、中にあるlistに 'display: inline'と'white-space: nowrap'が指定してあり、
さらのこのlistの横幅が、上側のboxで指定された横幅を上回ってしまう場合、boxは勝手に横幅を拡張してしまう、というバグ
*問題回避:-
問題をほぼ全て解決！
IEバグ対処フロー
- * 背景画像が出ない
* borderが出ない
* よくわかんないけど一杯余白が空く
* なんか背景出たり出なかったりちかちかする
* とにかくなんか変 - については、IE6以下において、問題のある要素にheight:0を指定すれば直る。
これは有名なholly hackという方法で、IEは、widthかheightが指定されていると、問題無くなることがほとんど。
全部にwidthを指定するのは現実的でないので、height:0を指定する。
IE7の互換モードと、IE6以前では、heightに少ない値を指定しても、
内容によって要素の高さが拡大されるため、height:0を指定しても、何も問題ない。
これを、1個1個確認していくのはめんどい。
そこで、background,borderが指定されている全てのブロック要素に、height:0を指定する。
IE7の場合は、*{zoom:1}を指定すれば直る。
理由はIE7のズーム機能でバグるを参照。 - 互換モード時にboxサイズの算出方法が違う
- width,heightを指定してある要素にpaddingやborderを指定すると、高さや幅が変わるため、このようなCSSの指定を行わないか、
行った場合は、各スタイルシートにそれを補正する記述をする。 - 横方向のmarginに指定するautoがきかない
- IE6以下であれば、親要素のtext-alignによって、ブロック要素の左右位置も変わるため、それでなんとかする。
- widthかheight / min-heightが指定された要素について
- margin相殺が発生しなくなってしまうため、そもそもmarginの相殺にあまり頼らないようにするとか。
- 垂直方向のmarginが相殺されない
- widthかheight / min-heightが指定された要素については、margin相殺が発生しなくなってしまうため、そもそもmarginの相殺にあまり頼らないようにするとか。
- floatさせた部分だけ両サイドのborderが消えちゃうIEのバグ : floatで左右に寄せた部分のborderがスッポリ消えちゃうんですよ
- floatさせるボックスの親ボックス（上の例で言えば#container）の幅（width）を指定してあげると、さっきまで消えてたborderが表示されました。
「floatを使う場合、その外枠にはwidthを指定」 - floatを指定している要素とその親要素の関係
- を指定したときの親要素の高さの問題と合わせてまとめました。
ただし、overflow: autoの指定についてはa要素とかテキストサイズの変更とかで意図しないスクロールバーが出たりするので注意してください。 - IE6でfloatした要素が兄要素のmarginを継承（？）する
- 出現条件を説明するのが難しい。
子要素を全て囲むように親要素の背景がある場合など、親要素へのwidth指定は必須だと思われますが
（他にもwidthを指定することによって防げるバグがあったと思う）、
あちら立てればこちらが立たず、IEは本当に手間のかかるブラウザです。
兄要素（child1）を外に出す、margin属性の代わりにpadding属性を使う、
marginの指定要素を変えるなどで対処するしか無いようです。 - IEでフロートさせたボックスのマージンが倍になるバグ
- floatさせたボックスへ指定した左右のmarginが正常に反映されない(倍になる)というバグがあります。
display: inline;とか指定してやると回避できちゃったりとかします。
ネタ元コードはfloat: left;(float: right:)と同時にdisplay: inline;を指定するというだけで、
HTMLに特に手を加える必要も、IE用にCSSコードを切り分ける必要もありません。
floatした際に背景が消える件【css tip】
1.親ボックスに対して高さを指定することです。
2.親ボックスの次の要素に対してclear:bothを適応することで親ボックスの背景が表示されるようになります。
3.親ボックスに対してoverflow:autoを適応することにより、子ボックスを親ボックス内に無理やり内包することが可能です。
floatした際に背景が消える件(IE編)
1.親要素に対してwidth:100%を指定することにより、
IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。
※ただし、widthに値を指定するこの方法は後方互換モードの際にpaddingやborderが指定されている場合は、使用できません。
2.親要素に対してheight:1pxを指定することにより、
IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。
※ただし、IE7では内包するボックスに合わせて親ボックスの高さが拡張されない為、適応できません。
3.親要素に対してzoom:100%を指定することにより、背景を表示することができます。
ただし、これも またIE7では、適応できません。
タグ「float」を含む注目エントリー
IE６で勝手にコンテンツ内容が複製されるバグ
一見するとCSSが悪く、CSSが原因でバグが起こっている印象なのですが、
実はこれCSSとHTMLの複合バグというかHTML側を修正すれば解決する現象らしい。
肝心の解決方法ですが、
それは
「floatさせてるコンテンツとfloatさせてるコンテンツの間にあるHTMLコメントを削除する」
または、
「floatさせてるコンテンツの前のHTMLコメントを削除する」というもの。
未修正バグ一覧
IE7で修正されたバグである。IE6以下では問題が発生する。
インライン要素の罫線や余白が切れる問題
*関連タグ/プロパティ：- border / padding
*症状：- インライン要素に罫線やpaddingによる余白を指定し、親要素に横幅や高さを指定した場合、罫線や余白の上下が切れる。
*原因：- IE7 では、はみ出した部分を隠すように設定する「overflow:hidden」が各要素に適用されていると考えることもできる。
*問題:- しかし、「overflow:visible」と指定しても、IEでは罫線や余白の上下は表示されない。
*問題回避:-
表示するためには、
paddingプロパティで親要素の内側の余白サイズを大きくするか、line-heightプロパティで行間を大きくするしかないのが現状である。
垂直方向の位置揃えの問題
*関連タグ/プロパティ：- vertical-align
*症状：- vertical-alignプロパティで「top」「bottom」と指定しても、「text-top」「text-bottom」と同じ表示になる。
*原因：- 古いブラウザでは複数のバグが関係してくるため、正しい表示を行っているFirefoxと表示を揃えることは難しい。
*問題:- また、IE6以下には「文字より小さな高さ指定が無効になるバグもあり、
vertical-alignによる問題が発生しているかどうかを確認することもできない
*問題回避:-
以下の2つのルールを守ることがポイントとなる。
* line-heightでは内包する要素より大きな高さを指定しない
* vertical-alignの「top」「bottom」を使用せず、「text-top」「text-bottom」を使用する。
または、「text-top」「text-bottom」と同じ表示になるものとして使用する
CSSハックの利用
IE7,IE6。
- *:first-child+html、 * html
- IE7だけに設定を適用する「*:first-child+html」と、IE6以下に適用する「* html」を組み合わせ、IEだけにスタイルシートを適用するCSSハック。
ただし、2つのセレクタを「,(カンマ)」で区切るとIE6以下のブラウザで認識できなくなるため、別々に記述する必要がある。 - *property
- プロパティの前に「*(アスタリスク)」を付けることで、IE7以下(すべてのIE)に設定を適用するハック。
- * html
- スターハックと呼ばれ、バグによりIE6以下だけに設定を適用できるハック。
の親要素は存在しないため、文法的には誤った記述となっている。 - _property
- アンダースコアハックと呼ばれ、バグによりIE6以下だけに設定を適用できるハック。
ただし、Mac版IE5には適用されない。文法的には誤った記述となる。 - *:first-child+html
- スターハックと、IE7が新しく対応したセレクタを組み合わせたもので、バグによってIE7だけに設定を適用できるハック。
の親要素は存在しないため、文法的には誤った記述となる。 - empty-cells
- テーブルの空セルの罫線の表示を指定。
- content / quotes / counter-increment / counter-reset
- コンテンツやカウンターの自動挿入を指定。
- html > body
- 子セレクタを利用したハック。文法に従った記述であり、IE7とモダンブラウザ、Mac版IE5に設定が適用される。
IE6以下ではセレクタに未対応のため、設定は適用されない。 - head + body
- 隣接セレクタを利用したハック。文法に従った記述であり、IE7とモダンブラウザ、Mac版IE5に設定が適用される。
IE6以下ではセレクタに未対応のため、設定は適用されない。 - head:first-child + body
- first-child疑似クラスと隣接セレクタを組み合わせたハック。
文法に従った記述であり、IE7とモダンブラウザ、Mac版IE5に設定が適用される。
IE6以下ではセレクタに未対応のため、設定は適用されない。 - html[xmlns]
- 属性セレクタを使ったハック。XHTMLで要素の必須属性であるxmlnsを利用している。
HTMLではxmlnsを記述する必要がないため、このハックは使用できない。
文法に従った記述であり、IE7とモダンブラウザに設定が適用される。
IE6以下ではセレクタに未対応のため、設定は適用されない。 - html[xmlns]>/**/body
- 属性セレクタと子セレクタ、コメントを組み合わせたもので、IEの未対応機能とバグを利用したハック。
文法に従った記述であり、IE以外のモダンブラウザに設定が適用される。
なお、属性セレクタを指定せず「html>/**/body」という形で記述すると、モダンブラウザの他にMac版IEにも設定が適用される。 - property /**/:value
- コメントハックと呼ばれ、IE6のバグを利用することで、Standardモード(標準準拠モード)で表示したIE6だけに設定を適用しないハック。
記述形式は文法に従ったものとなっている。 - /* \*//*/、/* \*/
- バックスラッシュハックと呼ばれ、Mac版IE5だけに適用する設定、または適用しない設定を記述することができる。
記述形式は標準に従ったものとなっている
Last Modified: $Date: 2008/04/30 16:53
Copyright © 2008. All Rights Reserved.
0 コメント:
コメントを投稿