5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

1 :Name_Not_Found:03/04/20 22:15 ID:???
CSS(とDHTML)のバグ報告、お待ちしてます。
※報告の際はブラウザ名・ヴァージョンを明記してください。
 再現条件をつきとめるため、必要に応じてソースを出して下さい。

これまでのバグは下記に登録されてます(366◆E3CSS.J95Uさんに感謝)。
【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あたりで。

358 :Name_Not_Found:03/07/21 10:51 ID:???
>>357
テーブルセルにおけるwidth,heightは最小幅、最小高。
よってoverflowなど無意味。
例外はtable-layout:fixedのとき。

359 :Name_Not_Found:03/07/21 11:04 ID:???
お前の脳内解釈やIEの仕様なんてどうでもいいわけで。

360 :Name_Not_Found:03/07/21 14:03 ID:???
>>358
table-layout:fixed;にしても無意味だったけど?
<table border=1 style="height:2em; table-layout:fixed;">
<tr>
<td>000000000</td>
<td style="overflow:scroll;">1<br>2<br>3<br>4<br>5<br>6<br></td>
</tr>
</table>

361 :Name_Not_Found:03/07/21 14:21 ID:???
だからtable-layout:fixedにしてもoverflow無効なのはバグ。
table-layout:autoでoverflow無効なのは仕様通り。

>>359
CSS2仕様書嫁

362 :Name_Not_Found:03/07/21 14:35 ID:???
そもそも
><td><div style="overflow:scroll;">ほげほげ</div></td>
にしても、スクロールバーが出るだけでスクロールできない(Mozilla/Opera7)んだから
無意味なんだけどね。

363 :しぃ豆 ◆FTP/Z/SD72 :03/07/21 20:57 ID:???
IE6 SP1 Netscape7

<Head>
<Style><!-- body{ line-height: 125%; } --></Style>
</Head>

という感じで line-height を指定すると
ボックスにパディングを設定しても無視される。

364 :Name_Not_Found:03/07/22 02:30 ID:???
>>362 それはdivにheightを設定してないから。でもtdにheightを指定してもやはりoverflowは効かない。
>>363 そんなことぁないだろ。

365 :Name_Not_Found:03/07/27 03:54 ID:???
>>363
再現できません。何かの誤解では?
以下をWinIE6で確認。
<style><!-- body{line-height:125%;} --></style>
<div style="background:yellow; padding:50px;">パディング効いてます</div>

366 :Name_Not_Found:03/07/27 05:32 ID:???
<style type="text/css">
ってなってないと落ち着かないな

367 :Name_Not_Found:03/07/27 07:59 ID:???
>>366
禿同。

368 :Name_Not_Found:03/07/27 11:54 ID:???
依存症患者かよ

369 :Name_Not_Found:03/07/30 07:50 ID:???
http://pc2.2ch.net/test/read.cgi/hp/1057860130/489-499
>スタイルシートでテーブルにスタイル(背景、ボーダー)を適用すると同じHTMLにあるほかの
>テーブルのボーダーがスタイル適用してないにも関わらずボーダーに色がついてしまいます。
>これってバグでしょうか?

>マック版のIE5.16です。


370 :_:03/07/30 08:08 ID:???
http://homepage.mac.com/hiroyuki44/2ch.html

371 :前366 :03/07/31 22:57 ID:???
(今日の更新分です)
>>347 NN010と012を修正。

>>348 NN024に追加。

>>357
1. の内容をOpera006に追加。
2. の現象は再現できていません……

>>363 とりあえず保留。

>>369 MacIE049に追加。

372 :Name_Not_Found:03/08/01 00:28 ID:???
>>371
お疲れさまです。
> >>357
> 1. の内容をOpera006に追加。
その>>357の1.はOperaに限らず、WinIE6やNetscape7でも同様です。

http://cssbug.tripod.co.jp/index.html
>※2003年9月1日よりこのサイトのURIが変わります。
>トップページのURIは http://members.at.infoseek.co.jp/cssbug/
>または http://cssbug.at.infoseek.co.jp/ になります。

