CSS/DHTMLバグ辞典スレッド ver2.0

スタイルシートスレからきました。
問題はIE5.0/Win98で巨大空白が生じる現象です。
この問題はIE5.5/IE6.0/NS7.02/OP7.10では起こりません。

htmlソース（配置には青ボーダーを追加しました）
http://morrie.mallkun.to/kanasii/index.html
cssソース（問題に気づく前段階。IE5.0のみで問題発生）
http://morrie.mallkun.to/kanasii/tobira.css

巨大空白は#uewakuの閉じ</div>と次のブロック<div id="hizuke">の間に
生じます。要因は複合で全幅→（下がる）→右→左→右→（下がる）→全幅
という多少複雑なレイアウトも要因ですが、#uewakuのwidthとheightが
決定的な障害要因になっていることは確かです。この二つさえなければ問題は
起こらないわけですから。しかし、#uewakuからwidthとheightを取り除くと
意図したレイアウトに戻すのに悲しい手段を講じなければならないという
お話です（スタイルシートスレ）。

ちなみに多少複雑な配置計画になっているのは、
htmlの構造を文章のフローに合わせたかったからです。。
文章のフローを崩してレイアウト優先に組替えれば問題はありません。

先行するフロートの上方に後続のフロートが置かれる
http://cssbug.tripod.co.jp/detail/winie/b093.html
http://cssbug.tripod.co.jp/detail/opera/b044.html

これ、WinIEとOpera7だけかと思ったら、場合によってはNetscape7でもなるらしい。
http://pc2.2ch.net/test/read.cgi/hp/1050086156/57n
http://pc2.2ch.net/test/read.cgi/hp/1050086156/87n

>>935
いや、だから、そこでのddは「フロート」じゃないだろ。
フロートではない場合を考えれば理解が深まる、と言ったのはそういうことでもある。
ここでは物理的に無理があるし、そもそもスレ違いなんで、これ以上は書かないが。

これ以上書かないと言ったが。通りすがりの私がバグ報告以前のことでスレを汚して申し訳ない。
そのリンク先を57n-87nまで読んでみて、笑えなかった。途中で正しいことを言った奴が間違った意見に流されている。
簡単なことだが、正しくは、ddもfloat:leftして、対になるdtとddが横幅を目いっぱい使えば、57nの目的は達成される。

>>936-937
つまり、これでもいいわけだろ？　IE6・NN7で確認。
<dl>
<dt style="float:left; width:4em; clear:left;background:aqua;">長い長い長い長い長い長い名前</dt>
<dd style="/*float:left;*/ margin-left:4.5em; background:lime;">短いセリフ</dd>
<dt style="clear:left;float:left; width:4em; background:fuchsia;">短い名前</dt>
<dd style="float:left;min-width:1em; margin-left:0.5em; background:red;">セリフが２行セリフが２行セリフが……</dd>
</dl>

……と思ったら、Opera 7だけうまくゆかないや。

【MacIE5.16】
http://pc2.2ch.net/test/read.cgi/hp/1050086156/l50/115-118 より

いわゆるナビゲーションバーとしてul要素をdisplay : inlineで
使ったとき、中央寄せと背景色指定をしていると、リストの最後
のアンカーしか見えなくなる。
# で、記述があっているのかは未確認です
# 当方、Macを持っていないため、原因を最小限に絞ることが出来ないことをお許し下さい。

以下の記述でのサイト内リンクが、「最後の一つだけしかアンカーが見えない」
状態になりました。

HTML4.01Strictでも、XHTML1.1でも同様でした。DOCTYPEは両方とも
公開識別子 + システム識別子を記述しています。

