X

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

0001Name_Not_Found
垢版 |
2006/04/08(土) 20:05:59ID: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あたりで。
0246Name_Not_Found
垢版 |
2007/06/14(木) 02:31:11ID:???
Safari3は正式版がリリースされるのを待ったほうがよさそうだね。
0248Name_Not_Found
垢版 |
2007/06/14(木) 15:18:41ID:???
ところで新Wikiってさ、最近更新されたページの一覧とかないの？
0252251
垢版 |
2007/06/20(水) 16:14:29ID:???
日本語フォントを1番目に指定すれば化けなかったスマン
しかしそうすると欧文フォント指定できなくなるな参った
0253Name_Not_Found
垢版 |
2007/06/20(水) 16:21:44ID:???
そんな記号使わんから問題なし
0255242
垢版 |
2007/06/23(土) 12:04:37ID:???
Safari の日本語のフォントスタイル名(2バイト文字)が指定できないバグは、
3.0.2 beta で修正されたようです。意外と対応が速かったですね。
0256Name_Not_Found
垢版 |
2007/06/23(土) 18:46:55ID:???
>>255

４，５年のうちは1バイトで書かないとだめだろうけどなー
0257Name_Not_Found
垢版 |
2007/06/23(土) 21:05:35ID:???
つーかSafariはデフォフォントが綺麗だから
指定する気になれないなー。
0258Name_Not_Found
垢版 |
2007/06/26(火) 22:29:32ID:???
| それは昔から

って、1.x の正式版以降 2.x までずっとだいじょうぶなんだが。
0259Name_Not_Found
垢版 |
2007/06/27(水) 00:48:03ID:???
>>258
>>・font-family に 日本語のフォントスタイル名(2バイト文字)を指定すると無効。
>って、1.x の正式版以降 2.x までずっとだいじょうぶなんだが。

2でもおかしかった気がするけど？

Safariはマルチバイト文字の処理に弱いからねえ
3はマシになりそうだね
良い感じ
0260Name_Not_Found
垢版 |
2007/06/29(金) 23:43:20ID:???
Safariのバグ

<div class="nav">
　<ul>
　 　<li>
　 　<li>
　</ul>
</div>


div.nav { position: relative; }
div.nav ul { margin: 0; padding: 0; position: absolute; right: 0; top: 0; }
div.nav li { margin: 0 4px; }


absolute配置した要素の子要素?(リストの場合のみ？)に水平marginがあると、
ボックスサイズが文字の幅より小さく表示される
(結果、文字が２行に折り返される)
0261Name_Not_Found
垢版 |
2007/06/29(金) 23:44:01ID:???
あ、ｽﾏｿw
ソースは↓の間違いね

<div class="nav">
　<ul>
　 　<li>リスト</li>
　 　<li>リスト</li>
　</ul>
</div>
0262Name_Not_Found
垢版 |
2007/06/29(金) 23:49:13ID:???
何度もｽﾏｿｗ

CSSも間違ってた

<div class="nav">
　<ul>
　 　<li>リスト</li>
　 　<li>リスト</li>
　</ul>
</div>

div.nav { position: relative; }
div.nav ul { margin: 0; padding: 0; position: absolute; right: 0; top: 0; }
div.nav li { margin: 0 4px; padding: 0; display: inline; }


absolute配置したリストの子のli要素をインラインボックスにしてる場合になるみたいだ。
リストマーカー関連のバグかな。ちなみにli要素の内容が英数字でも発生。
0263Name_Not_Found
垢版 |
2007/07/02(月) 05:07:12ID:???
>>262
Windows XP + Safari 3.0.2では発生しなかった。
OSとSafariのバージョンは？
0264Name_Not_Found
垢版 |
2007/07/02(月) 05:13:17ID:???
>>263

Win+Safari 3.0.2だねえ
ちなみに、floatのクリアはdiv.nav:afterの内容生成でclearしている

もうちょいテストしてみる
0265Name_Not_Found
垢版 |
2007/07/02(月) 20:22:57ID:???
>>264
>float
>>262のソースコードにフロートはなさそうなんだけど？
0266Name_Not_Found
垢版 |
2007/07/03(火) 19:48:32ID:???
某掲示板で質問されてたやつだけど原因が分からない。これってIEバグ？
ttp://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=690
(float:leftに後続するiframeにwidth:80%を指定していると右端が切れる)
右ボーダーまで消えちゃってる(リサイズすると出る)。
0267Name_Not_Found
垢版 |
2007/07/03(火) 20:01:02ID:???
それ以前にそんなサイト参考にすんな
0268Name_Not_Found
垢版 |
2007/07/03(火) 21:00:48ID:???
【環境】Firefox 2.0.0.4
【症状】:after疑似要素にdisplay:blockを適用して絶対配置にすると、包含
ブロックの高さが疑似要素の生成するボックスを含めるように引き伸ばされる
【ソース】
div
{
border: 1px solid blue;
width: 200px; height: auto;
}
div:after
{
border: 1px solid red;
width: 100px; height: 100px;
position: absolute;
display: block;
content: " ";
}

