２ちゃんねる ■掲示板に戻る■ 全部 1- 最新50 [PR]女性の自宅ナマ映像を無料公開[PR]

CSS/DHTMLバグ辞典スレッド【第５版】

1 ：Name_Not_Found：2006/04/08(土) 20:05:59 ID:FsSaRr1T: 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.net/hp/kako/987/987003410.html
　2 http://pc2.2ch.net/hp/kako/991/991666454.html
　3 http://2ch-library.com/hp/1050844510.html
　4 http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
【関聯スレッド】
・/* CSS・スタイルシート質問スレッド*/
　http://web2ch.s31.xrea.com/?CSSLog
・代替スタイルシートに萌え～
　http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
　http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50

その他あれば、>>2-5あたりで。
368 ：Name_Not_Found：2007/11/14(水) 18:58:40 ID:???: 見つけてしまったので一応報告。

【環境】Opera 9.24, 9.50 beta
【症状】ブロックレベル要素の:first-line疑似クラスにwhite-space:normal
を指定すると、:before疑似要素のcontentプロパティの値が表示されない
【ソース】
.foo div:first-line { white-space: normal }
div { display: block }
div:before { content: "text:" }

<div>div</div>

CSSの1行目を削除すると表示されます。
>>323のバグと関係しているかもしれません。
369 ：Name_Not_Found：2007/11/28(水) 02:57:30 ID:???: IE7のバグ二つ。
検証ファイル：http://doiob.net/doiob/uploader/src/up13102.zip

【環境】Internet Explorer 7
【症状】子要素でbackground-image:noneを指定すると親要素で指定した背景
画像が表示されない
【ソース】
div#boxA { background-image: url("bg.png") }
div#boxB { background-image: none }

<div id="boxA">
<div id="boxB">
<p>テスト</p>
</div>
</div>

【環境】Internet Explorer 7
【症状】子要素でbackground-image:noneを指定し、親要素にpadding-bottom
を設定すると、親要素で指定した背景画像が全面に表示される
【ソース】
div#boxA { background-image: url("bg.png"); padding-bottom: 1px }
div#boxB { background-image: none }

HTMLは上に同じです。
http://cssbug.at.infoseek.co.jp/detail/winie/b061.html と関係しているかも。
370 ：Name_Not_Found：2007/11/30(金) 12:58:11 ID:???: 【環境】Opera 9.24, Opera 9.5 beta
【症状】フロートに後続する要素でフロートをクリアすると、その要素の
上マージンが無効になる
【ソース】
#boxA { background: yellow; }
#boxB {
float: left;
background: aqua;
}
#boxC {
clear: left;
margin-top: 100px;
background: lime;
}

<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
<div id="boxC">boxC</div>
371 ：Name_Not_Found：2007/11/30(金) 13:46:57 ID:???: 【環境】Opera 9.24, Opera 9.5 beta
【症状】間にフロートを挟んだ上マージンどうしが相殺するとき、フロートが
包含ブロックより上に配置される

#boxA { background: yellow; }
#boxB { background: orange; padding-right: 20px; }
#boxC {
float: left;
background: aqua;
}
#boxD {
margin-top: 100px;
background: lime;
}

<div id="boxA">boxA</div>
<div id="boxB">
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
372 ：Name_Not_Found：2007/12/09(日) 19:53:46 ID:???: 【環境】Opera 9.24, Opera 9.5
【症状】vertical-align:text-bottomを指定した要素のボックスが
親要素の内容領域の下にはみ出す
span.p {
background: lime
}
span.text-bottom {
vertical-align: text-bottom;
font-size: 15px;
background: yellow
}
<span class="p">parent
<span class="text-bottom">text-bottom</span>
</span>
373 ：Name_Not_Found：2007/12/13(木) 14:05:51 ID:???: 【環境】Internet Explorer 7
【症状】全称セレクタがコメントにマッチする
div *:first-child { color: blue }
div + * { color: blue }

<div>foo

<div>bar</div>
</div>

