CSS/DHTMLバグ辞典スレッド【第５版】
※報告の際はOS・ブラウザ名とそのヴァージョンを明記して下さい。
再現条件をつきとめるため、必要に応じてソースを出して下さい。
第４版レス314までのバグは下記に登録済み（前々366◆E3CSS.J95U／◆B7TCOttEさんに感謝）。
【CSSバグリスト＠CSSバグ辞典スレッド】
http://cssbug.at.infoseek.co.jp/index.html
（もうずっと更新休止、誰かwikiででも引き継がないか？）
プロパティ別にバグを調べたいときは――
・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
【過去ログ】
1 http://mentai.2ch.sc/hp/kako/987/987003410.html
2 http://pc2.2ch.sc/hp/kako/991/991666454.html
3 http://2ch-library.com/hp/1050844510.html
4 http://pc8.2ch.sc/test/read.cgi/hp/1078463560/l50
【関聯スレッド】
・/* CSS・スタイルシート質問スレッド*/
http://web2ch.s31.xrea.com/?CSSLog
・代替スタイルシートに萌え〜
http://pc8.2ch.sc/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
http://pc8.2ch.sc/test/read.cgi/hp/1019912046/l50
その他あれば、>>2-5あたりで。
http://www.ironhearts.com/diary/archives/000829.html
あと第４版の過去ログ、どこかで読めないか？
保存してる人、提供求む。
CSS Hack集
http://www.jaist.ac.jp/~m-tamura/article/web/css/csshack
"通"御用達、CSSハック
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm
ブラウザ別CSSハック一覧表
http://codeweb.seesaa.net/article/7658025.html
GoodCSSHack
http://www.akatsukinishisu.net/wiki.cgi?GoodCSSHack
IE 7 用の CSS ハック
http://www.lucky-bag.com/archives/2006/02/ie7-css-hack.html
http://www.lucky-bag.com/archives/2005/10/demise_of_hacks.html
http://www.odysseygate.com/mt/archives/000603.php
>（もうずっと更新休止、誰かwikiででも引き継がないか？）
Wikiなら管理してもいいですけど、そこを詳しく。
まあWikiじゃなくても頑張れば出来そうだけど・・・
Wikiだと管理人以外が書き込めて、加筆修正もしやすいかな、ってだけ。
そういえば肝心なのが載ってなくておかしいな、とは思ったんだが。
と記述されているね。
聞かなくても、問題のサイトを見れば更新履歴が出てるでしょ。
最終更新は、「2004-11-29」だと。
じゃあWikiかな・・
最終更新以降の報告、結構あるんですねぇ。
牛歩でもいいから、進めてくれると助かる。
Wikiなら皆で手伝ってあげることもできるし。
うん、ありがとう。
PukiWikiを使うことにしたよ。今SKINをいじってます。
DNS浸透したら報告しますんで…
各バグ項目が検索に引っかからないのではないかが、不安かな。
http://makimo.to/2ch/index.html にも入ってないし。
モリタポか●を使えばDATを取得できると思う。
それをDAT2HTMLなどのツールを使ってHTML化して閲覧するとか…
「このスレッドは過去ログ倉庫に格納されています」ってけど、
倉庫のどこに格納されてるんだか、ＵＲＬすらわからんし。
ttp://with.her.jp/sonota/1078463560.html
保存させて戴きましたので、消された後もお求めあらば提供致します。
http://cssbug.at.infoseek.co.jp/detail/winie/b172.html
どうやらフロートに関係なく発現する。
<div style="margin:0; border:0; padding:0; background:yellow; width:4em;">
<div style="width:2em; background:blue;margin:1em;">中</div>
<div style="margin:1em; background:aqua;">下</div>
</div>
cf. http://pc8.2ch.sc/test/read.cgi/hp/1144504306/402-418
ややこしくてよくわからん。誰か整理して。
>>10
前スレの315から斜め読みしてみたけど、ホントに整理しないと
どれが新規のバグなのかよくワカラン。
>>15
mod_rewrite で実現できました。
リンクの参照先など不具合があれば報告よろしくです。
というわけでぬるぽ。
ttp://cssbug.paddin.com/
トップページの最下部「過去ログ」のことで質問。
倉庫格納されて見られない第３版と第４版の過去ログを参照可能にしたいんで、
そちらのサーバーにアップロードしてリンクを張れますか。
第３版は>>1に、第４版は>>19に、それぞれ保存先ＵＲＬが出てます。
ttp://cssbug.paddin.com/?plugin=attach&refer=Home&openfile=1050844510.html
ttp://cssbug.paddin.com/?plugin=attach&refer=Home&openfile=1078463560.html
DAT2HTMLを用いて読めるようにしました。
こんな感じでいいのかな。
とりあえず新規に報告されたバグを抽出しないか？
DNSに「浸透」なんて言葉を使う人間に聞き返しても無駄だと思うよ。
設定をする人間は最大でどのくらいかかるか断言できるから。
p:first-letter {
margin-left: 1em;
}
Firefox 1.5でa要素にマウスカーソルを重ねるとmarginが無効になる。
仕様？
これとは違う？
http://cssbug.at.infoseek.co.jp/detail/mozilla/b044.html
http://cssbug.at.infoseek.co.jp/detail/mozilla/b045.html
tableのborderが、非表示を指定した箇所にまで表示されることがある。
http://pc8.2ch.sc/test/read.cgi/hp/1144504306/947-949
・MacOS10.4+safari2.0.1でも再現
・tableのセルが2行以上で、
border:noneにしているセルを
colspan属性で結合している状態だと再現できます
ソースと結果画面（スクリーン・ショット）と出しといてくんないかな。
33のリンク先は倉庫入りになるし。
tableのborderが、非表示を指定した箇所にまで表示されることがある。
環境：MacOS10.3.9+safari1.3.2
ソース：
css↓
table{border-collapse:collapse;}
td{border:1px solid}
td.noborder{border:none;}
html↓
<table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td colspan="2" class="noborder">2-2+3 border:none;</td></tr>
<tr><td>3-1</td><td colspan="2" class="noborder">3-2+3 border:none;</td></tr>
<tr><td>4-1</td><td colspan="2" class="noborder">4-2+3 border:none;</td></tr>
<tr><td>5-1</td><td>5-2</td><td class="noborder">5-3 border:none;</td></tr>
<tr><td>6-1</td><td colspan="2" class="noborder">6-2+3 border:none;</td></tr></table>
キャプチャ：
(p)ttp://homepage3.nifty.com/catfood/up/src/up4881.gif
win2000sp4+firefox1.5.0.2のキャプチャ↓
(p)ttp://homepage3.nifty.com/catfood/up/src/up4880.gif
safariのほうは、5-3のtdの上下にborderが表示されてしまいます。
・MacOS10.4+safari2.0.1でも再現
・tableのセルが2行以上で、
border:noneにしているセルを
colspan属性で結合している状態だと再現できます
バグ辞典wikiに書き込んでみたので気になるところがあれば
じゃんじゃん訂正してください。
http://cssbug.paddin.com/
（・∀・）ナイス!!
GJ
そういえばwikiもできてたんだっけ。
そのwikiは既存のまとめサイトの内容を移したりしないん？
それは既存の分も移した方が、追記や修正もできていいんだけど、
作業が面倒だよ。手伝ってあげられるの？
＞ 作業が面倒だよ。手伝ってあげられるの？
確かにそうだとは思うけどさ、その前に著作権の壁があるじゃないか。
丸写しで良いならいくらでも手伝いたいが。
画像も含めて、あれ作るの相当労力要ったろうし、
勝手にやっていいものか分からん。
ここ見ているなら幸いなんだけど・・・
↑「サイト全体を収録したアーカイブ」も配布してるし、
元は２ちゃんのスレッドなんだから、コピーレフトでいいんでないの？
それに伴ってタイトルも変更したくなった時は、困らないかな？
今でもＵＲＬが長すぎるけど。
２ちゃんねるで書き込むと「ＥＲＲＯＲ：長すぎる行があります！」になる。
http://cssbug.paddin.com/Safari%20%28KHTML%29/table%A4%CEborder%A4%AC%A1%A2%C8%F3%C9%BD%BC%A8%A4%F2%BB%D8%C4%EA%A4%B7%A4%BF%B2%D5%BD%EA%A4%CB%A4%DE%A4%C7%C9%BD%BC%A8%A4%B5%A4%EC%A4%EB%A4%B3%A4%C8%A4%AC%A4%A2%A4%EB.html
あくまで個人で使う目的じゃないと駄目なわけで転載したら
普通に著作権の侵害。
2chの情報を元にして制作した「まとめサイト」でも結構著作権のハードル高いんだよね。
俺は専門的な知識がないので誰か詳しい人に聞きたい。
旧まとめサイトのアドレスにメールを出して許可を取るのが先だね。
それで音信不通だったら、またそのとき検討すれば。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b052.html と
ttp://cssbug.at.infoseek.co.jp/detail/winie/b078.html とかは
関連バグというよりは同じバグだよな。
もしWikiに移行するならそういうところまとめちゃってもいいんじゃないか？
確かにそうだね…orz
これはPukiWikiの仕様なんだけど、どうにかならないかな。
例えば、ページ名は「Safari (KHTML)/バグ001」とかにして
そのページの最初のレベル1の見出しを
「tableのborderが、非表示を指定した箇所にまで表示されることがある」
のようにつけて、
各ユーザエージェントの目次のページは自作プラグインを使って一覧表示するようにすれば
ページ名も短縮できるし、目次もつくりやすくなるかなあ。
自作プラグインは、ls2_1を使って
&ls2_1(,title_number=1);
で、レベル1の見出しまで表示してくれそうな気ガス。
確認済みのバグと未確認のバグを分けるにはもう1階層必要かな？
そうすると未確認→確認済みに移動させるとき面倒？？
アドバイスありがとう。
なんとか title.inc.php というプラグインを自作できたよ。
書式は、「 #title(タイトル文字例) 」で大丈夫な筈…
不具合とかありそうな予感なんですが、試してみてください。
※これに伴い、いくつかのファイルをリネームしちゃいそうです。ご了承ください。
じゃあメールしてみるよ
プロパティー別に調べられる索引（>>1に挙がってるみたいな）と
連動できる体裁があるといいんだけど、難しいかな？
注文つづきで悪いけど、早いうちでないと後になってでは大変かもしれないから。
それって普通に索引のページを新規に作ればいいんじゃﾏｲｶ？
お疲れさま。
ＵＲＬをd20040809r335.htmlみたいにレスの日附と番号に拠ったものに変更したんですね。
すると、一つのレスで複数のバグを含む報告は、どうやって登録すればよいですか。
あまり細かいこと述べても煩瑣になりますが、凡例が要るかも？
そこは工夫汁
それと、旧まとめサイトの内容もwikiに移行して引き継ぐつもりなら
番号（ＵＲＬ）の振り方も同じにした方がよくない？ どうかな。
ファイル名の付け方って難しいな。
もしリネームするなら恒久的なファイル名を付けたいし、何か良い案を考えないと。
というわけでよろしく>>63
> 古いシステムに対する要求と新しいシステムに対する要求を分離しておくことはとても有益です。
>
> これはURIのよい出発点でもあります。
> もしドキュメントが何らかの形で日付を持っているなら、たとえそれが先々まで
> 利用されるようなものであっても、日付はよい出発点になります。
（クールなURIは変わらない -- http://www.kanzaki.com/docs/Style/URI.html）
これを参考にして考えてみよう。
バグを発見、もしくは報告された日付を、バグ辞典に登録された登録日とすれば自然なURIになるんじゃないかな。
例えば [2006-05-10] にする。同日に複数の登録も考えられるので [2006-05-10_1] 、[2006-05-10_2] ...といった
感じで作れば結構恒久的なURIを設計できるはず。
件名による分類は避けるべきだと思うな。件名は後に変更される可能性があるからね。
ブラウザごとにb151.html、b152.html、……と作成順に数字振ればいいぢゃん？
しかしそれだと、
b129.html
b130.html ←このファイルを削除した
b131.html
こういう場合困らないか？
やはり管理しにくい？
ありがとう…。参考にします。
http://cssbug.paddin.com/Internet%20Explorer/Windows%C8%C7/d20060504_1.html
↑これは、背景色の問題ではなく、
画像の高さによって親要素の行高まで拡げられてしまったのでは。
このスレッドで検討してから登録すべきだったね。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b052.html
「コメントの挿入」ボタンを押すと、HTTP404未検出になる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><style type="text/css">
#overflow { overflow:auto; width:5em; height:5em; }
#overflow .rel { position:relative; }
</style></head>
<body>
<div id="overflow">
<p>あああああああああああああ
<p class="rel">いいいいいいいいいいいいい
<p class="rel">ううううううううううううう
<p>えええええええええええええ
</div>
</body>
</html>
position:relative要素がoverflow:autoを無視して固定配置に。
夜も眠れナイよ
とか調子を見ながら適当にあわせるんだろうか？
とかやったら随分直った、感動
症状：
letter-spacing に inherit を共存させるとクラッシュする
以下の環境で確認：
iMac G3 500MHz OS 10.3.9
iMac G5 1.8GHz Mac OS 10.4
Internet Explorer:mac 5.2.3 (5815.1)
具体例：
p {
letter-spacing:2px;
color:#000000;
background-color:inherit;
}
よく見つけたというか、いまさら(ry
けど、既出ですか？
スクロール固定表示以外に解決する方法はありませんか？
ここ質問スレじゃないし。
dd要素に、CSSでfirst-child疑似クラスとbefore疑似要素を使用し、
contentプロパティでの生成が上手くいかない
ちなみに以下みたいな感じでやってます
HTML
<dl id="list">
<dt>hoge</dt>
<dd>hogehoge</dd>
<dd>hogehoge</dd>
<dd>hogehoge</dd>
</dl>
CSS
dl#list dd:before {
content: "|";
}
dl#list dd:first-child:before {
content: "";
}
バグですかね？
なんかいい方法ないですかね…
早くCSS3を・・・・
一番目のddを示したい、んだよな？
だったらdtがあることを利用して隣接兄弟セレクタじゃダメなのか？
IEの未実装の後遺症が・・・ぼけてた orz
それでおっけいでした、どうもでした
スレ汚し失礼しました
Win2k
【UA】
Netscape Communicator 4.78
【症状】
pre要素にborderを設定すると、整形済みテキストにならない。
【ソース】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
</head>
<body>
<pre style="border-width : 1px;">
あいうえお
かきくけこ
さしすせそ
</pre>
</body>
</html>
【表示結果】
┏━━━━━━━━━━━━━━┓
┃あいうえお かきくけこ さしすせそ ┃
┗━━━━━━━━━━━━━━┛
IE7でもフロート関係はまだ問題が多いみたいだな。
【環境】
Fx1.5.0.6 / Win2kSP4
【現象】
legendあり、border指定ありのfieldset要素で、-moz-border-radiusを指定すると、
上ボーダーが角丸として折れ曲がるところからしか表示されない。
【ソース】
<form action="#">
<fieldset style="border:solid 1px #f00;-moz-border-radius:10px;">
<legend>legend</legend>
<p><input type="submit" value="test"></p>
</fieldset>
</form>
【備考】
上記ソースでlegendないしborderプロパティを外すと再現せず。
【スクリーンショット】
ttp://mata-ri.tk/pic/img/4546.png
【環境】
Fx1.5.0.6 / Win2kSP4
【現象】
table要素にborder属性及びborder-collapseプロパティにcollapseを指定した際、
border-collapseプロパティがseparateの時と違い自動でborderが描画され、
td（th）に対するborder設定が一部無視される。
【ソース】
<table border="1" summary="borderありテーブル" style="border-collapse:collapse;margin:1em;">
<tbody>
<tr><td>borderありcollapse</td><td>borderありcollapse</td></tr>
<tr><td>borderありcollapse</td><td>borderありcollapse</td></tr>
</tbody>
</table>
<table border="1" summary="borderありテーブル" style="border-collapse:separate;collapse;margin:1em;">
<tbody>
<tr><td>borderありseparate </td><td>borderありseparate</td></tr>
<tr><td>borderありseparate</td><td>borderありseparate </td></tr>
</tbody>
</table>
<table border="1" summary="borderありテーブル" style="border-collapse:collapse;collapse;margin:1em;">
<tbody>
<tr><td style="border:dashed 1px #f00;">borderありcollapse</td><td style="border:dashed 1px #f00;">borderありcollapse</td></tr>
<tr><td style="border:dashed 1px #f00;">borderありcollapse</td><td style="border:dashed 1px #f00;">borderありcollapse</td></tr>
</tbody>
</table>
<tbody>
<tr><td style="border:dashed 1px #f00;">borderありseparate</td><td style="border:dashed 1px #f00;">borderありseparate</td></tr>
<tr><td style="border:dashed 1px #f00;">borderありseparate</td><td style="border:dashed 1px #f00;">borderありseparate</td></tr>
</tbody>
</table>
<table summary="borderなしテーブル" style="border-collapse:collapse;collapse;margin:1em;">
<tbody>
<tr><td>borderなし</td><td>borderなし</td></tr>
<tr><td>borderなし</td><td>borderなし</td></tr>
</tbody>
</table>
【備考】
table＜tr＜tdという順でレイヤが上に重なるように描画されるイメージだと思ったから、
tableの方の指定が優先されるのはどうも納得いかないが、バグという自信もない。
【スクリーンショット】
ttp://mata-ri.tk/pic/img/4548.png
解決済みでしたらすいません。
【現象】親要素でmargin指定すると子要素のテキストボックス左に
親要素を継承したようなスペースが出来てしまう（ソース参照）。
【ソース】
●子要素でmargin指定<br>
<div style="width: 50px;margin-left: 30px;float: left;background-color: #CCCCCC;">
氏名
</div>
<div style="width: 150px;float: left;background-color: #F2F2F2;">
<input type="text" size="20">
</div>
<br clear="all">
●親要素でmargin指定すると、子要素のテキストボックス左に
親要素のmarginを継承したようなスペースが出来てしまう。<br>
<div style="margin: 0 30px;">
<div style="width: 50px;float: left;background-color: #CCCCCC;">
氏名
</div>
<div style="width: 150px;float: left;background-color: #F2F2F2;">
<input type="text" size="20">
</div>
</div>
これってIEのバグですか？（既出だったらｽﾏｿ）
inputタグの前に文字や画像を入れるとこの現象は起きません。
ちなみにMacIEなら大丈夫です。
Mozilla Firefox 1.5.0.7 / Windows 2000 SP4
【現象】
a要素内にcontent: url();でイメージを挿入したとき、イメージ上のハイパーリンクの挙動がおかしくなる。
【ソース】
<div>
<a href="./"><span>リンクテキスト</span></a>
</div>
a span:before {
content: url(image.jpg);
}
a:hover span:before {
content: url(image2.jpg);
}
画像に下からカーソルを入れると画像をリンク扱いしてくれますが、上から入れるとリンクになりません。なんだかよくわからない挙動になります。
a:beforeとして挿入しても同様です。
Opera9.02では、期待通りの動作をしました。
（cf. http://www.w3.org/TR/CSS21/tables.html#q5）
マックのブラウザ Camino1.0+ や Minefield 3.0a1 ではテーブルの横幅を無視して
body に対して相対的なようです。ウインドウズ版のモジラ系UAもそうなのでしょうか。
100〜のスレッドの続きを読む