<div>
テスト
</div>
0269268
垢版 |
2007/07/03(火) 21:04:22ID:???
訂正
【症状】:after疑似要素にdisplay:blockを適用して絶対配置にすると、親要
素のボックスの高さが疑似要素の生成するボックスを含めるように引き伸ばされる
0270268
垢版 |
2007/07/03(火) 21:12:44ID:???
検証してみたところ、これが原因みたい。
【環境】Firefox 2.0.0.4
【症状】display:blockを適用した:before/:after疑似要素を絶対配置にする
ことができない
【ソース】
div
{
border: 1px solid blue;
width: 200px; height: 200px;
position: relative;
}
div:before
{
border: 1px solid red;
width: 100px; height: 100px;
position: absolute;
right: 0; bottom: 0;
display: block;
content: " ";
}
0271268
垢版 |
2007/07/03(火) 21:14:46ID:???
もう一つ。
【環境】Firefox 2.0.0.4
【症状】:before/:after疑似要素をフロートにすることができない
【ソース】
div
{
border: 1px solid blue;
width: 200px; height: 200px;
position: relative;
}
div:before
{
border: 1px solid red;
width: 100px; height: 100px;
display: block;
float: right;
content: " ";
}

<div>テストテストテストテストテストテストテストテストテストテスト</div>
0272Name_Not_Found
垢版 |
2007/07/04(水) 09:36:49ID:???
【環境】Firefox 2.0.0.4
【症状】address要素内で、a要素の文字の大きさが反映されない。
【ソース】
<head>
<style type="text/css">
<!--
address {
font-size: 0.8em;
font-style: normal;
line-height: 1.2;
}
//-->
</style>
</head>

<body>
<address>
〒612-8363<br>
京都市伏見区納屋町112<br>　　　　岩田納屋町ビル3F<br>
Email：<a href="mailto:nozomi-104@zpost.plala.or.jp">nozomi-104@zpost.plala.or.jp</a><br>
TEL：075-602-2341<br>
FAX：075-602-0534
</adress>

</body>

0.8emのフォントを指定しているのに、a要素内だけ反映されていません。
0273Name_Not_Found
垢版 |
2007/07/04(水) 09:47:21ID:???
>>272
WinXP Fx 2.0.0.4
font-sizeを0.5em、2emで試したが標準モード、互換モードともに再現せず。
0274Name_Not_Found
垢版 |
2007/07/04(水) 09:53:52ID:???
>>273
ありがとう。
ということは自分の環境の問題ですか。
0275Name_Not_Found
垢版 |
2007/07/04(水) 09:58:39ID:???
あっ、アホだ。。。

自分のスタイルシートを適応するアドオンを使ってた。。。
しかも質問スレに書くつもりがこのスレに書いていた。。。
0276Name_Not_Found
垢版 |
2007/07/04(水) 17:47:32ID:???
>>242
・全角フォント名をエスケープすれば有効になる
・全角フォント名をエスケープしても無効になる
意見が割れているので、マカーに調査して貰えないだろうか？
@charsetや、エスケープ単体か混在で変わるかもしれんし……
0277Name_Not_Found
垢版 |
2007/07/16(月) 01:21:10ID:Uk2IR3ON
マクは知らんのでWindows系で

<p style="font-size:12px;">じゅーにぴくせる</p>

これを画面設定のDPI設定で
96dpi（通常/小さなサイズ）にした場合と大きなサイズ（120dpi）にした場合
（それ以外のカスタム設定でもいいけど）で
IE→フォントの大きさが変わる
Fx→フォントの大きさが変わらない

