表示している文字が消える？
IE（インターネットエクスプローラー）を誉めている人はおりません。
逆に、あんなブラウザはブラウザでは無いとか言えば賛同してくれる人は少なからず居るでしょう。
そんなブラウザは消えてしまうのかと言うと、減少傾向ではありますが、未だ世界中の半数以上の人は使っておりますし、日本では60％以上のシェアはあるでしょう。
使用率が100％の会社もざらにあります。
Windowsに標準搭載されている事や、使い慣れている人が多い事や、使えない訳ではありませんので現在も圧倒的なシェアを維持できているのでしょう。
私もホームページを開設しておりますから主要なブラウザは全てインストールしておりますが、普段使用しているのはIE（インターネットエクスプローラー）です。
大部分の人がそれで見ているのですから、このブラウザでまともな表示が出来なければサイトは公開出来ません。
それにしてもバグの多いブラウザで、このページを表示している場合の時に妙な現象に出会いました。
ちなみに使用しているIEは、問題が多いと言われるIE6ではなくてIE8の最新バージョンです。
こんな新しいバージョンにもバグはそのまま残っているのです。
まずは下の画面をご覧ください。（クリックで拡大）
赤で囲んだ上部は１行が抜けていて表示されておりませんし、下の部分は表示が中途半端です。
スクロールバーを動かしたり、反転表示をさせると正常な表示を行うようになります。
下の画面が反転表示させた場合です。（クリックで拡大）
IE（インターネットエクスプローラー）だけがこうなるのは確認しておりましたので、その関係であるのは判っておりましたが、最初は原因が掴めませんでした。
マイクロソフトのサイトでサポートオンラインでFIXを実行しても直りませんでしたので、検索して見ました。
同様の現象が出た人とか対策方法がボロボロ出てきました。（笑)
IE6の場合が多かったのですが、IE8でもしっかりと不具合は受け継いでいます。
CSSでbackgroundを指定して、それからフロート（float）を指定すると出るようです。
フロート（float）を全く使用しないCSSなどは無いでしょうから、修正は無理なのかと言うと対策方法が載っていました。
対処方法は色々あるのですが、多いのがwidth:100%とかheight:1%とかを親要素に指定する事です。
私は、_height:1%; と指定したら現象は出なくなったような気がします。
他のブラウザが影響を受けていたり、バージョンによっては駄目だったりするかも知れませんが、とても調べ切れません。
頭の部分のアンダーバー「_」は、IEだけに適用する場合にそのようにすると書いてありましたので、その通りにしております。
【注記】
改善されていないような気がしましたので、後日アンダーバーは削除しました。
このアンダースコアハックと呼ばれる方法は、IEのバグを利用したものなので、IE7以降は通用しないとの記載もありました。
【対処方法例】
（１）問題の出る要素を囲っている div に line-height を指定する。
（２）問題の出る要素に width または height を指定する。
（３）問題の出る要素の中の要素に position:relative を指定する。
その他のバグ
不要なスクロールバーが表示されるなどのバグは今までも経験しておりましたが、こんな致命的なバグに出会ったのは初めてでした。
これを機に、他の部分のバグ報告を調べて見ました。
どのブラウザにはバグはありますし、バグがあっても、それに遭遇する機会は少ないものです。
正しい文法で書いたつもりでも表示がおかしい場合には、ブラウザのバグでないか調べてみましょう。
バグの解説サイトは多いですし、対策方法も記載されている場合がほとんどです。
float
- 幅や高さを指定した要素ではボックスサイズの算出時にfloatを除外しない
- floatに後続するボックスの幅がfloatに合わせて短縮される
- 先行するfloatの上方に後続のfloatが置かれる
- 幅や高さを指定した要素内にあるfloatの下マージンが無視される
- floatの左右マージンが指定値より大きくなる
- インライン要素に挟まれているfloatが下にずれて置かれる
- floatの上部に祖先要素の上ボーダーを表示する
- clearを指定した要素ではfloatに対して上マージンを設置する
- clearを指定したfloatの上下に空行ができる
- floatを含むボックスのマージンが無視される
- floatの左右にある行の端がずれる
- 親要素のボックスからはみ出すボックスがfloatの下に置かれる
- コメントがfloatの位置をずらす
- p要素などをfloatにすると上マージンが消える
- floatに隣接する要素は親要素との間で上下マージンが相殺されない
clear
- clearを指定したボックスの内側上部に隙間が空く
- clearの指定が親要素にも影響する
position
- left, topが指定された要素ではright, bottomを認識しない
- line-heightが指定された相対配置要素の上ボーダー上端が消える
- 相対配置した要素へ向かうリンクのジャンプ先が移動前の位置になる
- 直後に背景色つきのhr要素がある絶対配置要素の初期位置がずれている
display
- ブロック化したアンカーの範囲が内容物の部分のみになる
- head要素と子孫要素のdisplayプロパティを変更できない
- ルビ関連要素のdisplayプロパティを変更できない
フォント、テキスト
line-height
- 全体にline-heightが指定されたページの最上部が消える
- line-heightで算出した行高を超える部分が表示されない
- 非置換インライン要素に対するline-heightの指定を無視する
letter-spacing
- letter-spacingを指定した要素内で連続したbr要素が無視される
font
- font-familyを指定した要素で文字化けする
- em単位で指定した値が文字サイズ変更後に正しく反映されない
- 見出し要素でfont-sizeを算出する際に親要素の値を参照しない
- em単位で指定した字間をbody要素の文字サイズを基準に算出する
- OpenTypeフォントを用いて2バイト文字を表示することができない
vertical-align
- line-heightが指定された要素内でvertical-alignの%値指定が正しく反映されない
- 擬似要素にvertical-alignプロパティが効かない
- vertical-alignが指定された要素を含む行が前後の行に重なる
- vertical-align:middle;の状態では置換インライン要素だけの行の高さ算出が不正
- 最も高さが大きい要素にvertical-align:bottom;を指定すると配置が狂う
white-space
- white-space:nowrap;を指定した要素の内部が表示されない
text-decoration
- 親要素のtext-decorationの効果を子要素で解除できる
background
- インライン要素のrepeat-x背景画像が1行目にしか表示されない
リスト、表
li
- ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る
- 幅が指定されたリスト要素のマージンが正しく反映されない
- 絶対配置／float状態のリストアイテム要素のリストマーカーが消える
- 先頭にfloatがあるリストアイテム要素でリストマーカーが要素内に入り込む
- パディング・幅・高さを指定したリストでリストマーカーが壊れる
- リストマーカーの番号が途中から振られる
- li要素でvertical-alignがテキストの配置に影響を与える
table
- 表の行グループ要素に指定したheightプロパティがセル要素に継承する
- 幅を指定していないテーブルでも固定レイアウトが有効
- collapseボーダーをvisibilityで非表示にできない
- 相対配置要素内のテーブル行グループ要素のスタイルが外部にはみ出す
- 固定レイアウト表で列の幅が小さくなる
- table要素の上マージンがcaption要素の上に設置される
その他
overflow
- 幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない
- overflow:scroll;等が指定された要素の背景画像が閲覧領域に対して固定されない
- overflowでスクロールバーが出るときの高さ計算が正しくない
- overflowへの対応が不完全な要素
z-index
- bodyにz-indexを指定すると子孫要素の背景指定が無視される
- z-indexを負の数にしたリンクを選択できない
form
- テキスト入力フォームの幅が文字入力時に変化する
- fieldset要素の上パディングがボーダー領域の外側に設置される
- 終了タグを省略したoption要素に続くoptgroup要素を無視する
- 背景を指定したフォーム部品で視覚スタイルが無効になる
hr
- hr要素に指定した下マージンが親要素の下マージンとして反映される
セレクタ、擬似要素、擬似クラス
- アンカーを:hover状態にすると%値指定のマージンやパディングの量が変化する
- 擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されない
- 「#」だけをセレクタとして指定すると全称セレクタのように扱われる
- 擬似要素を含む要素に後続する要素の内容物が左右にはみ出る
- :visited擬似クラスの宣言が詳細度を無視してカスケード処理される
- アンカーを:hover状態にすると親ブロックの高さが変化する
- アンカーを:hover状態にすると後続するfloatの一部が消える
- アンカーを:hover状態にするとbody要素のサイズが縮む
- アンカーを:hover状態にするとiframe要素のサイズが変化する
未分類
- １．閲覧領域からはみ出す要素がない状態でもスクロールバーが表示されることがある
- ２．body要素の内容領域をはみ出す部分がレンダリングされない
- ３．行の高さを正しく算出しない
- ４．代替スタイルシート内の指定をprintメディアに反映しない
- ５．インライン要素内のブロック要素がインライン要素のスタイルを継承する
- ６．同一ブロック内では!importantが無視される
１．WinIE6.0では、閲覧領域の幅に近い幅を持つ要素があるときに横スクロールバーが表示される場合があります。
２．WinIE6.0標準モードで発生するバグです。IE6.0互換モード及び5.5以前では発生しません。