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

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

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

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

これまでのバグは下記に登録されてます(前366◆E3CSS.J95U/◆B7TCOttEさんに感謝)。
【CSSバグリスト@CSSバグ辞典スレッド】 
 http://cssbug.at.infoseek.co.jp/index.html

 プロパティ別にバグを調べたいときは――
 ・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あたりで。

621 :619:05/02/26 00:30:16 ID:???
>>620
あったのですね…お手数かけました

622 :Name_Not_Found:05/02/26 04:11:50 ID:???
何故しらべないで書き込むのか。よく読め。↓
http://cssbug.at.infoseek.co.jp/index.html

623 :Name_Not_Found:05/02/26 18:12:37 ID:???

<head>
span{ font-size:35pt;font-weight:bold;color:navy;position:absolute;filter:shadow(color=#ffff00,direction=125)}
</head>
<body>
<table border=1>
<tr><td width="220" height="50" align="left"><span>何を言う</span></td><td>早見優</td></tr>
<tr><td>上裕</td><td>北天裕</td></tr>
</table>
</body>

すいません、上記のようにCSSでFilterかけてtable内に表示させようとしたのですが「何を言う」が
枠からはみ出してどうにもなりません。
何か間違ってるのでしょうか?


624 :Name_Not_Found:05/02/26 18:13:54 ID:???
スレ違い

625 :Name_Not_Found:05/02/26 18:16:46 ID:???
>>624
すいません。質問スレ行くべきでしたね。忘れてください。

626 :Name_Not_Found:05/03/01 15:58:10 ID:???
WinIE5.5,6.0などのCSSのバグと同様の事象が、Firefox1.0(日本語版)でも見受けられました。

select要素ではz-indexやborderなどのプロパティを無視する
ttp://cssbug.at.infoseek.co.jp/detail/winie/b112.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
--略--
<form>
<select style="border-style:solid; border-width:10px; border-color:black; width:300px;">
--略--
<input type="text" style="border-style:solid; border-width:10px; border-color:black; width:300px;">
</form>

でSelectの色、太さ、線種の設定がIE6.0とFireFox1.0(日本語版)で反映されません。widthは反映されています。
ipuntに関しては問題なく色、太さ、線種が反映されています。

Opera7.53、Mozilla5.0(rv1.8b2)ではselectもinputも問題なくすべて反映されました。
これは、Firefoxのバグと考えていいんでしょうか?
firefoxのバグならば、もじら組にでも報告しようと思うのですが。

627 :Name_Not_Found:05/03/01 21:17:09 ID:???
わざとWindowsの標準から離れないように(IEと同じに)
してるんじゃなかったっけ?
昔のMozillaは自由すぎて、それこそ四角いラジオボタンとか何でもアリだったから。

Operaみたいに「フォーム部品にスタイル適用しない」っていう設定を
作るべきとは思うが。

628 :Name_Not_Found:05/03/03 11:25:56 ID:???
どうでもいいようなバグな上に既出かもしれないけど
WinIE6.0でdottedまたはdashedの一部を重ねると表示がおかしくなる。

<body style="line-height:130%;">
<div style="border:1px dashed;margin:0;padding:5px;
border-bottom:none;margin-bottom:-0.5em;">
ああ
</div>
<div style="border:1px dashed;margin:0;padding:5px;
border-top:none">
ああ</div>
</body>


629 :Name_Not_Found:05/03/03 12:25:15 ID:???
XP SP2 + IE6。おそらく既知外。
p#nullpoの上パディングが通常の倍になる。

<style type="text/css">
#hoge {
float: left;
line-height: 112.5%
}
#foo {margin: 0}
#nullpo {
margin: 0;
padding: 1em;
border-style: solid;
clear: left;
}
</style>
<p id="hoge">hoge</p>
<p id="foo">foo</p>
<p id="nullpo">nullpo</p>

・#hogeのline-heightが112.5%以上、floatはleftかright
・#fooと#nullpoのマージンが0
・#nullpoでfloatをclear。

以上の条件を満たすと発生するみたい

630 :Name_Not_Found:05/03/04 21:40:26 ID:???
>>629
>>527