DPIの概念からしたらIEの方が正しい動作のような気がするんだけど、
どっちにしてもどちらかがおかしい？
0279Name_Not_Found
垢版 |
2007/07/16(月) 03:00:12ID:???
>>277
どっちかといえばIEのほうが間違い。
300dpiのプリンタで印刷したとき極小文字になったりしたら困るだろ。
まあ96dpiと120dpiならIEの動作もぎりぎり許容範囲内かなと思わなくもないが。
0280Name_Not_Found
垢版 |
2007/07/16(月) 03:08:34ID:???
>>279
そりゃ解像度が違っててサイズが同じだった場合の話だろ。
0281Name_Not_Found
垢版 |
2007/07/16(月) 03:26:37ID:???
htmlで文字サイズ指定したらどうなんよ？
0282Name_Not_Found
垢版 |
2007/07/16(月) 04:53:48ID:???
htmlで解像度依存のフォントサイズ指定なんてできないだろう・・・
0283Name_Not_Found
垢版 |
2007/07/17(火) 02:21:29ID:???
>>277
ウェブ関連は96dpiが標準になってるって聞いたことがあるけど…。
0284Name_Not_Found
垢版 |
2007/07/17(火) 02:45:42ID:???
標準というか、まあ96dpiをひとつの基準とすることが推奨されてはいるけど。
ttp://www.w3.org/TR/2006/WD-CSS21-20061106/syndata.html#length-units
> It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

だから240dpiの高精細ディスプレイとかあったら、当然1px≠1ドットにすべきなんだよね。
> If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.
でも120dpiが*very* differentかというとそこは実装依存のような気がする。
つまりIEもFxも間違いとはいえないんじゃないかと。
まあ極端なこと言っちゃえばrescaleすること自体shouldであってmustではないし。
0285Name_Not_Found
垢版 |
2007/07/17(火) 15:02:12ID:???
120pxじゃなくて、96dpi→100dpiぐらいの僅かな変更でもフォントサイズは変
わんないんだろうか。まあ、変わらなくてもバグとは言えないと思うが。
0287Name_Not_Found
垢版 |
2007/07/22(日) 09:44:25ID:???
Windowsでdpiの値を変更しても、画面解像度が変わるのではなくててフォント
サイズが変わるだけでしょ。画面の解像度(1024+768等)にフォントサイズあわ
せてやってもよいと思う。というか、Windowsのdpiの設定を有効にすると1px
の長さがfont-sizeプロパティとそれ以外で変わってしまうような。
0288Name_Not_Found
垢版 |
2007/07/24(火) 15:37:33ID:???
そもそも文字の大きさだけが変わるWindowsの設定自体が
なんか変だと思うんだが・・・
0289Name_Not_Found
垢版 |
2007/07/30(月) 16:15:35ID:???
【環境】Internet Explorer 7
【症状】text-align:centerでブロックレベル要素が中央寄せされる
【ソース】
div
{
text-align: center;
border: 2px solid red;
width: 300px;
}
div div
{
text-align: left;
border: 2px solid blue;
width: 200px;
}
<div>
<div>テスト テスト テスト テスト テスト テスト </div>
</div>

IE7の標準モードでも発生。まだ直ってなかったのか。
0290Name_Not_Found
垢版 |
2007/07/30(月) 16:23:45ID:???
>>289

それってIE7で修正されたんじゃなかったっけか？


と思ってやってみたら直ってないねｗ


IE7発表から1年も立ってないが、ゴミだよなあ
0291Name_Not_Found
垢版 |
2007/07/30(月) 22:06:49ID:???
【環境】Opera 9.20
【症状】li要素の最初の子要素にoverflow:autoが指定されているとマーカー
が表示されない
【ソース】
div { overflow: auto; }
<ol>
<li>test1</li>
<li><div>test2</div></li>
</ol>
<ul>
<li>test1</li>
<li><div>test2</div></li>
</ul>
0292Name_Not_Found
垢版 |
2007/07/31(火) 19:11:44ID:???
たぶんバグだと思うので一応
【環境】Internet Explorer 7
【症状】body要素の最初の子要素に上マージンが設定されているとbody要素の
上パディングが無視される
【ソース】
*
{
margin: 0;
padding: 0;
}
body
{
padding-top: 50px;
border: 2px solid blue;
width: 300px;
}
div
{
margin-top: 100px;
border: 2px solid red;
width: 200px;
}
<body>
<div>テスト テスト テスト テスト テスト テスト </div>
</body>
0293Name_Not_Found
垢版 |
2007/08/01(水) 21:05:28ID:???
>>292を訂正
【環境】Internet Explorer 7
【症状】幅が明示されていると親要素の上パディングと子要素の上マージンの
うち値の小さい方が無視される
【ソース】
*
{
margin: 0;
padding: 0;
}
div#boxA
{
padding-top: 70px;
background: lime;
width: 200px;
}
div#boxB
{
margin-top: 50px;
background: yellow;
width: 200px;
}
<div id="boxA">
<div id="boxB">test</div>
</div>