あらら移転ですか……。

373 :Name_Not_Found:03/08/01 00:38 ID:LJ6uTMsH
前366さんへ

>>348の挙げたサイト、バグ対策も載ってるので、リンクに追加して下さいませんか。
 妥協としてのスタイルシート
 http://www.t3.rim.or.jp/~harunaga/css/

374 :Name_Not_Found:03/08/01 04:27 ID:???
>>371
漏れ>357の症状を出した香具師なんだが、どうやって再現するか忘れたよ(;´Д`)スンマソ

375 :Name_Not_Found:03/08/01 21:31 ID:???
>>361
仕様書の何処にそんな事が書いてあるんだ?

376 :Name_Not_Found:03/08/02 00:21 ID:???
>>375
CSS2仕様書の Section 17.5.2 あたりを読め。

377 :山崎 渉:03/08/02 02:13 ID:???
(^^)

378 :Name_Not_Found:03/08/02 22:12 ID:???
http://pc2.2ch.net/test/read.cgi/hp/1057860130/657-662
WinXP , Opera7.11 を使用しています。
<form>
<fieldset>
</fieldset>
<fieldset>
</fieldset>
</form>
というように、 form 要素の中に fieldset 要素を2つ配置しています。
そして CSS は
fieldset{
float:left;
width:40%;
margin:0.5em;
}
と記述して、2つの fieldsetが横に並ぶようにしていますが、
Oepra だけ実現できません。(IE や Mozilla はできました。)
私の記述が何かおかしいのでしょうか?それとも Opera のバグでしょうか?

<div> で <fieldset> 〜 </fieldset> を包括するとうまくいきました。


379 :Name_Not_Found:03/08/04 22:39 ID:???
>>372
iswebに併合されるそうな。

380 :Name_Not_Found:03/08/07 09:13 ID:???
>>357-361
table-layout は表とセルの*幅*の算出に関するアルゴリズム指定だ。

高さの算出については、 CSS2-17.5.3 に
> CSS2では、セル要素の'height'の値と、内容を収めるのに必要な最小限の高さ
>(以下これをMINと書き表す)のうち、大きい方をセルボックスの高さとする。
とある。 CSS2では table-layout が auto だろうが fixed だろうが
高さ方向のはみ出しは絶対に発生しない。

なので、CSS2 仕様上でセルの overflow:scroll が有効になると期待できるのは
table-layout:fixed の場合の幅方向のはみ出しについてのみだと思う。
auto の場合は幅の算出にどんなアルゴリズムを使ってもいいはずなので
結果がどうだろうと仕様の適用外でバグとも仕様通りともいえない。

381 :Name_Not_Found:03/08/07 10:02 ID:???
>>360
表要素の width が auto の場合は table-layout: fixed でも
自動レイアウトアルゴリズムを使用する。[CSS2-17.5.2]

382 :Name_Not_Found:03/08/09 09:57 ID:???
table-layoutってWinのIEしか対応してないんだからmozillaもoperaも関係ないと思うんだけど。

383 :Name_Not_Found:03/08/12 03:19 ID:???
>382
釣りか?逆だぞ。

384 :Name_Not_Found:03/08/12 10:55 ID:???
>>383
釣りか?テキストブラウザは無視ですか。
css/dhtmlスレだから放置ですね・・・

385 :Name_Not_Found:03/08/12 11:48 ID:???
>>384
おいおい、>>382の言ってるtable-layoutってCSSのプロパティのことだぞ…

386 :Name_Not_Found:03/08/12 19:26 ID:???
まあ釣りなんでしょうな。

387 :コーダー番長:03/08/12 23:39 ID:???
釣れますか?

388 :山崎 渉:03/08/15 16:08 ID:???
    (⌒V⌒)
   │ ^ ^ │<これからも僕を応援して下さいね(^^)。
  ⊂|    |つ
   (_)(_)                      山崎パン

389 :Name_Not_Found:03/08/15 22:06 ID:???
↑デバッグしたい

390 :Name_Not_Found:03/08/16 19:48 ID:???
MDNのCSS本にも、インプレスのCSS本にもtable-layoutはWinIEのみ対応で、
macIEも値スケも非対応ってあるけど?

391 :390:03/08/16 19:49 ID:???
書き忘れたけど
2冊とも古い本じゃないぞ。operaとかネスケ7も載ってる。

392 :Name_Not_Found:03/08/16 20:24 ID:???
>>391
本の名前あげないのは何でだろう。
言ってることは正しいが。

393 :Name_Not_Found:03/08/16 20:50 ID:???
>>390-392
CSS Laboratory の対応表では Mozilla系もサポートしている様だが。
http://is.vis.ne.jp/charts/css2_tables/index.xhtml#table-layout
この対応表は間違いなのか。

>インプレスのCSS本
『CSS2 スタイルシート大辞典』(ISBN4-8443-1740-7)のことか?
http://www.amazon.co.jp/exec/obidos/ASIN/4844317407/250-0793475-6399455

394 :393:03/08/16 21:06 ID:???
Netscape 7 で試したら、固定表レイアウトになったぞ。
「fixed」にした方が、明らかにレンダリング速度も速かった。

395 :Name_Not_Found:03/08/16 22:39 ID:???
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/tables.html#table-layout
Win版 MSIE 5〜6
table要素に(width属性や widthプロパティで)幅が明示しなくても「fixed」が適用されてしまいます。
Win版 Opera 6〜7
固定レイアウトであっても,一行目のセルの内容量によって幅が変動してしまいます。

396 :Name_Not_Found:03/08/17 14:32 ID:???
http://cssbug.tripod.co.jp/detail/winie/b112.html
select要素ではz-indexやborderなどのプロパティを無視する(5.x/6.0)

WinIE独自拡張のscrollbar関係プロパティも無視するね。
 cf. http://pc2.2ch.net/test/read.cgi/hp/1060869440/81n

397 :Name_Not_Found:03/08/17 21:15 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
body {
width: 400px;
}
-->
</style>
</head>
<body>
あああああああああああああああああああああああああああああああああああああああああああああ
</body>
</html>

bodyに対して横幅を定義したんですがIEでは反映されないみたいです
バグなのでしょうか

398 :Name_Not_Found:03/08/17 21:18 ID:???
そういうことしたいならjavascriptだけど。
それを有効にするのは何か無理な気がする

399 :Name_Not_Found:03/08/17 21:18 ID:???
>>397
大発見かも!

400 :Name_Not_Found:03/08/20 01:56 ID:kdGPsTKu
【Netscape7.1(Win)】
多重フロートで、正しかるべき位置(?)より下にずれて配置される。

下記の例で確認した。WinIE6やOpera7と見比べると、
NN7のみimg.Rightの位置が一段下がってしまって、「右1」のすぐ横に来ない。
h3の直後の画像でclearしてるのが原因らしいが、それならば右1・右2も下がるべきはず。
h3, h4 {margin:0;}
.leftcol {float:left; width:33%;}
.rightcol {margin:0 0 0 35%;}
img.Right {float:right; margin:0; width:145px;}
.clear {clear:both;}
img {text-align:center; background:red;}
<h3 class="leftcol">左フロート1</h3>
<img src="./images.gif" width="120" height="50" alt="left1" class="clear leftcol">
<div class="rightcol">
<img class="Right" src="./images/bff2003.jpg" width="142" height="50" alt="right2">
<h4>右1</h4>
</div>
<hr class="clear">
<h3 class="leftcol">左フロート2</h3>
<img src="./images.gif" width="120" height="50" alt="left2" class="clear leftcol">
<div class="rightcol">
<h4>右2</h4>
</div>
 cf. http://www.ne.jp/asahi/anarchy/saluton/index.html

もしかしたらNN7のみが正しくIEやOperaの表示がバグなのか?

類似バグ http://cssbug.tripod.co.jp/detail/mozilla/b059.html

401 :Name_Not_Found:03/08/20 02:39 ID:???
>>400
ネスケの方が正しい動作だと思われ。

CSS2仕様書9.5.1の浮動体の規則5より、right2の上辺はleft1の上辺よりも下に来なければならない。
しかし、右1と親ボックスである<div class="rightcol">はブロックボックスなので、
通常フローに従い配置されている。
すると親ボックスは左1の横に配置され、その最上部に右1が配置されると言う
>>400の結果がえられる。

402 :Name_Not_Found:03/08/20 03:13 ID:???
>>400
clearプロパティはブロックレベル要素にしか適用できないから
>>400のソースのimg要素は<div>で括って
<div class="clear leftcol">
<img src="./images.gif" width="120" height="50" alt="left1">
</div>
とかすべきでしたな。ま、それでやっても同じバグが起るけどね。

>>401
>CSS2仕様書9.5.1の浮動体の規則5より
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#float-position
5. 浮動ボックスの外上辺は、ソース文書内でそれ以前に出現する要素が生成する、ブロックボックスあるいは浮動ボックスの外上辺より上にきてはならない。

ふむふむ。

>しかし、右1と親ボックスである<div class="rightcol">はブロックボックスなので、
>通常フローに従い配置されている。

ううむ? 
画像left1やleft2でclearしてるのに、div.rightcolは左1・左2と水平横並びでいいのか?
横並びがleft1やleft2の上辺と揃って配置されるんならわかるが。
例を出せば、下のソースで「右」は「左」のすぐ右にくるわけないよね? だのにナゼ?
<div style="float:left;width:2em;">左</div>
<div style="clear:left">clear</div>
<div style="margin-left:3em;">右</div>

まあ、どっちにしろMozillaかIE・Operaかのバグではあるか。

403 :402:03/08/20 03:24 ID:???
例としてはこっちが適切だったかな。
<div style="/*float:left;*/ width:2em;">左</div>
<div style="clear:left; float:left; width:3em;">clear</div>
<div style="margin-left:3em;">右</div>
つまり最初のdivのfloatはclearで無効になってるはずなのに、ってことです。

404 :Name_Not_Found:03/08/20 03:44 ID:???
>>400の例はもっと単純化したソースで実験できる。

div {border:1px solid red;}

<div style="float:left;width:10em;">左</div>
<div style="clear:left; float:left; width:5em;">clear</div>
<div style="margin-left:11em;">
<div style="float:right;width:2em;">右2</div>
右1
</div>
<hr style="clear:both;">
これで、右1と右2が真横に並ぶかどうかの差が問題だ。


405 :Name_Not_Found:03/08/20 10:25 ID:???
>>403
clearの意味を履き違えてる。

clear:leftなら
「指定された要素の左辺がそれ以前に出現する左浮動の右辺に隣接してはいけない。」
ことを示しているだけで、前に現れた浮動を完全に取り消しているわけではない。

そして、浮動体は通常フローに影響を与えないので、left1やleft2はがどこに配置されようと
div.rightcolの配置には影響を与えない。

406 :Name_Not_Found:03/08/20 13:12 ID:???
つまり>>400>>404はIE・Operaのバグ。となると、既出だな。

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

407 :Name_Not_Found:03/08/20 13:26 ID:???
>>405
これだと、通常フローはfloat1の右隣に流し込まれないんだよね。
二番目のdivにclearと共にfloatを指定するかどうかの差で。
<div style="float:left;width:10em; border:1px solid red;">float1</div>
<div style="clear:left; /*float:left;*/ width:5em;">clear only</div>
<div style="margin-left:11em; border:1px solid blue;">
通常フロー
</div>
<hr style="clear:both;">

ううん。わかる気もするんだけど、何だか釈然としない……。

172 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)