<div>baz</div>
374 ：Name_Not_Found：2007/12/15(土) 01:07:11 ID:???: これはバグでしょうか
【環境】Internet Explorer 6
【症状】input要素内に「あ」「亜」「Ａ」等、いわゆる全角文字を書くと、
その瞬間にinput要素の横方向サイズが変わる。

<head>
<title>テスト</title>
<style type="text/css">
div { border-left : blue 100px solid; }
input { width : 30%;}
</style>
</head>
<div><input type="text" /></div>

互換モードでも標準モードでも発生します。
375 ：Name_Not_Found：2007/12/20(木) 23:47:57 ID:???: 【環境】Internet Explorer 6, 7
【症状】list-style-position:insideを指定すると、マーカーボックスと
li要素の主要ブロックボックスが重なる

ol { list-style-position: inside; }
<ol>
<li>test</li>
<li>test</li>
<li>test</li>
...
<li>test</li>
</ol>

ol要素(list-style-type:decimalなど)で、マーカーの桁数が増えても
マーカーボックスが大きくならないようです。
標準モード、後方互換モードどちらでも発生します。
376 ：Name_Not_Found：2007/12/22(土) 06:04:05 ID:???: 【環境】Opera 9.24, Opera 9.5 beta
【症状】overflow:scrollとを指定した要素にボーダーやパディングを設定する
と、子ボックスの右側に指定された量の空白ができる

div.scroll {
overflow: scroll;
border: 10px solid gray;
}
div.scroll > div {
border: 4px solid silver;
}

<div class="scroll">
<div>
テストテストテスト...
</div>
</div>
377 ：Name_Not_Found：2007/12/23(日) 23:49:05 ID:???: *{ margin : 0 ; padding : 0 ; }

<h1>test</h1>
<h2>test</h2>

これをIE6で見るとh1とh2要素の間に謎の空白が生まれてるんですけど
どうすれば解消されるでしょうか
FFではともに0で計算されて表示されてたのですが・・・。
378 ：Name_Not_Found：2007/12/23(日) 23:49:59 ID:???: すみません誤爆りましたほんとすみません
379 ：Name_Not_Found：2007/12/27(木) 18:53:57 ID:???: 既出または何処かのバグ症状と重なってる可能性が高いと思うけど・・気になったので一応。

【環境】IE7
【症状】CSSバグリスト＠CSSバグ辞典スレッド（http://cssbug.at.infoseek.co.jp/）の
h1要素が左に伸びてしまっているが、バナーにマウスカーソルを持っていくと縮む（正しい長さになる）。
しかし、他のリンクにマウスカーソルを持っていくと元に戻る（伸びる）。
380 ：Name_Not_Found：2007/12/27(木) 21:10:23 ID:???: 上と同じ者ですが・・

【環境】IE7
【症状？】2-362（http://cssbug.at.infoseek.co.jp/detail/winie/b058.html）の
症状は、Shift_JIS，EUC-JPでは再現されるが、UTF-8にすると再現出来ない（正しく表示される）。

文字コードによるCSSの差異って起こるものなんですね・・。
381 ：Name_Not_Found：2007/12/27(木) 21:17:31 ID:???: 意味不明
382 ：Name_Not_Found：2007/12/27(木) 23:43:46 ID:???: >>381
ソースプログラムの文字コードを変更するとってことです・・。
383 ：Name_Not_Found：2007/12/29(土) 01:41:59 ID:???: >>379はこんなソースで再現できた。

a:hover {
background: white;
}
#bar {
margin: 1em -3%;
background: yellow;
text-align: center;
}

<body>
<div><a href="foo">foo</a></div>
<div id="bar">bar</div>
<div><a href="baz">baz</a></div>
</body>

・fooにマウスポインタを合わせるとbarが短くなる
・barが短いときはfooとbazの文字列の右側がクリックできる
・bazの右側にマウスポインタを合わせると最初の長さに戻る
・標準モードのIE7のみで発生する
384 ：Name_Not_Found：2008/02/03(日) 01:18:30 ID:???: hage
385 ：Name_Not_Found：2008/03/12(水) 15:47:17 ID:???: Operaって最前面の要素しかhoverしない？