本来120pxの空白ができるはずなのに、70pxになってしまう。
0295Name_Not_Found
垢版 |
2007/08/04(土) 01:50:59ID:???
まー、増えたりはしないだろうけど
0296Name_Not_Found
垢版 |
2007/08/04(土) 02:05:51ID:???
1歩進んで2歩下がるんだな。。
0297Name_Not_Found
垢版 |
2007/08/05(日) 00:21:04ID:???
【環境】Internet Explorer 6
【症状】最初の子要素にdisplay:noneが指定されていると、相対位置決めされ上
パディングを持つ要素の背景色指定が無効になる
【ソース】
div#boxA
{
background: yellow;
position: relative;
padding-top: 1px;
}
div#boxB
{
display: none;
}

<div id="boxA">
<div id="boxB">boxB</div>
<div>test</div>
</div>

IE6の標準モード、後方互換モードで発生。
0298Name_Not_Found
垢版 |
2007/08/07(火) 17:02:54ID:???
ttp://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher

IEを華麗に撃墜する一行


はい！ こんにちは！！！！！
今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね！

これだよ！

<style>*{position:relative}</style><table><input></table>
0299Name_Not_Found
垢版 |
2007/08/07(火) 20:27:35ID:???
>>298
IE 7/6/5.5ユーザーは、ユーザースタイルシートを追加して回避する。
table * { position: static !important;}

バグ原因は、table と フォーム(input|textarea|...)要素間に現れる
謎の空要素に position:relative が指定される事で発動するらしい。
http://pc11.2ch.net/test/read.cgi/win/1175925637/559-561
0300Name_Not_Found
垢版 |
2007/08/08(水) 22:12:39ID:???
今回のはまちちゃんのクラッシュバグは、input(インラインフォーム要素) が
必須トリガーで無く、table + テキストでも同様のバグが発生する模様です。
ttp://sdp.katteyomi.info/?p=10

不正 table 記述により生成された"謎の空ブロック要素"が、インライン要素や
テキストを包み、その要素がポジショニング(relative | absolute | fixed)
される事で起きる様子..。
0301Name_Not_Found
垢版 |
2007/08/25(土) 12:23:58ID:X/4SavXL
【OS】　XP
【ブラウザ】　firefox 2.0.0.6
【症状】　overflow: auto; と border を指定した<pre>を連続して使用した場合に
borderのbottom部分が消える箇所がある。

スクショです。
ttp://vista.jeez.jp/img/vi8801214676.jpg
0302Name_Not_Found
垢版 |
2007/08/25(土) 19:17:54ID:???
>>301

消えるんじゃなくて
ボーダーが化けたりもするよね
0303Name_Not_Found
垢版 |
2007/09/05(水) 17:39:26ID:???
【環境】
Opera9.22 / Windows XP home
【現象】
labelタグに対するmargin-topとmargin-bottomが効かない。
【ソース】
<html>
<head>
<style type="text/css">
<!--
input{margin-top:3em;}
label{margin-top:3em;}
-->
</style>
</head>
<body>
<input type="checkbox" name="cat" id="cat" value="cat" />
<label for="cat">ねこ</label>

<input type="checkbox" name="dog" id="dog" value="dog" />
<label for="dog">いぬ</label>

<input type="checkbox" name="rabbit" id="rabbit" value="rabbit" />
<label for="rabbit">うさぎ</label>
</body>
</html>

IE6、FireFox2.0.0.4では、そもそもinputにmargin指定をするだけで、
それに対するlabel要素も一緒にmarginが入ります。
Operaでは、inputのみに指定したときも、inputとlabel双方に指定したときも、
どちらもlabel要素は動きませんでした。

どちらが正しい挙動なのか不明ですが…。
0304Name_Not_Found
垢版 |
2007/09/07(金) 16:03:16ID:LEnajBV0
>>303
Fxだってlabelに対するmargin-topは効かない。
labelはインライン要素で、インライン要素に対する上下marginは無視される。
つまりOperaの動作は正しい。
そもそもソースが間違っている。formがない上、
(strictなら)formの中身はブロック要素が必要。
IEは非検証。
0305Name_Not_Found
垢版 |
2007/09/19(水) 02:04:17ID:w91na6/+
【環境】
IE6(7は未検証)