631 :Name_Not_Found:05/03/05 00:01:25 ID:???
でも>>527ではline-heightは条件に入ってなかったが。どうなの?

632 :Name_Not_Found:05/03/05 23:08:41 ID:???
なんで基地のバグに余計なもの付け足したら新しいバグになると思ってんの?

633 :Name_Not_Found:05/03/05 23:21:00 ID:???
新しいバグだなんて言ってないな。
line-heightは条件に入るのか入らないかって訊いてるんだろ。

634 :Name_Not_Found:05/03/08 10:05:34 ID:DrG3P5s/ ?#
Firefoxで<table>の他要素のマージンが重ならないのは仕様ですか?
一応調べたのですが対策等はないのでしょうか。

<html>
<head>
<style type="text/css">
<!--
p, div, h1, table{margin:1em;}
-->
</style>
<title>margin test</title>
</head>
<body>
<p>test</p>
<div>test</div>
<table border="1"><tr><td>aaa</td><td>bbb</td></tr></table>
<p>test</p>
<table border="1"><tr><td>aaa</td><td>bbb</td></tr></table>
<h1>test</h1>
<table border="1"><tr><td>aaa</td><td>bbb</td></tr></table>
<p>test</p>
</body>
</html>

635 :Name_Not_Found:05/03/08 10:07:32 ID:???
「他要素のマージンが重ならない」って意味不明。
他要素とは何で、重ならないとは何と重ならないのか、そしてどう重ならせたいのか。

636 :Name_Not_Found:05/03/08 10:14:20 ID:DrG3P5s/
>>635
たとえば上のソースでは<table>と<p>の間などに2emの隙間ができてしまいます。
IEでは1emなのですが、これはどうなのでしょうか。

637 :Name_Not_Found:05/03/08 10:31:12 ID:???
それは「マージンの相殺」と呼ぶ。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#collapsing-margins

638 :Name_Not_Found:05/03/08 10:33:27 ID:DrG3P5s/
>>637
すいません、普通なら行われるはずのそれが行われていないのですが、これはバグですよね?

639 :Name_Not_Found:05/03/08 10:55:00 ID:???
>>634
それでやってみたら、IE6でもtableとh1とのマージンは相殺されなかったが。

640 :Name_Not_Found:05/03/08 11:04:10 ID:???
ごめん>>639は取り消し。margin:1em;だからfont-sizeに合せられるのね。

641 :Name_Not_Found:05/03/08 11:28:12 ID:???
>tableのマージンが他の要素のマージンと相殺されない
Netscape7.1でも再現するね。
Opera7.54では大丈夫だった。

642 :Name_Not_Found:05/03/09 09:50:27 ID:YCJcpxX/
【Netscape7.1/Win98SE】
等幅フォントで表示させたとき、太字の行末文字の端がちぎれる。

body {font-family:"MS 明朝", monospace;}
strong {font-weight:900;}
<strong>壱弐参肆伍陸漆捌玖拾壱弐参肆伍陸漆捌玖拾</strong>

字数が少ないと再現しないことがある。

cf.
ボールド体の文字列が前後の文字列と重なる(N6.x/N7.x)
 http://cssbug.at.infoseek.co.jp/detail/mozilla/b035.html
等幅ボールド文字が欠ける
 http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=395 

643 :Name_Not_Found:05/03/10 20:50:10 ID:4LDiRwyb
Safari 1.2.4(v125.12) 標準/互換両方
colorに不正なtransparentを指定すると透明になってしまう。