<dl><dt><a href="...">Link</a></dt><dd>リンク</dd></dl>
に対して
dd{ display:none; }
dt:hover + dd{ display:block; }
a{ display:block; }
としても、dd要素が見えるようにならない。

IE7/FireFox2では見えるようになったのだが。
Operaのバージョンは9.26
OSはWindowsVista
386 ：385：2008/03/12(水) 16:20:16 ID:???: >>385修正
×　としても、dd要素が見えるようにならない。
○　としても、dt要素(=a要素)にマウスカーソルを載せてもdd要素が見えるようにならない。
387 ：Name_Not_Found：2008/03/13(木) 18:48:10 ID:???: >>385
WinXP+Opera 9.26で見えるが…
388 ：Name_Not_Found：2008/03/13(木) 19:33:09 ID:???: >>387
まじか・・・。じゃああとでzipでソース上げるから検証してほしい。
そのまえでこっちでミスがないかよく見直して見るけど。
389 ：385：2008/03/14(金) 10:13:59 ID:???: 使用中のCSS+テスト用HTMLファイル
ttp://www11.axfc.net/uploader/20/so/He_80910.zip.html
pass: 404
390 ：Name_Not_Found：2008/03/14(金) 10:47:33 ID:???: >>385に
a:active{color: red;}
を加えると再現できた。
391 ：385：2008/03/14(金) 11:19:32 ID:???: 擬似クラスを指定した複数の要素を重ねると発生するのか。
392 ：Name_Not_Found：2008/03/22(土) 03:38:46 ID:???: Win版Safari(ver3.1)で、CSS内に@charsetを指定した場合、
直後のスタイルプロパティが無効になるってのは、既出ですか?

例:
@charset "Shift_JIS";

* {
margin: 0;
padding: 0;
}

↑の例だと、* {}内のプロパティが無視されちゃいます...
既出だったらすみません...
393 ：Name_Not_Found：2008/03/24(月) 12:27:56 ID:???: 再現しないよ。WinXP SP2+Safari 3.1で確認。
394 ：Name_Not_Found：2008/03/24(月) 21:16:32 ID:???: >>393
今確認したんですが、どうも以下の条件で発生するようです。

1. @importで外部CSSファイルを読み込む
2. 1.で読み込んだCSSファイルに@charsetが指定されていれば、直後のプロパティを無視

Shift_JISとUTF-8では確認しました。
395 ：Name_Not_Found：2008/03/25(火) 01:40:13 ID:???: >>394
試してみたけど再現しなかった。検証したファイルを上げてもらうと
助かります。
396 ：394：2008/03/25(火) 08:40:07 ID:???: >>395
@charsetを絶対指定しなければいけないわけでもなく、ホントに些細な問題ですが、
ご協力感謝いたします。

ttp://www37.tok2.com/home/kilukulu/bug-check.html