【現象】
list-style-positio: inside のとき
list-sytle-type: none とすると、リストマーカーボックス分の余白が空く

【ソース】
<ul>
<li>リスト</li>
</ul>

ul { list-style: none inside; }



FirefoxやOperaだと余白は空かない = マーカーボックスは生成されない(?)
(display: none に近い挙動)

IEの場合はマーカーボックスは生成されてる(?)
(visibility: hidden に近い挙動)

既出？
0306Name_Not_Found
垢版 |
2007/09/19(水) 04:25:05ID:???
>>305
それは単にmargin-leftを指定しない場合の解釈の違いじゃね？
0307Name_Not_Found
垢版 |
2007/09/19(水) 08:35:26ID:???
>>306

いや、margin-left: 0 にしても
IEはリストマーカー分の余白が空く

すまん、書き忘れた
IE6の後方互換(Quirks)モードね

標準モードでもあとで試してみるわ
0308Name_Not_Found
垢版 |
2007/09/19(水) 10:22:07ID:???
>>305
後方互換モード、標準モードのIE6,7で再現できた。
0309Name_Not_Found
垢版 |
2007/09/19(水) 14:10:44ID:???
>>308

ありがとう
やっぱおかしいよね

でも、バグではなく解釈の違いってことなのかな
どっちにしてもIEだけ違うのでしばらく考えたよ


【解決策】
　IEでlist-style-type: none にするときは、list-style-position: outside にする。

ショートハンド使って、

　list-style: none outside;

でOKだね。
0310Name_Not_Found
垢版 |
2007/09/19(水) 14:37:11ID:???
というかそもそも表示しないんだからinsideにする必要性自体が存在しないというか。
0311Name_Not_Found
垢版 |
2007/09/19(水) 15:39:30ID:???
>>310

必要性が存在しない　の意味がわからないなあ
CSSなんだから、カスケーディングで継承されるでしょ

まさか要素ごとに全部プロパティ定義してるんなら理解できるけど…

継承前に list-style: disc inside とかあったら、
非表示のたびに list-style: none outside って書かないとだめ
0312Name_Not_Found
垢版 |
2007/09/20(木) 12:20:59ID:bclnFN38
環境：MAC Safari1〜2
症状：ピクセルで幅指定していないクリアボックス
の中のテーブルがセンタリングされない。

body,div,td{ text-align:center;}
div,table{ margin-left:auto; margin-right:auto;}

<div style="width:600px;">

<p style="width:300px; float:right;">フロート</p>
<p style="width:300px; float:left;">フロート</p>

<div style="width:100%; clear:both; background-color:#eee;">

<table width="300">
<tr><td>テーブル</td></tr>
</table>

</div>

</div>
0313Name_Not_Found
垢版 |
2007/09/20(木) 12:32:52ID:???
>>312
意味不明なんで最小単位でやりたいことを言ってくれ・・・
0314Name_Not_Found
垢版 |
2007/09/22(土) 01:03:27ID:???
IE6 で select の label をクリックすると一番上が選択されるのは既出だよね？
0316Name_Not_Found
垢版 |
2007/09/24(月) 01:00:42ID:dtO1xwtG
初書き込み_o_
IE6で確認。display:none または visibility: hidden な要素中に
append された form は、ENTER で submit できない。
可視状態で form を構築したあと display: none しておけば、
その後 display: block で表示しても ENTER が効く。

