CSS/DHTMLバグ辞典スレッド 第3版

このエントリーをはてなブックマークに追加
931908:04/03/02 22:07 ID:???
MacIE 確認済みバグ
インラインボックス化したli要素に背景色を設定すると内容物が消える(5.x)
http://cssbug.at.infoseek.co.jp/detail/macie/b035.html

すいません、もう一度修正をお願いします。
伸びているのは背景ではなくインラインボックスでした。(ボーダーも伸びる。)

あと補足も症状にあわせて修正したほうがいいんじゃないでしょうか。
932Name_Not_Found:04/03/02 22:43 ID:???
>>903
clearを指定したフロートの上下に空行ができる(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b147.html
>不具合が発生している要素の親要素がli要素の場合や
>ボーダーがあるボックスである場合にこの不具合は発生しません。

親要素のpadding-topに0以外の値を指定しても、バグが回避されました。
paddingで四辺一括指定でもいいが、padding-left,padding-right,padding-bottomではなぜか回避できない。

933Name_Not_Found:04/03/02 23:39 ID:???
http://cssbug.at.infoseek.co.jp/detail/winie/b147.html
↑このバグの「補足」のページをIEで見たら、リストマーカーが変な位置に入り込んでますね。
で、調べたらこれ、別のバグなのね。

http://cssbug.at.infoseek.co.jp/detail/winie/b111.html
先頭にフロートがあるリストアイテム要素でリストマーカーが要素内に入り込む(5.x/6.0)
>リストマーカーを持つ要素(li要素など)の内容物の先頭にフロートがあるとき、
>リストマーカーがリストアイテム要素の内部に入り込む。

でもこれ、正確には「先頭にfloat:left;を指定した要素があるとき」とすべきでないかな。
float:right;の場合には起らないでしょ?
934Name_Not_Found:04/03/03 03:42 ID:???
MacIE 確認済みバグ
インラインボックス化したli要素に背景色を設定すると内容物が消える(5.x)
http://cssbug.at.infoseek.co.jp/detail/macie/b035.html

どうやらリスト要素以外でも発生するようです。

<div style="text-align:center;">
<a href="../opera.html" style="background:red"><em>Opera</em></a>
</div>

親ブロック要素にtext-alignを指定し、孫インライン要素を含む子インライン要素に背景を指定すると発生する模様。
ちなみに子インライン要素がa要素の場合はa:hover{background:red}とかでも発生します。
935Name_Not_Found:04/03/04 00:19 ID:???
html要素にスタイルを設定できない(5.x)
http://cssbug.at.infoseek.co.jp/detail/winie/b142.html
>html要素に対して指定したスタイルはすべて無視される。
>……
>WinIE5.5、WinIE6.0の互換モードで不具合の発生を確認しました。

スタイルすべてではない。
WinIE6.0の互換モードでは例外的に有効となるプロパティがあります。
独自拡張のscrollbar-プロパティーがそれです。
html {scrollbar-face-color: lime;}
これは5.5では無視されても6.0互換モードなら大丈夫。
936Name_Not_Found:04/03/04 02:56 ID:???
リンク要素の下線より下にはみ出した部分の文字の色を変えられない(Safari1.2)

a:visited { color: purple; }
a:hover { color: green; }
a:active { color: maroon; }

<a href="">jpg</a>

jやgなどの下線より下にはみ出した部分の色が疑似要素による指定で変えられない。
下線を消しても発生する。
937Name_Not_Found:04/03/04 10:51 ID:???
>>936
a要素以外のインライン要素でtext-decoration:underline;を指定した場合は大丈夫なの?
938936:04/03/04 14:30 ID:???
>>937
a要素以外では発生しませんでした。
939Name_Not_Found:04/03/04 14:47 ID:???
Safari 確認済みバグ
caption要素を含むテーブルではcol要素に対するスタイルが効かない(S1.0)
http://cssbug.at.infoseek.co.jp/detail/safari/b008.html

Safari1.2でも確認。
またcol要素だけでなくcolgroup要素でも発生しました。
940Name_Not_Found:04/03/04 14:55 ID:???
>>936 
疑似要素でなくて擬似クラスでは。
あと、ベースラインの位置とディセントの値によるはずだから
フォント(の設計)によって結果が異なるかもね。
941Name_Not_Found:04/03/04 15:01 ID:???
2列以上を含むcolgroup要素にwidthが効かない(Safari1.2)

<table border="2">
<colgroup span="2" style="width:7em">
<tr><td>幅7em</td><td>幅7em</td></tr>
</table>
942936:04/03/04 15:18 ID:???
>>940
>疑似要素でなくて擬似クラス
すいません、間違えました。

>フォント(の設計)によって結果が異なるかも
試してみたところ、ヒラギノ系では発生しましたがOsakaでは発生しませんでした。
また斜体したり、筆記体のようなフォントにすると左右にはみ出した部分の色が変わらなくなりました。
943Name_Not_Found:04/03/04 15:36 ID:???
>>942 欧文フォントでもなりますか。それとも和文(2バイト)フォントだけ?
944Name_Not_Found:04/03/04 15:53 ID:???
>>342
あれ、Safari1.2って、font-family {'ヒラギノ明朝 Pro W3';}とか指定できるの?
 名称に日本語文字を含むフォントファミリの指定を無視する(S1.0)
 http://cssbug.at.infoseek.co.jp/detail/safari/b003.html
945936:04/03/04 16:18 ID:???
>>943
フォントによります。Times New Romanでは発生しました。
またどの部分から色が変わらなくなるかはフォントによって違うようです。
VT100だと下線どころか中心から下半分の色が変わりません。
>>944
Hiragino Maru Gothic Pro
Hiragino Kaku Gothic Pro
Hiragino Kaku Gothic Std
Hiragino Mincho Pro
と指定するとヒラギノになります。W3といった文字の太さは指定できませんが。
946Name_Not_Found:04/03/04 17:01 ID:???
>>944
面倒だが,エスケープするという手もある。
font-family: "\30D2\30E9\30AE\30CE\660E\671D\20Pro", serif;
947Name_Not_Found:04/03/04 18:16 ID:???
MozillaFireBird0.7(正式版)で確認したバグらしき挙動です。

HTML
<html>
<head></head>
<body>
<div class="menu">
<div class="content">

</div>
</div>
<div class="foot">

</div>
</body>
</html>

CSS
.menu {float: left; width: 50%;}
.content{margin-top: 1em; margin-bottom: 1em;}
.foot{clear: both; margin-top: 5em;}


以上のように記述すると、<div class="foot">の部分に5文字分マージンが
入るはずなのですが、どうしてもマージンが入りません。
IE6SP1、Opera7.23ではマージンが入りました。また、標準モード/互換モード両方でテストしてみましたが、違いはありませんでした。
ソースはかなり省略してますが、これ以外にこの3つの要素に設定しているプロパティは背景色、文字色、ボーダーのみです。
説明不足かもしれませんが、どなたか確認をお願いいたします。
948Name_Not_Found:04/03/04 18:30 ID:???
>>947
それはIEとOperaのバグではないかと。

clearを指定した要素ではフロートに対して上マージンを設置する(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b141.html
clearを指定した要素ではフロートに対して上マージンを設置する(6.0/7.x)
http://cssbug.at.infoseek.co.jp/detail/opera/b076.html
949Name_Not_Found:04/03/04 18:32 ID:???
>>941
col要素でもダメですね。この辺はバグが多そうに思います。
という訳で、以下の5パターンで、他のブラウザでもどうなるか
試してみました。

1. <colgroup span="2" style="width: 7em">
2. <colgroup style="width: 7em"><col span="2"></colgroup>
3. <colgroup style="width: 7em"><col><col></colgroup>
4. <col span="2" style="width: 7em">
5. <col style="width: 7em"><col style="width: 7em">

Safari1.2
 → 3, 5 だけ大丈夫。1, 2, 4 はすべてダメ。
   (span属性があるとダメみたい)
MacIE5
 → 4, 5 だけ大丈夫。1, 2, 3 はすべてダメ。
   (colgroup要素がダメみたい)
Opera6
 → 5 は大丈夫。
   4 は1列だけ効くが2列目以降ダメ。
   1, 2, 3 はすべてダメ。
   (colgroup要素がダメで、span属性は無視?)
Mozilla
 → 1, 2, 3, 4, 5 すべて全く問題なし。
   (さすがと言うべきか)

ま、色んなブラウザを考えると 5 の書き方しかない訳ですが、
WinIE や Opera7 などはどうでしょう?
950Name_Not_Found:04/03/04 18:54 ID:???
次スレッドのテンプレート、これでいい?

CSS(とDHTML)のバグ報告、お待ちしてます。
※報告の際はOS・ブラウザ名とそのヴァージョンを明記して下さい。
 再現条件をつきとめるため、必要に応じてソースを出して下さい。
これまでのバグは下記に登録されてます(前366◆E3CSS.J95U/◆B7TCOttEさんに感謝)。
【CSSバグリスト@CSSバグ辞典スレッド】 http://cssbug.at.infoseek.co.jp/
 プロパティ別にバグを調べたいときは――
 ・K@tsukun's PAGE! > CSS対応状況表 (の各プロパティ「関連バグ情報」)
  http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
 ・CSSプロパティ別トラブルの索引
  http://dhr.at.infoseek.co.jp/stylebug_index1.htm

【バグ説明・回避法などを載せた参考サイトへのリンク】
 http://cssbug.at.infoseek.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/DHTMLバグ辞典スレッド 第3版
  http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
【関聯スレッド】
・/* CSS・スタイルシート質問スレッド*/
 http://web2ch.s31.xrea.com:8080/?CSSLog
・代替スタイルシートに萌え〜
 http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
 http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50

その他あれば、>>2-5あたりで。
951Name_Not_Found:04/03/04 19:11 ID:???
>>948
ありがとうございました。考えていたのとまったく逆だったようです。
勉強不足をお詫びいたします。
952Name_Not_Found:04/03/04 21:58 ID:???
CSS バグリスト、未確認 [2-603]
> ブロック化したアンカーの範囲が内容物の部分のみになる(IE5.5)
ですが、IE5.5、IE6.0 両方で確認しました。

再現条件は <div id="navi"><ul><li><a href・・・・ /a></li></ul></div> だとして、
div が float であることです。
なお、a 要素に width: 100% を設定すると回避できるとありますが、
a 要素に padding が設定してあると Gecko 系や Opera で padding 幅分
親 BOX をはみ出します。

また、IE であっても li が複数ある場合、
マウスポインタの位置によってリスト下のマージンが消失したり現れたりします。

こちらで検証した回避策は、ブロック化した a 要素に
position: rerative を指定する事です。

ただし、この策にも欠点があり (IE5.5 の場合・・・・IE6.0 では OK)
white-space: nowrap が指定してあると、ブロック化した a 要素の
頭が padding 分だけ描画されません。
どうしても white-space: nowrap を指定したい場合は
a 要素の親に padding、または border を指定します。

検証ソースは次のレスに記載します。
953952:04/03/04 22:02 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>バグチェック - CSS</title>

<style type="text/css">
#Test { width: 50%; float: left; color: #000; background-color: #666;
border-style: solid; border-width: 1px; border-color: #000;
/* white-space: nowrap; */
}
ul { color: #000; background: #666; }
li {
/* padding: 1px; */
/* border-style: solid; border-width: 1px; */
}
h2 {
/* padding: 1px; */
/* border-style: solid; border-width: 1px; */
}
a { display: block; text-decoration: none; color: #000; background: #CCC;
border-width: 1px; border-style: solid; border-color: #080;
padding-left: 1em;
/* position: relative; */
/* width: 100%; */
}
a:hover { color: #000; background: #FFF; border-color: #F00; }
</style>
954952:04/03/04 22:03 ID:???
</head>
<body>
<h1>A 要素のブロック化におけるバグ</h1>
<div id="Test">
<h2><a href="#">TEST</a></h2>
<ul><li><a href="#">JumpJump 1</a></li><li><a href="#">Jump 2</a></li></ul>
</div>
</body>
</html>


以上。
955Name_Not_Found:04/03/04 22:43 ID:???
caption要素があるとcol要素およびcolgroup要素にtext-alignが効かない(MacIE5.x)

<table>
<caption>text-align:rightを指定</caption>
<col span="2" style="text-align:right;width:7em">
<tr><th>右寄せ</th><th>右寄せ</th></tr>
<tr><td>右寄せ</td><td>右寄せ</td></tr>
</table>
956Name_Not_Found:04/03/04 22:47 ID:???
>>955
効かないのが正当。captionが無ければ効くのならそっちがバグ。
957Name_Not_Found:04/03/04 22:51 ID:???
colgroup要素にtext-alignが効かない(Safari1.2)

<table>
<colgroup style="text-align:right;width:7em"><col><col></colgroup>
<tr><th>右寄せ</th><th>右寄せ</th></tr>
<tr><td>右寄せ</td><td>右寄せ</td></tr>
</table>
958955,957:04/03/04 23:05 ID:???
>>956
そうだったんですか。
align属性があるんで勘違いしてました。
というかcaption要素があると効かなくなるのはalign属性でした。
お騒がせしてすみませんでした。
959955,957:04/03/04 23:15 ID:???
tbody要素とtfoot要素の背景を塗る場所を間違える。(MacIE5.x)

tfoot、tbodyの順に背景が塗られてしまう。

<table>
<thead><tr><th>thead</th><th>thead</th></tr></thead>
<tfoot style="background:red"><tr><td>tfoot赤</td><td>tfoot赤</td></tr></tfoot>
<tbody style="background:blue"><tr><td>tbody青</td><td>tbody青</td></tr></tbody>
</table>
960952:04/03/05 10:36 ID:???
>>952
追加です。
div を absolute 指定した場合 (float 指定無し) も発生します。
回避方法は text-align が right 以外の場合のみ同じです。
text-align: right での回避は今の所不明です。

なお、>>952 に書き忘れましたが OS は Win 系 です。
961Name_Not_Found:04/03/05 14:22 ID:???
新スレッド、立てておきました。

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

こちらもまだしばらく参照できた方がいいわけですから、
故意に埋めないで自然に沈むまま残しておいて下さい。
962Name_Not_Found:04/03/05 22:01 ID:???
>>949
WinIE6
 →1〜5 すべて問題なし。
  (意外?)
Opera7
 →1,4,5は問題なし。2,3はダメ。
  (colgroup属性がcol属性の子を持ってる場合がダメ)
963Name_Not_Found:04/03/06 04:56 ID:???
>>949 の件を検証していて気づいたことですが、

<table border="1">
<colgroup style="width:30em"></colgroup>
<colgroup style="width:7em"><col><col></colgroup>
<tr><td>30em</td><td>7em</td><td>7em</td></tr>
</table>

この場合、一列目は30em幅で二列目と三列目は7em幅になる
はずです。実際、Mozillaではそのように正しく表示されます。

MacIE5やOpera6は >>949 にある通り、colgroup要素への
列幅スタイルが全く効きませんので、全てauto幅で表示されて
しまいます。

つづく
964Name_Not_Found:04/03/06 04:57 ID:???
つづき

問題はSafariで、なんと一列目と二列目が7em幅で三列目が
auto幅になってしまいます。実はこれ、

<colgroup style="width:30em"><col></colgroup>
<colgroup style="width:7em"><col><col></colgroup>

と書くと正しく表示してくれます。ここから、Safariは、

「colgroup要素があると、そこに指定されているスタイルを、
それ以後に出てくるcol要素に割り当てていく。その後、
各col要素に従って各列のスタイルを決める」

というアルゴリズムになっているのではないかと考えられます。
つまり、colgroup/col の親子関係を見ずに、出現順序だけ見て
いる感じ。

そのため、col要素を持たないcolgroup要素があると、スタイル
の適応される列がずれてしまうんだと思います。
965Name_Not_Found:04/03/08 19:07 ID:???
新スレッド

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

CSSバグリスト@CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/index.html
966Name_Not_Found:04/03/22 14:47 ID:???
さっさと埋めてHTML化させたほうがいいんじゃないのか?
967Name_Not_Found:04/03/23 00:54 ID:???
じゃあ埋め。
968Name_Not_Found:04/03/23 09:43 ID:???
新スレッド

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

CSSバグリスト@CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/index.html
969Name_Not_Found:04/03/29 03:51 ID:???
復活!
970Name_Not_Found:04/03/29 10:26 ID:KUtp7yco
特に問題なさそうだ
971Name_Not_Found:04/03/29 10:55 ID:???
新スレッド

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

CSSバグリスト@CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/index.html
972Name_Not_Found:04/03/29 10:57 ID:???
新スレッドはこちら

CSS/DHTMLバグ辞典スレッド 第4版
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
973Name_Not_Found:04/04/29 21:02 ID:???
(゚д゚)ウマー
974Name_Not_Found:04/04/30 17:08 ID:???
(゚Д゚)ハァ?
975Name_Not_Found:04/04/30 17:19 ID:???
>>974
(゚д゚)ウメェんだよ!
976Name_Not_Found:04/04/30 17:29 ID:???
(゚Д゚)ハァ?
977Name_Not_Found:04/05/01 00:59 ID:???
ごめん
978Name_Not_Found:04/05/01 05:13 ID:???
(゚д゚)シメジ
979Name_Not_Found:04/05/01 07:48 ID:???
(゚Д゚)ハァ?
980Name_Not_Found
キノコッノーコノコゲンキノコ
エリンーギマイタケ...