上記URLで確認可能です。
バグが発生しない限り、背景色が青(#0080ff)になります。
バグが発生した場合は、背景色はデフォルトのはずです。
ちょっと見づらいでしょうが、宜しくお願いし居ます。

[検証環境]
OS: Windows XP Home Edition SP2
Browser: Safari 3.1
397 ：Name_Not_Found：2008/03/25(火) 11:12:58 ID:???: @charsetをファイル先頭に書かないと、次にある宣言や@規則が無視される
みたいだね。@importで読み込まなくても発生した。

@charsetはファイル先頭に書かないといけないので、正しくCSSを書いて
いれば特に問題はないんだけれど、仕様通りの動作ではないね。
398 ：Name_Not_Found：2008/03/25(火) 12:07:28 ID:???: VistaのBusinessのSafari 3.1でも再現
399 ：394：2008/03/25(火) 13:18:23 ID:???: >>397
そうでした、@charsetは先頭でしたね。お恥ずかしい・・・orz
IE7やFirefox2ではきちんと表示されていたので、疑問に思ってたんですが、
まさか、自分の間違いだったとは・・・

ご協力、ありがとうございました!
400 ：Name_Not_Found：2008/04/13(日) 19:25:48 ID:tBpxFebe: ・DHTML、IE5
別エレメントに既存エレメントをappendChildした後で、既存エレメントの子エレメントをdocument.getElementByIdで参照し、innerHTMLを設定するとエラーが発生するっぽい。

ソース？
別エレメント.appendChild(既存のエレメント);
document.getElementById(既存のエレメントの子エレメントのID).innerHTML=""
・結果
「未知の実行時エラーです」
401 ：Name_Not_Found：2008/04/13(日) 21:23:23 ID:???: それってJSじゃ・・・
402 ：Name_Not_Found：2008/04/13(日) 21:57:49 ID:???: ｷﾀｰ
403 ：Name_Not_Found：2008/04/18(金) 22:36:59 ID:???: まとめwiki亡くなってるやん
404 ：Name_Not_Found：2008/04/20(日) 16:35:54 ID:???: 最初のまとめサイト管理人が失踪してるから、結局何も出来ず更新もされず、という現状
いつまでも検索も更新も出来ない超不便まとめを使うハメになってる
405 ：Name_Not_Found：2008/05/16(金) 06:06:15 ID:???: すみません。しばらくウェブから離れていあたら、まとめサイトが
エロサイトにorz 失効したドメインを取得されてしまったみたいです。

データは残っているので引き継いでいただける方がいましたら
差し上げたいと思います。迷惑をかけてしまい本当に申し訳ありません。
406 ：Name_Not_Found：2008/06/08(日) 21:42:30 ID:???: 既出かどうか知らないが報告

<h2><a id="honya" name="honya">ほにゃらら</a></h2>

<p><a href="#honya">タイトルに飛ぶ</a></p>

でh2にdisplay:none;

IE6　　　→　消しているのに、なぜかh2の位置へ飛ぶことができる
Fox2.0　→　消しているので、当然飛べない
407 ：Name_Not_Found：2008/06/08(日) 22:19:10 ID:???: IEは「なぜか」ってあるけど
どっちが正しいと言うわけではないのでは？

「display（表示）」に関する指定だから
レイアウトには影響するけどhtml文書側のid属性まで無効にさせるかどうかはまた別な気が
408 ：Name_Not_Found：2008/06/08(日) 23:48:02 ID:???: display:noneのときは何も生成されないんだから
参照不可能なんじゃね？
409 ：Name_Not_Found：2008/06/09(月) 00:41:45 ID:???: 生成されないのはレイアウトボックスだろ？
410 ：Name_Not_Found：2008/06/09(月) 00:43:25 ID:???: そういやOperaはdisplay:none;を指定した要素または要素内にimg要素やscript要素があった場合
IEやFirefoxと違ってロードすらしないらしいけど
デフォルトスタイルがdisplay:none;なhead要素内にobject要素があった場合はこれもロードしないのだろうか
head要素内にobject要素を置くことは可能だけど
411 ：Name_Not_Found：2008/06/13(金) 13:48:22 ID:???: Opera 9.50は読みに行かないみたいだね。
412 ：Name_Not_Found：2008/06/16(月) 10:50:23 ID:KE/tsnbA: IE6、7でリストの文字サイズが小さいとへんなマージン出来ちゃうんだけど
liにfloat:leftかけると消える　firefoxではマージンはできない
既出？

<ul>
<li style="background-color:#0000FF;height:10px;font-size:1px;list-style-type:none;"></li>
<li style="background-color:#0000DD;height:10px;font-size:2px;list-style-type:none;"></li>
<li style="background-color:#0000CC;height:10px;font-size:3px;list-style-type:none;"></li>
<li style="background-color:#0000BB;height:10px;font-size:4px;list-style-type:none;"></li>
<li style="background-color:#0000AA;height:10px;font-size:5px;list-style-type:none;"></li>
<li style="background-color:#000099;height:10px;font-size:6px;list-style-type:none;"></li>
<li style="background-color:#000088;height:10px;font-size:7px;list-style-type:none;"></li>
<li style="background-color:#000077;height:10px;font-size:8px;list-style-type:none;"></li>
<li style="background-color:#000066;height:10px;font-size:9px;list-style-type:none;"></li>
<li style="background-color:#000055;height:10px;font-size:10px;list-style-type:none;"></li>
<li style="background-color:#000044;height:10px;font-size:11px;list-style-type:none;"></li>
<li style="background-color:#000033;height:10px;font-size:12px;list-style-type:none;"></li>
<li style="background-color:#000022;height:10px;font-size:13px;list-style-type:none;"></li>
<li style="background-color:#000011;height:10px;font-size:14px;list-style-type:none;"></li>
<li style="background-color:#000000;height:10px;font-size:15px;list-style-type:none;"></li>
<li style="background-color:#001100;height:10px;font-size:16px;list-style-type:none;"></li>
<li style="background-color:#002200;height:10px;font-size:17px;list-style-type:none;"></li>
</ul>
413 ：Name_Not_Found：2008/06/16(月) 17:18:30 ID:???: IEでくっついてみえるのはこれが関係してそう
http://cssbug.at.infoseek.co.jp/detail/winie/b158.html
414 ：Name_Not_Found：2008/06/18(水) 10:06:41 ID:fBjG2qeg: >>413
line-height:1pxにしたら詰まった！
font-sizeだけじゃだめなのね
415 ：Name_Not_Found：2008/06/21(土) 16:21:40 ID:8lzEhjx7: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>test1</title>
</head>
<body bgcolor="#ff0000">
<br>
<br>

<br>
<img src="./test.jpg" style="filter: alpha(opacity=100);" />

</body>
</html>

サンプル
http://h-t-t-p.hp.infoseek.co.jp/test.html

filter:opacityを設定すると画像によって部分的に透過率が0になってしまう。
ここでは御大の顔の右側の赤いドット。
http://h-t-t-p.hp.infoseek.co.jp/test.jpg
画像そのものは普通。に見える。
ならない画像もあるので現状再現が難しいがFireworksから縮小かけて書き出すと結構な確率でなる。
数十ドットが欠けることもある。
IE6,IE7のみで。filterが独自拡張だから当然だけど。
これ今結構こまってて、誰か解決法知ってたら教えてください。
質問スレみたいに使って怒られるかもしれんけど質問スレ機能してないから許して
416 ：Name_Not_Found：2008/06/21(土) 16:42:43 ID:8lzEhjx7: 自己レス
http://forums.microsoft.com/msdn/ShowPost.aspx?PostID=3308055&SiteID=1
http://www.alexjudd.com/?p=5
探し回ってこれ見つけた

imagemagickを使って画像生成してるから回避難しいかも・・・
417 ：Name_Not_Found：2008/06/21(土) 17:51:59 ID:???: imagemagickでの生成時に-gamma 1.5/1.5/1.5をかけることで
なんとか回避できたっぽい
不本意だけどとりあえずこれで急場をしのぎます
誰かスマートな解決法知ってたら教えてください

141 KB [ ２ちゃんねる３億PV/日をささえるレンタルサーバー \877/2TB/100Mbps]

■ おすすめ２ちゃんねる開発中。。。 by FOX ★
このスレを見ている人はこんなスレも見ています。(ver 0.20)
【レム】山本真也五段２回戦進出？【ルネ】 [将棋・チェス]
ROエミュルナ聖夜鯖について語ろう [ネトゲサロン]
最近の焼酎サイトってさぁ・・・　２サイト目 [お酒・Bar]
クリック募金して貧困を助けよう [ボランティア]
Tiny Personal Firewall Part5 [セキュリティ]

新着レスの表示

掲示板に戻る全部前100 次100 最新50

read.cgi ver 05.0.7.2 2008/07/24
FOX ★ DSO(Dynamic Shared Object)