textfield 個数問題とは別のバグと考えます。
0317Name_Not_Found
垢版 |
2007/09/24(月) 01:23:53ID:dtO1xwtG
サンプル付けときます。IE で再現するはず。
<html>
<head>
<script type="text/javascript">
function toggle(id) {
var elem = document.getElementById(id);
//*
if (elem.style.visibility == 'hidden')
elem.style.visibility = 'visible';
else
elem.style.visibility = 'hidden';
/*/
if (elem.style.display == 'none')
elem.style.display = 'block';
else
elem.style.display = 'none';
//*/
}
var form = '<form onsubmit="alert(\u0027submit\u0027); return false;">'
+' <input type="text" name="text"/><br />'
+' <input type="text" name="text2"/><br />'
+' <input type="text" name="text3"/>'
+' <input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />'
+'</form>';
0318Name_Not_Found
垢版 |
2007/09/24(月) 01:25:11ID:???
続
function show3() {
var e = document.getElementById('testDiv3');
e.innerHTML = 'Form3(可視要素へのinnerHTML:Enter効く)' + form;
}
function show4() {
var e = document.getElementById('testDiv4');
if (e.style.display == 'block') return;
e.innerHTML = 'Form4(非可視要素へのinnerHTML:Enter効かない)' + form;
e.style.display = 'block';
}
</script>
</head>
0319Name_Not_Found
垢版 |
2007/09/24(月) 01:27:17ID:???
続
<body>
<button onclick="toggle('testDiv1')">フォーム1表示</button>
<button onclick="toggle('testDiv2')">フォーム2表示</button>
<button onclick="show3()">フォーム3表示</button>
<button onclick="show4()">フォーム4表示</button>
<div id="testDiv1">
Form1(初期状態可視:Enter効く)
<form onsubmit="alert('submit'); return false;">
<input type="text" name="text"/><br />
<input type="text" name="text2"/><br />
<input type="text" name="text3"/>
<input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />
</form>
</div>
<div id="testDiv2" style="visibility: hidden;">
Form2(初期状態非可視:Enter効かない)
<form onsubmit="alert('submit'); return false;">
<input type="text" name="text"/><br />
<input type="text" name="text2"/><br />
<input type="text" name="text3"/>
<input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />
</form>
</div>
<div id="testDiv3"></div>
<div id="testDiv4" style="display: none"></div>
</body>
</html>
0320Name_Not_Found
垢版 |
2007/09/24(月) 01:57:10ID:dtO1xwtG
すみません。考えてみれば上のは CSS/DHTML バグとは言いにくかったです_o_。

別の話ですが、厳密な再現条件突き止められてないんですが、IE で z-index: 10000 とかしてても以降に記述された要素の裏に回ってしまう問題で悩んでいるんですが情報ありませんでしょうか？
周りに iframe なし、relative は結構使ってます。
0321Name_Not_Found
垢版 |
2007/09/24(月) 04:26:22ID:???
お前どこまで図々しいわけ？
スレ汚しにも程がある。初心者質問スレ行けボケ。
0323Name_Not_Found
垢版 |
2007/09/29(土) 03:53:48ID:???
【環境】Opera 9.23
【症状】pre要素内で一つ目の改行が反映されない
【ソース】
.hoge pre:first-line
{
white-space: normal;
}

<pre>01...
02...
03...</pre>

そもそもセレクタがマッチするはずないのですが。
0324Name_Not_Found
垢版 |
2007/10/06(土) 02:00:02ID:???
【環境】Opera 9.23
【症状】html要素にheightプロパティ、body要素にmin-heightプロパティをパー
セント値で指定すると、ウィンドウをリサイズしたときにbody要素の高さが変
更されない
【ソース】
* { margin: 0; padding: 0; }
html {
height: 100%;
background: gray;
}
body {
min-height: 100%;
background: silver;
}

<body>
<div>
テスト テスト …
</div>
</body>
0325Name_Not_Found
垢版 |
2007/10/06(土) 02:33:33ID:???
補足：
* { margin: 0; padding: 0; }
html {
height: 100%;
border: 10px solid red;
}
body {
min-height: 100%;
border: 10px solid blue;
}

こんな風にボーダーをつけてみると、Opera 9.23ではbody要素の高さがおかし
くなる。
0326Name_Not_Found
垢版 |
2007/10/06(土) 04:30:48ID:???
すみません、>>325の訂正です。

【環境】Opera 9.23
【症状】heightプロパティが指定された要素の子要素にmin-heightプロパティ
をパーセント値で指定すると、高さが余分に高くなる
【ソース】
div#boxA {
border: 10px solid red;
height: 200px;
}
div#boxB {
border: 10px solid blue;
min-height: 100%;
}

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

boxAとboxBの上ボーダーの幅の合計分だけ高くなるみたいです。
0327Name_Not_Found
垢版 |
2007/10/06(土) 04:48:37ID:???
>>324
レンダリングの問題

>>326
当然の仕様

バグとは何か、少なくともこのスレでは仕様書と異なる挙動をバグと呼ぶ
何でもバグ扱いするのは間違い
0328Name_Not_Found
垢版 |
2007/10/06(土) 06:43:11ID:???
>>327
>レンダリングの問題
>>324については、普通ウィンドウをリサイズした場合、高さや幅などを再計
算して描画するはずなのに、それができていないってことだと思ったのです
が、なにか違うんでしょうか。

>>326
>当然の仕様
よくわからないので、できれば詳しい解説お願いします。(仕様ということは、
Opera9が正しくてFirefox2、Konqueror3、Safari3がバグ持ちってことになる？)
0329Name_Not_Found
垢版 |
2007/10/07(日) 16:39:15ID:???
あれ…誰もいない？

