CSS/DHTMLバグ辞典スレッド 第３版
>>164 とは？ 意味不明、ご示教あれ。
【NN7】
http://hw001.gate01.com/fate-devil/のdriftスタイルで異常発生とのこと。
http://pc2.2ch.net/test/read.cgi/hp/1053619342/398-421
>htmlにスタイルを適用させるのはｲｸないですか？NNがなぜか動かなくなるんですが。
>リンクの上にカーソルもってくたびに
>ｳｲﾝﾄﾞｳｻｲｽﾞが小さくなり最後には消えてしまう('A`)）ので。
【NN7】
http://hw001.gate01.com/fate-devil/のdriftスタイルで異常発生とのこと。
http://pc2.2ch.net/test/read.cgi/hp/1053619342/398-421
>htmlにスタイルを適用させるのはｲｸないですか？NNがなぜか動かなくなるんですが。
>リンクの上にカーソルもってくたびに
>ｳｲﾝﾄﾞｳｻｲｽﾞが小さくなり最後には消えてしまう('A`)）ので。
|
|
|
166 ：Name_Not_Found：03/06/04 20:39 ID:???
>>165
http://hw001.gate01.com/fate-devil/css/drift.css
これを
html {overflow:auto;}
body {overflow:auto;}
にすると確かにバグが起きた。
しかしdiv.menuへのright:20px;をleft:20px;にしたら、
ウィンドウ・サイズが小さくなるバグはなぜか起きなくなった。
http://hw001.gate01.com/fate-devil/css/drift.css
これを
html {overflow:auto;}
body {overflow:auto;}
にすると確かにバグが起きた。
しかしdiv.menuへのright:20px;をleft:20px;にしたら、
ウィンドウ・サイズが小さくなるバグはなぜか起きなくなった。
167 ：Name_Not_Found：03/06/04 21:23 ID:???
168 ：Name_Not_Found：03/06/04 21:32 ID:???
>>167
z-indexで負の値を使用するときには注意が必要です。
z-indexに負の値を指定した要素が消えてしまう(NN6〜)
http://cssbug.tripod.co.jp/detail/mozilla/b038.html
具体的な対処法は、スタイルシートに以下の記述を加えることです。
body {
position: relative;
left: 0;
top: 0;
z-index: 0;
}
z-indexで負の値を使用するときには注意が必要です。
z-indexに負の値を指定した要素が消えてしまう(NN6〜)
http://cssbug.tripod.co.jp/detail/mozilla/b038.html
具体的な対処法は、スタイルシートに以下の記述を加えることです。
body {
position: relative;
left: 0;
top: 0;
z-index: 0;
}
169 ：Name_Not_Found：03/06/04 21:35 ID:???
170 ：Name_Not_Found：03/06/04 21:40 ID:???
大体、z-indexに負の値使用する自体が糞ブラウザのあわれな宿命
171 ：Name_Not_Found：03/06/04 22:44 ID:???
>>168-170
クリックはできるんだからz-indexの問題ではないよ。
下記で試しても、移動できないとさ。
http://pc2.2ch.net/test/read.cgi/hp/1053619342/422-
html {overflow:hidden; height:100%;}
body {
height:100%;
margin:0;
overflow:auto;
}
div.menu {
position:absolute;
top:20px;
right:20px;/*left*/
width:150px;
}
クリックはできるんだからz-indexの問題ではないよ。
下記で試しても、移動できないとさ。
http://pc2.2ch.net/test/read.cgi/hp/1053619342/422-
html {overflow:hidden; height:100%;}
body {
height:100%;
margin:0;
overflow:auto;
}
div.menu {
position:absolute;
top:20px;
right:20px;/*left*/
width:150px;
}
172 ：Name_Not_Found：03/06/05 13:25 ID:???
>>166
むしろul.menuにpadding:0;を追加指定するといい。
cf. http://pc2.2ch.net/test/read.cgi/hp/1053619342/450-456
あるいは、div.menu a:hoverへのborder指定をコメントアウトする。
すると、リンクにカーソルをのせるとウィンドウ・サイズが小さくなるバグは、起きない。
逆にここからこのバグの再現条件を絞り込むと――
html {overflow:auto;/*height:100%;*/}
body {overflow:auto;height:100%;margin:0;}
div.menu{
position:absolute;
right:20px;
width:150px;
}
ul.menu{margin:0;/*padding:0;*/}
div.menu a:link, div.menu a:visited{
display:block;
width:145px;
}
div.menu a:hover {border:1px solid red;}
むしろul.menuにpadding:0;を追加指定するといい。
cf. http://pc2.2ch.net/test/read.cgi/hp/1053619342/450-456
あるいは、div.menu a:hoverへのborder指定をコメントアウトする。
すると、リンクにカーソルをのせるとウィンドウ・サイズが小さくなるバグは、起きない。
逆にここからこのバグの再現条件を絞り込むと――
html {overflow:auto;/*height:100%;*/}
body {overflow:auto;height:100%;margin:0;}
div.menu{
position:absolute;
right:20px;
width:150px;
}
ul.menu{margin:0;/*padding:0;*/}
div.menu a:link, div.menu a:visited{
display:block;
width:145px;
}
div.menu a:hover {border:1px solid red;}
173 ：Name_Not_Found：03/06/05 13:28 ID:???
>>167
http://pc2.2ch.net/test/read.cgi/hp/1053619342/475n
475 ：400=474 ：03/06/05 12:27 ID:???
html要素のバッググラウンド他を除けたらいままでのバグが解決しました。（IEとほぼ同じ表示）
ホイールが効かないのは仕様かな？
http://pc2.2ch.net/test/read.cgi/hp/1053619342/475n
475 ：400=474 ：03/06/05 12:27 ID:???
html要素のバッググラウンド他を除けたらいままでのバグが解決しました。（IEとほぼ同じ表示）
ホイールが効かないのは仕様かな？
http://pc2.2ch.net/test/read.cgi/hp/1053619342/485n
html{
height:100%;
overflow:hidden;
width:100%;
}
body{
height:100%;
margin:0;
overflow:auto;
padding:0;
width:100%;
}
これでバグが発生します。
絶対位置指定した要素内のリンクではバグは発生しないようです。
html{
height:100%;
overflow:hidden;
width:100%;
}
body{
height:100%;
margin:0;
overflow:auto;
padding:0;
width:100%;
}
これでバグが発生します。
絶対位置指定した要素内のリンクではバグは発生しないようです。
175 ：Name_Not_Found：03/06/05 15:01 ID:???
>>174
どんなバグかちゃんと説明しなさいって。
だいたいそれだけではバグは発生しないって。
a:hoverへの指定が問題になるはずだろが。
http://pc2.2ch.net/test/read.cgi/hp/1053619342/487n
どんなバグかちゃんと説明しなさいって。
だいたいそれだけではバグは発生しないって。
a:hoverへの指定が問題になるはずだろが。
http://pc2.2ch.net/test/read.cgi/hp/1053619342/487n
176 ：Name_Not_Found：03/06/05 15:05 ID:???
人の話も聞かずに自分の思い通りにならなかったらバグ扱いにする人がいるスレはここですか？
177 ：Name_Not_Found：03/06/05 15:21 ID:???
>>174
あ、誘導されて来たので。
バグは
http://hw001.gate01.com/fate-devil/bag.png
上がバグ前。下がバグ後。
画像のようにリンクの上を通ると（画像ではHTMLのバナー）スクロールバーがどんどん迫ってきます。
ただし、メニューのリンクはバグが起こりませんでした。
a:hover{
color:#802020;
background-color:#D5CADF;
}
この状態でバグは発生します。
画像リンクだとどんどん狭まっていき（↑の画像のように）テキストリンクだとスクロールバーが左右にガタガタします。
a:hover{
color:#802020;
}
これだとバグは発生しませんでした。
なので>>174とa:hoverに背景色を指定するとバグるようです。
あ、誘導されて来たので。
バグは
http://hw001.gate01.com/fate-devil/bag.png
上がバグ前。下がバグ後。
画像のようにリンクの上を通ると（画像ではHTMLのバナー）スクロールバーがどんどん迫ってきます。
ただし、メニューのリンクはバグが起こりませんでした。
a:hover{
color:#802020;
background-color:#D5CADF;
}
この状態でバグは発生します。
画像リンクだとどんどん狭まっていき（↑の画像のように）テキストリンクだとスクロールバーが左右にガタガタします。
a:hover{
color:#802020;
}
これだとバグは発生しませんでした。
なので>>174とa:hoverに背景色を指定するとバグるようです。
178 ：Name_Not_Found：03/06/05 15:30 ID:???
バグはバグだわな、一応。>>176
【IE6】
リンクにマウスオーバーして放した瞬間、bodyの横幅が変化して縦スクロール・バーが左右に動く。
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
margin:0;
overflow:auto;
width:100%;
}
a:hover { background-color:任意; }
a:link,a;visitedにbackground乃至background-colorを指定してある場合、
a:hoverのスタイルもそれと同じ指定にすれば、このバグは回避できる。
【IE6】
リンクにマウスオーバーして放した瞬間、bodyの横幅が変化して縦スクロール・バーが左右に動く。
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
margin:0;
overflow:auto;
width:100%;
}
a:hover { background-color:任意; }
a:link,a;visitedにbackground乃至background-colorを指定してある場合、
a:hoverのスタイルもそれと同じ指定にすれば、このバグは回避できる。
179 ：Name_Not_Found：03/06/06 02:21 ID:???
結局>>164は何だったのか。
>>153 WinIE108に追加。
>>156-157 WinIE092を修正。
>>161 WinIE109に追加。
>>154 >>159 次回追加（見逃していました）
>>158
小さい値を指定したときに、それより大きなマージンが
できるというのであれば、バグではないと思います。
>>162
IEの現象は文字列を行内で上に詰めようとすることが原因のようです。
N7の現象はline-heightの継承に関係があると思います。
>>165-177はうちで再現できていません。
Netscape7.02＠WinXPでは再現しないのか、何かが足りないのか……？
中途半端ですが夜も遅いので今日はここまで。
>>156-157 WinIE092を修正。
>>161 WinIE109に追加。
>>154 >>159 次回追加（見逃していました）
>>158
小さい値を指定したときに、それより大きなマージンが
できるというのであれば、バグではないと思います。
>>162
IEの現象は文字列を行内で上に詰めようとすることが原因のようです。
N7の現象はline-heightの継承に関係があると思います。
>>165-177はうちで再現できていません。
Netscape7.02＠WinXPでは再現しないのか、何かが足りないのか……？
中途半端ですが夜も遅いので今日はここまで。
181 ：Name_Not_Found：03/06/06 12:21 ID:???
>>180
＞>>158
＞小さい値を指定したときに、それより大きなマージンが
＞できるというのであれば、バグではないと思います。
ええと、margin:0;にしても隙間が空くのはバグではない？
＞>>165-177はうちで再現できていません。
＞Netscape7.02＠WinXPでは再現しないのか、
>>165のHTMLとCSS（を改造したもの）をローカルで実験しても再現できませんか？
また、そのうち>>174-177はWinIEのバグです。リンク先参照。
＞>>158
＞小さい値を指定したときに、それより大きなマージンが
＞できるというのであれば、バグではないと思います。
ええと、margin:0;にしても隙間が空くのはバグではない？
＞>>165-177はうちで再現できていません。
＞Netscape7.02＠WinXPでは再現しないのか、
>>165のHTMLとCSS（を改造したもの）をローカルで実験しても再現できませんか？
また、そのうち>>174-177はWinIEのバグです。リンク先参照。
182 ：Name_Not_Found：03/06/06 12:25 ID:???
http://cssbug.tripod.co.jp/detail/winie/b108.html
＞ボタンを押してスタイルシートを適用してください。文字列が青色で表示されますので、
スタイル切替できません。「代替」を選んでも文字列は黒の儘、しかもスタイルシート・オフと同じ状態になります。
＞ボタンを押してスタイルシートを適用してください。文字列が青色で表示されますので、
スタイル切替できません。「代替」を選んでも文字列は黒の儘、しかもスタイルシート・オフと同じ状態になります。
183 ：Name_Not_Found：03/06/06 12:52 ID:???
>>177-178は下記で再現した。IE6。
html {height:100%;overflow:hidden;}
body{margin:0px;height:100%;overflow:auto; width:100%;}
<BODY>
<DIV class="content">
<P><a href="1">111111</a></P>
<P>コンテンツ</P>
<P>コンテンツ</P>
……<!-- 以下20数行以上繰り返し-->
</DIV>
</BODY>
html {height:100%;overflow:hidden;}
body{margin:0px;height:100%;overflow:auto; width:100%;}
<BODY>
<DIV class="content">
<P><a href="1">111111</a></P>
<P>コンテンツ</P>
<P>コンテンツ</P>
……<!-- 以下20数行以上繰り返し-->
</DIV>
</BODY>