>939の続き
ul.navigate{
border-style : solid none solid none;
border-width : thin;
margin : 2em 0em 0em 0em;
padding : 0.5em 0em 0.5em 0em;
text-align : center;
border-color : #000099;
background-color : #e6e6fa;
color : #000000;
}
ul.navigate li {margin : 0em 0em 0em 0em;display : inline;background-color : #e6e6fa;color : #000000;}
ul.navigate li:before {content : "[ ";}
ul.navigate li:after {content : " ]";}
a:link {color : #0000ff;}
a:visited {color : #004080;}

<ul class="navigate">
<li><a href="../hoge/index.html">hogeコーナーへ</a></li>
<li><a href="../sitemap.html">サイトマップ</a></li>
<li><a href="../index.html">トップに戻る</a></li>
</ul>

この例ですと、「トップに戻る」だけが表示されて、前の2つは
透明アンカーになっていました。一応マウスを持っていけば
ステータスバーにリンク先URIが表示されてリンクとして利くこと
は利くのですが非常に分かりづらくなります。

この場合ですと、
1. ul.navigate の text-align : center; を取る
2. ul.navigate li の background-color : #e6e6fa; を取る
のどちらかで、全てのアンカー文字列が表示されるようになるそうです。

>>940
ちょっと調べてみました。
IE 5.2.2 (Mac OS X 10.2.4)で検証。

単純化してみると、以下で症状が再現しました。
-------
ul{
text-align : center;
/*text-align : right; でも同様。*/
}
li{
display : inline;
background-color : #ffffff;
}
-------

liのbackground-colorが、
transparentまたはinheritでは、問題無し。

li要素の中にaやspanなどinline要素が無ければ、問題無し。

まとめると、
ulのtext-alignがcenterまたはrightで、
liにdisplay : inline;を指定した場合、
li要素にbackground-colorを指定するのは避けましょう。

つーことでよろしいか。

【IE5〜(Win & Mac?)】
http://pc2.2ch.net/test/read.cgi/hp/1019912046/129
ruby, rt, rb, rp {display:inline;}
とかやっても、デフォルトのスタイルを適用させることが
できなかった気がするが。

>>942
少なくとも【MacIE 5.x】ではできません。
WinIE の方の実装についての記憶が曖昧だったので
「気がする」という書き方をしました。

全称セレクタにdisplay:noneを指定するとOpera7がフリーズする。これもバグか？ｗ

（＾＾）

そろそろ次スレッド立ててもいいんでない？
テンプレート案求む。
http://cssbug.tripod.co.jp/index.html は必ず>>1に入れるのは当然として。

>920　→　WinIE096, Mozilla052
>930, >933　→　WinIE097
>939　→　MacIE035
>942　→　MacIE035, WinIE098
>944　→　Opera046
それぞれ追加しました。

>>938が「Opera 7だけうまくゆかない」のはバグか？
>>930-934のバグには発展形も。
b097には「幅や高さを指定した要素の下に」とあるが、「要素の中」でもなるらしい。
　http://pc2.2ch.net/test/read.cgi/hp/1050086156/23-39
また幅や高さを指定しなくてもなる場合もあるとのこと。
#uewaku { background-color: #333000; color: #b7a800; }
#migiue { float:right; width:50%;　text-align: right;}
#hidariue {height: 41px;}
<div id="uewaku">
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
</div>
>#uewakuにwidthもheightもないのに、もう訳がわかりません。
>もちろんIE5意外ではきちんと表示されます。

【テンプレート案】CSS/DHTMLバグ辞典スレッド ver3.0
CSS/DHTMLのバグ報告、お待ちしてます。
報告の際はブラウザ名・ヴァージョンを明記してください。
いままでのバグは下記に登録されてます（366さん有り難う）。
【CSSバグリスト＠CSSバグ辞典スレッド】
　http://cssbug.tripod.co.jp/index.html

【バグ説明・回避法などを扱っているサイトへのリンク】
　http://cssbug.tripod.co.jp/link.html
【過去ログ】
・CSS、DHTMLバグ辞典スレッド
　　http://mentai.2ch.net/hp/kako/987/987003410.html
・CSS/DHTMLバグ辞典スレッド ver2.0
　　http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
【関聯スレッド】
・/* CSS・スタイルシート質問スレッド【18】*/
　http://pc2.2ch.net/test/read.cgi/hp/1050086156/l50
・代替スタイルシートに萌え〜
　http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
　http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・CSSでイケてるデザインサイト 11
　http://pc2.2ch.net/test/read.cgi/hp/1050201241/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50

その他あれば、>>2-5あたりで。

http://cssbug.tripod.co.jp/link.html に追加してくれませんか。

スタイルシート（CSS）のトラブル、バグ集
　http://dhr.tripod.co.jp/stylebug2.htm

【MacOSX 版 (Carbon) IE5.1】
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/10c.html#day26num02
1.
vertical-align : inherit 以外の正当な値;
任意の正当なプロパティ: inherit;
…という値とプロパティの組が、単一のセレクタブロック内に記述された CSS 。（別のセレクタ内でそれぞれ別個に指定してる場合は OK ）

2.
このセレクタの適用先となる要素が HTML 中に出現する

上記の条件が満たされるページを表示しようとすると、MacOSX 版 (Carbon) の IE5.1 はクラッシュする。ただし Classic MacOS 版 IE 5.1, IE5.0 は平気。

【MacIE5.0/5.1〜】
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/09a2.html#day06num08
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/05c.html#d30n04
>position:fixed を指定すると、その要素自体や子要素での「マウスオーバー効果」
>は、すべて消失するです。リンクアンカーに触れてもマウスポインタは指の形には
>ならないし、 title 属性のポップアップも出なくなるし、 a:hover 疑似クラスの
>スタイルも反映しませぬ。ステータスバーのリンク先 URL 表示も出ません。ただ、
>クリックは可能だからリンクは飛べますヨ。
（MacIE5.0ではすこしでもスクロールしてしまうとクリック不能。5.1〜は大丈夫）

【MacIE5.1.4】
float されたブロックの text-align:centerが効かない。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/MacIE5_float_textAlign/

【MacIE5】
overflowプロパティにvisible以外の値が指定された要素が表示されない(IE5)
http://cssbug.tripod.co.jp/detail/macie/b013.html
これについて下記が詳しい。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/10c.html#day25num04
・body, div, ul, ol への overflow は、 visible/auto/scroll/hidden/inherit すべて一応 OK です。
・ul, ol は、overflow: auto かつ width/height の明示無しでも、常にスクロールバーが出ちゃいます。
また、
>これを回避しつつ「疑似フレーム」をデザインするならば、必要がなくてもとりあ
>えず div 要素で囲み、それに対して overflow: auto なりを指定しなきゃダメと
>いう状態っす。
とのこと。

DHTML【MacIE5】
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/01c.html#d23n01
>document.createElement() で a 要素を生成したら、なるべく速いトコ
>親要素（親ノード）に挿入しないと、IE が死にやすくなる。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/02c.html#d22n02
>どうやら、input 要素を createElement して type プロパティを与えよ
>うとすると
>MacIE5.1.3 (for OSX / Carbon) は JavaScript エラーのダイアログが
>出るです。んで、構わず他のサイトの巡回を続けてると、だいたい 10 分後
>までにクラッシュしちゃうです…。

【MacIE5】
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/niaou_float_div/test.html
float 指定の h1 の直後につづく div ブロック全体が、あたかも置換ブロックであるかのように回り込む

【MacIE5】
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/02c.html#d26n02
画像ファイル呼び出し系のプロパティをユーザー CSS に書いても反映しない

【MacIE5】
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/08a.html#day01num02
"position: relative または absolute" とした全要素（疑似クラス含む）におい
て、下線 (underline) が表示できなくなるバグがあるです。つまり、「あらかじめ
position を relative に」したアンカーは、リンク下線が容赦なく消えるちう案
配〜。これの影響範囲は position 指定がされた要素の匿名インラインのみ。子要
素・孫要素の下線は消えない。

【MacIE5】
font-size:middle で米粒化
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/06c.html#day28num01
>取り得ない値 middle に反応して、しかも超絶米粒文字で表示しちゃう MacIE5

【MacIE】
marginプロパティで値を一括指定すると無視される(IE4.1)
http://cssbug.tripod.co.jp/detail/macie/b022.html
これはMacIE5でもなるとのこと。以下参照。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/03b.html#n2001-03-20-02

【MacIE5】
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/09a2.html#day06num05
「CSS2では16進数に続く空白類文字が一つだけ無視される」はずなのに、
>MacIE5 はこの無視すべき空白を無視できてない模様。 \70osition と書いたら
>解釈して位置固定表示になった。

スタイルシート内でバックスラッシュの直後にある文字が無視される(IE5)
http://cssbug.tripod.co.jp/detail/macie/b009.html
これへの追記が下記にある。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/05b.html#d12n01
文字コードが ISO-2022-JP の時――
>「◆」には 16 進数 0x22 が含まれますが、これを MacIE5 はダブルクオート
>記号 " だとカンチガイする模様。
とのこと。これは「バックスラッシュの直後」であるか否かは関係なしに起こる。

【MacIE】
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#import
@import url("y.css"); /* ｢"｣で括るとMacIE4.5は認識しない */
@import url('z.css'); /* ｢'｣で括るとMacIEは認識しない */

>>951-957
乙。

【MacIE】
marginプロパティで値を一括指定すると無視される(IE4.1)
http://cssbug.tripod.co.jp/detail/macie/b022.html
CSS2対応状況ガイド：margin一括指定
http://www.zspc.com/documents/css2/box/margin.html
Macintosh版 IE 5.0：[○]
・「margin: auto」と指定した場合、blockquote要素・ul要素・ol要素はセンタリングされない。
・「margin: 50px auto」のように指定した場合、table要素はセンタリングされない。
・map要素には適用されない。
・caption要素には適用されない。
・fieldset要素には右のマージンが適用されない。

すまぬ、一部既出だったね。>>956の二番目もか。

表要素を margin: auto; でセンタリングできない(IE5)
http://cssbug.tripod.co.jp/detail/macie/b002.html

ちなみに個別指定で
ul {margin-left;auto; margin-right:auto;}
としてから
li {text-align:center;}
とすると、WinIE6、Netscape7、Opera6では綺麗にセンタリングしてくれるが
MacIEだけはリストマーカーがテキストと一緒に中央揃にならず、
左端にリストマーカーだけ離れて表示されて格好悪くなる罠が。
対処法は、見つかってない。

>>938が「Opera 7だけうまくゆかない」のはバグですか。

IE6(Win)のみでしか確認していないんですが、
見出し要素（h1とかh2とか）に対してfirst-letter擬似要素を適用させると、
後続するブロック要素のboxから要素内容が飛び出るんです。それも左右。
現象が起きる時と起きないとき（ブロック要素の並べ順によって違う）があってよくわかりません。
互換モード標準モード共に試しましたが、どちらでも起きるようです。
「同一要素を繰り返して置いたときにその要素が次第に左へ寄っていく」ってIEのバグかと
思ったんですが、左右から飛び出ちゃうので違うのかと。

[HTML]
<h1>foo</h1>
<p>hogehogehogehoge</p>
<h1>bar</h1>
<p>hogehogehogehoge</p>
[CSS]
h1:first-letter {color:#ffa500;}
p{margin:2em;background:#ffddcc;}

バグなのか表記の仕方が間違っているのか、対策等あったら教えて下さい。

>>963
このソースだけでその現象起きる？
俺も見出しにfirst-letter使うけどそんなことなかったけどなあ。
他のスタイルが影響してると思うんだけど…。

>>963-964
漏れの環境でも例示されたソースを
表示してみたら状況が再現されたよ。

　　 ∧＿∧
　　（　　＾＾ ）＜ ぬるぽ（＾＾）

　　 ∧＿∧
　　（　　＾＾ ）＜ ぬるぽ（＾＾）

フロートの後続フロー制御を設定したbr要素が親要素に包含されない(IE6)
http://cssbug.tripod.co.jp/detail/winie/b079.html
対処法として
「または、親要素の幅を明示（widthプロパティを具体的な値で指定する）することでも回避できます。」
とあるが、これは下記に見る通り、IE5.0では別のバグを生じさせるらしい。
　http://pc2.2ch.net/test/read.cgi/hp/1050086156/28
　http://pc2.2ch.net/test/read.cgi/hp/1050086156/32
つまり、登録済の次のバグのことですが――それにしても註記は要りませんか。
　サイズの大きいフロートの上に空白領域が発生する(5.0)
　http://cssbug.tripod.co.jp/detail/winie/b097.html

h2:first-line,h3:first-letter{font-size:170%}
のように、擬似要素の指定をまとめて行うと
WinIE6は最後に記述した擬似要素にしかスタイルを反映しないようだ。
別々に書けば問題は起こらない。

>>969 その記述で最後の疑似要素は効くの？　変だな。

擬似要素と中括弧の間に空白類文字を置かないと擬似要素が認識されない(IE6)
http://cssbug.tripod.co.jp/detail/winie/b055.html

>>970　実際にはタブが入ってるんだけど書き込むときに無効になったらしい……。

……ていうかまさに>>970のバグだ_|￣|○
カンマの直前にタブ置いたら複数同時に指定しても反映された。
お騒がせしました。

つまり>>970のバグへの補遺ってことだね。>>972
まとめると、
擬似要素と中括弧の間に、またセレクタをグループ化する際はカンマの前に空白類文字を置かないと擬似要素が認識されない(IE6)

背景やボーダーがブロック全体に表示されない
http://cssbug.tripod.co.jp/detail/nn4x/b010.html

いまさらNN4のこと言ってもだけど――。
対処法に「要素の幅やマージンを指定すること」とあるけど、
「borderとマージンを共に指定する」のが有効だと思った。
cf. http://www.hajimeteno.ne.jp/stylesheet/actually/bgcolor.html#5
　　http://www.hajimeteno.ne.jp/stylesheet/actually/border.html#4

新スレッド立てました。

CSS/DHTMLバグ辞典スレッド 第３版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

こちら旧スレッドも参照したいので、埋めたりせず自然に沈むに任せてください。

>>961については詳しくは/* CSS、スタイルシート質問スレッド【6】 */ の
239,253,261,267,271-272あたりに出てます。
http://pc.2ch.net/hp/kako/1011/10113/1011358982.html

Netscape6.2の問題でもあるらしい。
>ボックスモデルを考えると、どちらかといえば
>マーカーごとセンタリングされてしまうことの方が
>仕様的にはバグっぽいように思えます。
との意見もあるが、どうか。

>963 WinIE099に追加。
>968 WinIE079を修正。
>969 WinIE055を修正。
>974 NN010を修正。
>976 これから…。

>>977
>>974 NN010を修正。

修正されてないみたいですけど、漏れですか。

あ、一応修正されたのか。更新履歴に出てないだけで。
でも、バグへの対処法は「マージンを指定すること」ではなくて
「マージンとborderを“共に”指定すること」なんですよ。
border無しで背景色だけ指定したブロックにマージンを指定しても無効でして。
cf. http://www.hajimeteno.ne.jp/stylesheet/actually/bgcolor.html#5
>具体的には、「margin」プロパティを指定（必要なければ幅０に）、「border」
>プロパティを指定（必要なければ線種noneに）することで、諸処の不具合を多少
>押さえながら、行間を指定し、更に綺麗に背景色を指定することが可能になりま
>す。上記の「margin」「border」の何れが欠けても、前後の要素までに影響を及
>ぼすこととなりますので注意が必要です。

>>976
MacIEの方は「CSS仕様通り」に変更しました。
>>979
もう一度修正してみました。

WinIEが一番バグ多いのか……

>>981
なにを今更。