一晩おいて考えてみたけれど、>>327の主張は

・ウィンドウをリサイズしたときに仕様通りに表示できないのは仕様違反では
ない(=バグではない)←理由がわからない
・min-heightプロパティをパーセント値で指定したときは高さを余分に高くす
るという特別な規定が仕様で定められている←仕様書からは見つけられず

と、どちらも根拠がないように思った。
0330Name_Not_Found
垢版 |
2007/10/07(日) 18:57:34ID:???
【環境】Internet Explorer 7
【症状】絶対配置した要素の子要素に:hover疑似クラスを指定しても、その要
素の子要素の内容領域か上マージン領域にマウスポインタを合わせたときにし
かホバー状態にならない
【ソース】
div#boxA { position: absolute; }
div#boxB { border: 10px solid red; }
div#boxB:hover { border: 10px solid blue; }
div#boxC
{
margin: 10px; padding: 15px;
border: 10px solid yellow;
}

<div id="boxA">
<div id="boxB">
<div id="boxC">test</div>
</div>
</div>

標準モードのみで発生。
0331Name_Not_Found
垢版 |
2007/10/07(日) 21:09:05ID:???
>>329
親要素の高さがmin-heightで設定されると思ってるのか？
0332Name_Not_Found
垢版 |
2007/10/07(日) 21:16:28ID:???
>>329は仕様書もろくに読まずバグと決めつける愚か者。
会話は成立しないので注意。
0333Name_Not_Found
垢版 |
2007/10/08(月) 02:39:39ID:???
>>331
>>324と>>326のどちらに対する指摘なのかわからないのですが…。

補足しておくと、>>324のコードでは、html要素のボックスの高さが初期包含
ブロックである表示域の高さとなり、body要素のボックス高さもそれと同じに
なるはずなのですが、最初に表示したときはそうなっているものの、リサイズ
するとそうならないので、仕様違反であると思われます。リサイズしたあとに
リロードすると、同じサイズの表示域でもリロードする前とbody要素の高さが
変わっています。

>>326についてはCSSを次のものに置き換えてもらうとわかりやすいかと思います。
(例示がわかりにくくてすみませんでした。)

div#boxA { height: 200px; border: 10px solid red; }
div#boxB { min-height: 90%; border: 10px solid blue; }

boxBの包含ブロックの高さはboxAの内容領域の高さである200pxになるので、
boxBがboxAの内容領域にちょうど収まるはずです(10px + 200 * 0.9 + 10px = 200px)。
Firefox 2、Konqueror 3、Safari 3ではそのように表示されますが、Operaだ
けはboxBの内容領域の高さがちょっとだけ高くなります。

>>332
間違いがあるのなら、仕様書を根拠にどこが間違っているのか指摘してください。
0334Name_Not_Found
垢版 |
2007/10/09(火) 20:41:43ID:???
>>333
ここはバグ報告スレッドであって質問スレッドではない。出てけ。
0335Name_Not_Found
垢版 |
2007/10/09(火) 21:54:43ID:???
1. 包含ブロックにheightの値を<length>で指定
2. ブロックレベル非置換要素にmin-heightの値を100%で指定
3. ブロックレベル非置換要素の計算されたheightの値が
min-height(=包含ブロックのheight)より小さい

んだったらmin-heightをheightの指定値として使用するわけだから
borderで内容の高さが変わるなんていうのはバグだろ
0336Name_Not_Found
垢版 |
2007/10/10(水) 22:52:22ID:???
>>334
だから、>>324>>326でバグを示したら「それはバグではない」という趣旨のレ
スをもらったものの、理由が不明確だから、仕様書を根拠にした説明を求めて
るの。バグではないというのなら「仕様書にこう書かれており、Operaはその
通りに表示しているだけだ」と説明できるはずでしょう。
0337Name_Not_Found
垢版 |
2007/10/10(水) 23:38:15ID:???
>>336
もっともな話だと思うが
仕様書に載ってないなら、
各ブラウザ制作者の判断
ということもあり得ると思うよ。
0338Name_Not_Found
垢版 |
2007/10/10(水) 23:42:38ID:???
>>336
>>324がバグという主張は、再現しないため同意出来ない。
>>326は、包含ブロックのheightにborder分を含めて計算しているようだから、
バグなのだろう。
数値指定では起こらないし、width:100%;でも起こらない面白いバグ。
0339Name_Not_Found
垢版 |
2007/10/11(木) 03:06:00ID:???
>>337,338
どうもです。>>326についてはバグと言って問題なさそうなので、Wikiに書い
ておきました。