<html>
<head>
<style type="text/css">
<!--
p { background-color: #aaa; }
p#hoge { color: transparent; }
-->
</style>
<title>hoge</title>
</head>
<body>
<p>hogehogehogehogehogehogehogehoge</p>
<p id="hoge">Safariでは透明になります。</p>
</ul>
</body>
</html>

644 :Name_Not_Found:05/03/10 21:04:11 ID:???
>>643
ただのcss3先行実装

645 :Name_Not_Found:05/03/10 21:48:36 ID:???
transparent = rgba(0, 0, 0, 0)
ね。

646 :Name_Not_Found:05/03/11 17:10:56 ID:???
すみません、バグ辞典を見ても判らないので…教えてください。

Win/IE6の場合は、その1・2両方とも内側のDIVのmarginが効くのですが、
Win/NN7だと、その1は内側のmargin-topが、外側のDIVに効いているようなのです。
これの回避方法はありますでしょうか?

その1
<div style="width:500px; height:100px; background-color:#ff8888;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

その2
<div style="width:500px; height:100px; background-color:#ff8888; border:1px solid #000000;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>


647 :Name_Not_Found:05/03/11 17:40:19 ID:???
>>646
ttp://cssbug.at.infoseek.co.jp/detail/winie/b172.html
と症状は同じだけどフロートに隣接してなくてもおこるのね。
どうもIEはheightを指定すると子要素との間でマージンを相殺しなくなるっぽいな。

正しいのはNNのほう。IEにあわせたいのなら1pxのパディングをとるとかかな。

648 :Name_Not_Found:05/03/11 17:47:31 ID:???
>>647
それとは違うでしょ。
確かに外側のdivに内側のdivのmarginが適用されるっぽい。
俺なら外側のdivにpadding-topとかで逃げるかな。

649 :Name_Not_Found:05/03/11 18:00:42 ID:???
>どうもIEはheightを指定すると子要素との間でマージンを相殺しなくなるっぽいな。
width か height が指定されていると、発生する模様。
他にも width と height で挙動が変化することがあるけど、
M$ はどうしてこういう訳の分からん実装を平気でするかね。

650 :646:05/03/11 18:10:53 ID:???
>>647さん
>>648さん
>>649さん
レス有難う御座います。

NNの方が正しいのですか。
borderの有無だけで中のDIVのmargin-topが変わるのはおかしいので、
NNの方が間違っているのかと思いました。

解決法ですが、paddingを使用するとIEとNNで縦幅が変わってしまいますよね。
最終的にはborderは無しにしたいのですが…

その3(IEだと縦100px、NNだと縦102pxになります)
<div style="width:500px; height:100px; padding:1px; background-color:#ff8888;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

651 :Name_Not_Found:05/03/11 18:35:43 ID:???
>>650
上下だけ外側のボックスのpaddingで指定して左右は内側のボックスのmarginで指定すればいいじゃん。

652 :646:05/03/11 18:45:37 ID:???
>>651さん
いえ、paddingを使用すると縦が長くなってしまいますので、ダメなんですよー。
下記のサンプルの場合、外のDIVをpadding-top:20pxとするなら、
それにあわせてheightを80pxにしないと縦が延びてしまうのですが、
そうすると今度はIEで縦が短くなってしまうのです。

その4
<div style="width:500px; height:100px; padding-top:20px; background-color:#ff8888;">
<div style="margin:0px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

653 :Name_Not_Found:05/03/11 19:03:59 ID:???
形が崩れないようにするのに、こんなのはどう?

<div style="width:500px; height:100px; background-color:#ff8888;">
<div style="position:relative; left:400px; top:20px; width:90px; background-color:#8888ff;">
test
</div>
</div>


654 :646:05/03/11 19:18:54 ID:???
>>653さん
おお!そういう方法もあるのですね...勉強になります。
今回はこれを使わせていただきます!
ありがとうございます〜。

655 :Name_Not_Found:05/03/11 20:04:24 ID:???
>borderの有無だけで中のDIVのmargin-topが変わるのはおかしいので、NNの方が間違っているのかと思いました。

藻前がマージンの相殺(Collapsing margins)について理解不足なだけ。

656 :Name_Not_Found:05/03/15 16:30:32 ID:???
バグ辞典になかったので、一応報告です。Opera7.23で確認しました。
擬似要素のfirst-letterが表には効かない。


<html>
<head>
<title>test</title>
</head>
<style type="text/css">
<!--
h1:first-letter{
color:red;
}
td:first-letter{
color:red;
}
-->
</style>
<body>
<h1>1234</h1>
<table>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
</html>

657 :Name_Not_Found:05/03/15 20:10:27 ID:???
>>656
blockにしか効かないのがCSS2仕様ですが

658 :Name_Not_Found:05/03/15 20:19:08 ID:???
>>657
う、仕様でしたか。
IE、ネスケ、火狐だと効いたので、Operaが変なのだと思ってました。
どもです。

659 :Name_Not_Found:05/03/16 02:32:49 ID:???
>>657-658
http://www.w3.org/TR/CSS21/selector.html#x53
> The :first-letter pseudo-element applies to
> block, list-item, table-cell, table-caption and inline-block elements.

660 :Name_Not_Found:05/03/16 02:52:03 ID:???
>>657
Opera7(CSS2.1)に対してCSS2の話は不適切だが、一応。
(つうか、お前のような初心者こそが調べなきゃならんわけだが。)

http://www.w3.org/TR/CSS2/selector.html#x52
> The :first-letter pseudo-element matches parts of block-level elements only.

http://www.w3.org/TR/CSS2/visuren.html#block-level
> Block-level elements are those elements of the source document
> that are formatted visually as blocks (e.g., paragraphs).
> Several values of the 'display' property make an element block-level:
> 'block', 'list-item', 'compact' and 'run-in' (part of the time; see compact and run-in boxes), and 'table'.

661 :Name_Not_Found:05/03/16 04:18:30 ID:???
初心者つうかにわか知識の自称中級者くさい

662 :Name_Not_Found:05/03/16 18:06:26 ID:???
更新されないね。
http://cssbug.at.infoseek.co.jp/index.html

663 :Name_Not_Found:05/03/16 22:18:47 ID:???
まだぎゃあぎゃあ騒いでんのか鬱陶しいな。

664 :Name_Not_Found:05/03/17 02:05:00 ID:???
報告です。
絶対既出だろうと思ったんだけど見つけられなかった…。

Win/IE5で画像にリンクを設定してa:hover{color:;}とかで
ボーダーの色が変えられない。Macではちゃんと変えられる。
さっきまでhttp://pc5.2ch.net/test/read.cgi/hp/1110236393/292-
質問してたんですが、対処法は↓のリンクにある
JavaScriptを使う方法しかないんでしょうか?

参考URL:
GAC HTML[3542] オンマウスで変化する画像の枠線
ttp://www.gac.jp/article/index.php?stats=question&command=msg&category=3&id=3542

665 :Name_Not_Found:05/03/17 03:23:27 ID:???
a:hover img{color: ;} とかじゃダメですか?

666 :Name_Not_Found:05/03/17 12:33:30 ID:???
>>664-665
わかってないのに質問したり回答したり。
a:hover img {border:1px solid #f00;} で、出来る。
できないのは単にIE5なんて古いヴァージョン使ってるからだろ。
borderプロパティーがインライン要素にも適用可能になるのはWinIE5.5からだよ。

667 :Name_Not_Found:05/03/17 12:42:12 ID:???
>>666
CSS対応状況表
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/box.html#border
>border
>Win版 MSIE 4〜5
>非置換インライン要素に対して指定しても効果がない。

imgは置換インラインだが……。

668 :Name_Not_Found:05/03/20 15:50:45 ID:axLq7onW
http://game10.2ch.net/test/read.cgi/ff/1110811488/
の330からしたが表示がなんかおかしい
改行に幅ができるし

669 :Name_Not_Found:05/03/20 16:29:33 ID:???
>>668
確かにそれもIEのバグだけどなー。
でも、今更指摘されてもという感じもしなくもない。

670 :Name_Not_Found:05/03/20 17:52:47 ID:???
たぶん、これ。

シリア語ブラクラ【しりあごぶらくら】[名]
WindowsXPでInternet Explorerの機能を使った
2ちゃんねるブラウザを使用した際に
突然行間が開いて表示されるために
AAが見にくくなるというブラクラの一種。
フォント"Estrangelo Edessa"に含まれるシリア語の文字
(Unicodeの1792番から1871番)を表示する際に起こる不具合を
利用しているのでこう呼ばれる。
対処としては上記フォントを削除するか、
&#179と&#18を半角にしたものを表示しない(あぼ〜ん)設定にすればよい

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

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

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)