>>324は、うちの標準モードのOpera 9.23(Windows XP SP2/Ubuntu 7.04)とい
う環境では下の画像のように表示されます。
http://doiob.net/doiob/uploader/src/up11322.png
環境によっては再現しないのかもしれません。
0340Name_Not_Found
垢版 |
2007/10/13(土) 02:36:22ID:???
　　　　　　　　 ＿＿＿_　　　　　　　　　
　　　　　　　／　　 　 　＼　　　　　　　　
　　　　 　／　　─　 　 ─＼　　　　「作者の環境では再現しません」・・・か
　　　　／ 　　 （●） 　（●） ＼　　　　 　　　　　 　　　　
　　　　|　 　　 　 （__人__）　 　 |　＿＿＿＿＿＿＿_ 　　　
　 　　 ＼　　 　　 ｀ ⌒´ 　 ,／　| |　　　　　　　　　　| 　
　　　　ノ　　　　　　　　　　　＼　| |　　　　　　　　　　| 　
　 ／´ 　 　　　　　　　　　　　 　 | |　　　　　　　　　　| 　
　|　　　　ｌ 　 　 　 　 　 　　　　　| |　　　　　　　　　　|
　ヽ　　　 -一ー_~､⌒)^),-､　　　| |_＿＿＿＿＿＿__| 　　
　　ヽ ＿＿＿＿,ノγ⌒ヽ)ニニ-￣　　　| |　　| 　　　　　

　　　　　 　　　＿＿＿_
　　　　　　　／　　 　 　＼
　　　　 　／　＼　 　／　 ＼　　　これは便利な言葉ですね
　　　　／ 　（●） 　 （●）　 ＼ 　　
　　　　|　 　　 （__人__）　　 　 |　 ＿＿＿＿＿＿＿_
　 　　 ＼ 　　　｀ ⌒´　　　 ,／　| |　　　　　　　　　　|
　　　　ノ　　　　　　　　　　　＼　| |　　　　　　　　　　|
　 ／´ 　 　　　　　　　　　　　 　 | |　　　　　　　　　　|
　|　　　　ｌ 　 　 　 　 　 　　　　　| |　　　　　　　
0341Name_Not_Found
垢版 |
2007/10/20(土) 21:16:22ID:???
CSS・スタイルシート質問スレッドから報告するように誘導されました


<a href="〜" style="display:block;width:〜px;height:〜px;"><img src="〜" alt="〜"></a>
のように
A要素の中身がIMG要素で、A要素にdisplay:block;とwidthまたはheightを指定すると
WinIE5.0ではIMG要素上の左クリックが効かなくなります（outlineの線は出ます）
右クリックからリンクを開くを選べばリンク先に移動することができます
（A要素にpaddingやborderを指定するとpadding部分やborder部分だけが一応クリック可能になります）


バグらしいのですが既出ですか？
古いブラウザなのでもうとっくに既出だと思ったのですが
http://cssbug.at.infoseek.co.jp/
には載ってないようで
このスレを見て
http://mynotes.jp/cssbug/
にも行きましたが載っていないみたいで


詳細は
http://pc11.2ch.net/test/read.cgi/hp/1190261475/586-609
あたりです
0342Name_Not_Found
垢版 |
2007/10/21(日) 22:23:38ID:???
・・・IE5なんてもーどーでもいーよ・・・
0343Name_Not_Found
垢版 |
2007/10/24(水) 23:53:21ID:???
>>341
再現できた。古すぎて気がつく人がいなかったのかも。
0344Name_Not_Found
垢版 |
2007/10/26(金) 00:07:53ID:???
IE 7
背景色とマイナスマージン(とフロート?)の組み合わせで内容が消える。


<div style="margin-top: -1px; background: #FFFFFF">
<div sytle="float: left; widht: 100px;">
<p>内容</p>
</div>

<div sytle="float: right; widht: 100px;">
<p>内容</p>
</div>

<div sytle="clear: both;">
<p>内容</p>
</div>
</div>
0345Name_Not_Found
垢版 |
2007/10/26(金) 00:09:57ID:???
>>344

haslayout は 1 だし、内容もあるような高さにはなるんだけど
なぜかテキストだけが表示されない
フォームコントロールとかは表示される

IE 7、バグだらけだなあ・・・
新着レスの表示
レスを投稿する

ニューススポーツなんでも実況