CSS/DHTMLバグ辞典スレッド ver2.0
1 ：Name_Not_Found：
前スレが志半ばにして逝ってしまわれたので立て直します。
http://mentai.2ch.net/test/read.cgi?bbs=hp&key=../kako/987/987003410
CSS/DHTMLのバグ報告お待ちしてます。
報告の際はブラウザ名を明記してください。
|
|
|
2 ：Name_Not_Found：2001/06/04(月) 23:54
前スレより転載
▼TokiMeki Network「Introduction to CSS」の「Appendix A: CSS対応状況」
http://sawa.vis.ne.jp/tmn/sawa/css/intro_a.html
▼Green Agora「IE3,IE4,NN4でのCSSのバグと回避方法」
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html
▼Green Agora「Netscape4.xスタイルシートの既知の問題」
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html
▼flm「スタイルシート使用者のためのNetscape Navigator 4.0x対策案」
http://www.remus.dti.ne.jp/~takahisa/flm/OWTXML/NN40x.html
▼AYNi Mac!「Netscape Communicator 4.7xが強制終了してしまうCSS」
http://aynimac.com/bibouroku/nc47crash.html
▼TokiMeki Network「Introduction to CSS」の「Appendix A: CSS対応状況」
http://sawa.vis.ne.jp/tmn/sawa/css/intro_a.html
▼Green Agora「IE3,IE4,NN4でのCSSのバグと回避方法」
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html
▼Green Agora「Netscape4.xスタイルシートの既知の問題」
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html
▼flm「スタイルシート使用者のためのNetscape Navigator 4.0x対策案」
http://www.remus.dti.ne.jp/~takahisa/flm/OWTXML/NN40x.html
▼AYNi Mac!「Netscape Communicator 4.7xが強制終了してしまうCSS」
http://aynimac.com/bibouroku/nc47crash.html
3 ：スタイルシート質問用スレ２の745：2001/06/05(火) 00:43
あ、Ver. 2.0が立ったんですね、よかったよかった。
では、私もひとつ。
▼MSDN Online / Web Workshop CSS Enhancements in Internet Explorer 6 Public Preview
http://msdn.microsoft.com/workshop/author/css/overview/CSSEnhancements.asp
何か、今回のInternet Explorer 6からは、Windows版もMozillaやMacintosh版のように
二種類のモードで動作するようです。互換モードと“標準に従順な”モードだそうな。
詳しくは上に書いてありますが、
HTML 4.0で“No Definition Present”の時は常に標準モードOn
↑これ、どういう意味なんでしょう？ Strictの時は"HTML 4.0"と書きますが……。
HTML 4.0 Transitional/FramesetはSYSTEM識別子を書いた時標準モードOn
HTML 4.0 Strictは常に標準モードOn
XHTML/XML、認識出来ない文書型宣言をした時は常に標準モードOn
だそうです。間違ってたらごめんなさい。
では、私もひとつ。
▼MSDN Online / Web Workshop CSS Enhancements in Internet Explorer 6 Public Preview
http://msdn.microsoft.com/workshop/author/css/overview/CSSEnhancements.asp
何か、今回のInternet Explorer 6からは、Windows版もMozillaやMacintosh版のように
二種類のモードで動作するようです。互換モードと“標準に従順な”モードだそうな。
詳しくは上に書いてありますが、
HTML 4.0で“No Definition Present”の時は常に標準モードOn
↑これ、どういう意味なんでしょう？ Strictの時は"HTML 4.0"と書きますが……。
HTML 4.0 Transitional/FramesetはSYSTEM識別子を書いた時標準モードOn
HTML 4.0 Strictは常に標準モードOn
XHTML/XML、認識出来ない文書型宣言をした時は常に標準モードOn
だそうです。間違ってたらごめんなさい。
4 ：Name_Not_Found：2001/06/05(火) 00:58
【NN6】
<li>をポジショニングしたらリストマークが消えたんだけど、これってバグかな
<li>をポジショニングしたらリストマークが消えたんだけど、これってバグかな
5 ：Name_Not_Found：2001/06/05(火) 08:00
6 ：Name_Not_Found：2001/06/05(火) 11:36
【WinIE5】
paddingをem指定したボックスをネストさせると
内側のボックスの下辺のボーダーが外側のボックスにひっつく。
例↓
<style>
div { border: 1px solid black; padding: 1em; }
</style>
<div>
外側のボックス
<div>
内側のボックス
</div>
</div>
paddingをem指定したボックスをネストさせると
内側のボックスの下辺のボーダーが外側のボックスにひっつく。
例↓
<style>
div { border: 1px solid black; padding: 1em; }
</style>
<div>
外側のボックス
<div>
内側のボックス
</div>
</div>
7 ：Name_Not_Found：2001/06/05(火) 13:09
【NN6】
<body>でtextの色を指定しないと、その直前の表示色が引き継がれる。
バグか仕様かはわかんないけど、
CSSでbody{color: black; background-color: white;}なんて定義してて
スタイルシートをオフにするとページが真っ白になる。
<body>でtextの色を指定しないと、その直前の表示色が引き継がれる。
バグか仕様かはわかんないけど、
CSSでbody{color: black; background-color: white;}なんて定義してて
スタイルシートをオフにするとページが真っ白になる。
逆だ。
body{color: white; background-color: black;}
body{color: white; background-color: black;}
10 ：Name_Not_Found：2001/06/05(火) 15:16
Mozilla の Bug は Bugzilla で。FIX/REOPEN するしね。
http://bugzilla.mozilla.org/buglist.cgi?keywords=html4
http://bugzilla.mozilla.org/buglist.cgi?keywords=xhtml
http://bugzilla.mozilla.org/buglist.cgi?keywords=css1
http://bugzilla.mozilla.org/buglist.cgi?keywords=css2
http://bugzilla.mozilla.org/buglist.cgi?keywords=css3
http://bugzilla.mozilla.org/buglist.cgi?keywords=dom0
http://bugzilla.mozilla.org/buglist.cgi?keywords=dom1
http://bugzilla.mozilla.org/buglist.cgi?keywords=dom2
CSS/DHTML に関係ありそうなところはこのへんか。
http://bugzilla.mozilla.org/buglist.cgi?keywords=html4
http://bugzilla.mozilla.org/buglist.cgi?keywords=xhtml
http://bugzilla.mozilla.org/buglist.cgi?keywords=css1
http://bugzilla.mozilla.org/buglist.cgi?keywords=css2
http://bugzilla.mozilla.org/buglist.cgi?keywords=css3
http://bugzilla.mozilla.org/buglist.cgi?keywords=dom0
http://bugzilla.mozilla.org/buglist.cgi?keywords=dom1
http://bugzilla.mozilla.org/buglist.cgi?keywords=dom2
CSS/DHTML に関係ありそうなところはこのへんか。
11 ：Name_Not_Found：2001/06/06(水) 02:43
祝復活♪
12 ：Name_Not_Found：2001/06/06(水) 23:15
救済age
13 ：Name_Not_Found：2001/06/07(木) 22:59
win ie5.5
ul{ background-color:black }
li{ color:white ; display:inline ; float:right; }
ulに指定した背景色の下に、li要素が潜り込んだ。（見えない）
z-indexでは回避できず、li{ position:relative }で回避
なんか、floatって恐くてつかえないヨ。
ul{ background-color:black }
li{ color:white ; display:inline ; float:right; }
ulに指定した背景色の下に、li要素が潜り込んだ。（見えない）
z-indexでは回避できず、li{ position:relative }で回避
なんか、floatって恐くてつかえないヨ。
14 ：Name_Not_Found：2001/06/07(木) 23:14
>>13 float で inline とはこれいかに？
15 ：Name_Not_Found：2001/06/07(木) 23:44
16 ：Name_Not_Found：2001/06/12(火) 02:37
上げる
17 ：Name_Not_Found：2001/06/15(金) 22:23
list-style-type:none;
が効かないような…＞Mozilla
が効かないような…＞Mozilla
18 ：Name_Not_Found：2001/06/15(金) 22:45
>>17
> list-style-type:none;
> が効かないような…＞Mozilla
うちも条件はわかんなかったけど、効かなくなったことある。
どっかと宣言が衝突してるのかと思って
ulだけ別シートに分離したら効いた。わけわからん。
> list-style-type:none;
> が効かないような…＞Mozilla
うちも条件はわかんなかったけど、効かなくなったことある。
どっかと宣言が衝突してるのかと思って
ulだけ別シートに分離したら効いた。わけわからん。
19 ：17：2001/06/15(金) 23:20
20 ：Name_Not_Found：2001/06/16(土) 00:05
21 ：Name_Not_Found：2001/06/16(土) 01:53
N6で、
<table>
<tbody class="foo">
<td><em class="bar">
とHTMLで記述して、外部CSSファイルで
tbody.foo em.bar{...
と定義しても、classなしのtd emとしてレンダリングされる。
tbody.foo td em.bar{...
td em.bar{...
などと記述しても一緒。
IE5.5では意図通りにレンダリングされるが、
W3C的にどちらが正しいのかは不明。
<table>
<tbody class="foo">
<td><em class="bar">
とHTMLで記述して、外部CSSファイルで
tbody.foo em.bar{...
と定義しても、classなしのtd emとしてレンダリングされる。
tbody.foo td em.bar{...
td em.bar{...
などと記述しても一緒。
IE5.5では意図通りにレンダリングされるが、
W3C的にどちらが正しいのかは不明。
22 ：Name_Not_Found：2001/06/16(土) 01:58
23 ：Name_Not_Found：2001/06/16(土) 02:02
24 ：Name_Not_Found：2001/06/18(月) 05:33
報告きぼんぬ
25 ：Name_Not_Found：2001/06/18(月) 06:01
【N6】
overflow: auto; でページ内リンクが効かなくなるぞ
overflow: auto; でページ内リンクが効かなくなるぞ
26 ：17：2001/06/21(木) 17:02
list-style: none; では消えなかったけど
list-style-type: none; にしたら消えました。
なぜ前者じゃダメなんだろう? バグ? それとも俺が悪い?
list-style-type: none; にしたら消えました。
なぜ前者じゃダメなんだろう? バグ? それとも俺が悪い?
27 ：Name_Not_Found：2001/07/04(水) 07:30
N6で body {margin: 0 } div {width: 100%; padding: 10% } とすると
横幅がはみ出る！これバグですよね？がいしゅつ？
横幅がはみ出る！これバグですよね？がいしゅつ？
28 ：Name_Not_Found：2001/07/04(水) 07:46
おお、上がってきてる。懐かしいなぁ。実は１です。
>>27
それはバグではなく、正しい実装のようです。
widthで指定した数値は、paddingを除く内容領域のみを指すものであって、
paddingを含んで解釈するIEのほうが間違いのようです。
ですので>>27の場合、
div { width: 80%; padding: 10%; }
とするのが正しい訳ですね。
自分はこれで一番悩まされてます。
>>27
それはバグではなく、正しい実装のようです。
widthで指定した数値は、paddingを除く内容領域のみを指すものであって、
paddingを含んで解釈するIEのほうが間違いのようです。
ですので>>27の場合、
div { width: 80%; padding: 10%; }
とするのが正しい訳ですね。
自分はこれで一番悩まされてます。
29 ：Name_Not_Found：2001/07/04(水) 07:56
30 ：Name_Not_Found：2001/07/04(水) 08:03
31 ：Name_Not_Found：2001/07/04(水) 09:50
33 ：Name_Not_Found：2001/07/05(木) 12:53
box-sizing: boeder-boxってcontent+paddingなの？
IEだとborderまで含んでるような気がする（content+padding+border）んだけど、気のせいかな。。。
IEだとborderまで含んでるような気がする（content+padding+border）んだけど、気のせいかな。。。
34 ：Name_Not_Found：2001/07/05(木) 13:22
35 ：Name_Not_Found：2001/07/05(木) 13:23
36 ：Name_Not_Found：2001/07/05(木) 13:26
誰か暇な方このスレッドで完璧に証明されてる
バグをまとめて下さらないかしら。うふ♪
バグをまとめて下さらないかしら。うふ♪
37 ：Name_Not_Found：2001/07/07(土) 02:45
38 ：33：2001/07/09(月) 00:46
>>34-35,>>37
おぉ、ありがとうございます。borderを太くして試してみたところ、
確かにcontent+padding+borderになってました。
いや、>>30氏が紹介してたサイトにcontent+paddingだと書いてあったので、
ちょっと気になって書き込んだ次第です。ありがとうございました！
おぉ、ありがとうございます。borderを太くして試してみたところ、
確かにcontent+padding+borderになってました。
いや、>>30氏が紹介してたサイトにcontent+paddingだと書いてあったので、
ちょっと気になって書き込んだ次第です。ありがとうございました！
39 ：Name_Not_Found：2001/07/09(月) 01:43
40 ：Name_Not_Found：2001/07/09(月) 02:41
41 ：Name_Not_Found：2001/07/09(月) 11:31
おちんちんがむずかゆいんですが・・・
スレ立ててもいいですか?
42 ：Name_Not_Found：2001/07/12(木) 17:13
Win2000 IE6
DTDのURI付き（つまり厳密にCSSが解釈されるモード。>>3さんが書いてるやつ。）
んで、
・H1は何らかのクラスに属していており、なんらかのスタイル設定
がある。または何らかのクラスのbodyの子要素としてのH1にスタイル
がついている。（クラスはあるけど、そのクラスに対するスタイルが
特に設定されていないときは問題ない。）
例：H1.hoge または .hoge H1
このとき、同一HTML文書内の H2 のpadding-leftが無視されるというのが
当方で確認できたのですが、同様の方おられます？
H3やH4には影響ないみたいだけど。
DTDのURI付き（つまり厳密にCSSが解釈されるモード。>>3さんが書いてるやつ。）
んで、
・H1は何らかのクラスに属していており、なんらかのスタイル設定
がある。または何らかのクラスのbodyの子要素としてのH1にスタイル
がついている。（クラスはあるけど、そのクラスに対するスタイルが
特に設定されていないときは問題ない。）
例：H1.hoge または .hoge H1
このとき、同一HTML文書内の H2 のpadding-leftが無視されるというのが
当方で確認できたのですが、同様の方おられます？
H3やH4には影響ないみたいだけど。
43 ：Name_Not_Found：2001/07/18(水) 11:22
あげとこ．
44 ：Name_Not_Found：2001/07/18(水) 11:46
じゃ、私も。
45 ：Name_Not_Found：2001/07/30(月) 16:02
age
46 ：Name_Not_Found：2001/08/03(金) 19:14
CSS 質問スレッド 4 記念あげ．
47 ：Name_Not_Found：2001/08/05(日) 01:29
ageついでに。
moz0.9.1
'font'にて指定したとき、familyだけが子孫に継承されない。
# 他のitalicやboldやsize等は継承される。
moz0.9.1
'font'にて指定したとき、familyだけが子孫に継承されない。
# 他のitalicやboldやsize等は継承される。
48 ：IE5.0：2001/08/05(日) 23:23
<div style="letter-spacing:1px">
hogehogehogehogehogehoge<br>
fugafugafugafugafugafugafuga<br>
<br> ←－－①
hehehehehehehehehehehe<br>
</div>
とすると①の<br>が無視されて
hogehogehogehogehogehoge
fugafugafugafugafugafugafuga
hehehehehehehehehehehe
と表示される。
hogehogehogehogehogehoge<br>
fugafugafugafugafugafugafuga<br>
<br> ←－－①
hehehehehehehehehehehe<br>
</div>
とすると①の<br>が無視されて
hogehogehogehogehogehoge
fugafugafugafugafugafugafuga
hehehehehehehehehehehe
と表示される。
49 ：Name_Not_Found：2001/08/08(水) 17:23
IE5.01sp2で確認。近いところでも起こるかも。
body * {font-size: ???;}
と指定しても、table要素には継承されない。
table {font-size: 100%;}とすることで継承される。
# inheritも効かない。
body * {font-size: ???;}
と指定しても、table要素には継承されない。
table {font-size: 100%;}とすることで継承される。
# inheritも効かない。
50 ：Name_Not_Found：2001/08/21(火) 08:53
[IE5.5][DOM]
setAttribute( 'class', *** ) で class 属性を設定／変更できない。
試しに setAttribute( 'className', *** ) なんてやってみると
その要素に *** クラスのスタイルが効いてしまったりなんかする。
…なんだかなぁ。
setAttribute( 'class', *** ) で class 属性を設定／変更できない。
試しに setAttribute( 'className', *** ) なんてやってみると
その要素に *** クラスのスタイルが効いてしまったりなんかする。
…なんだかなぁ。
51 ：Name_Not_Found：01/09/07 21:10
サルベージage
52 ：Name_Not_Found：01/09/13 18:09 ID:J5vHuUmY
IE6登場age
んー、なんか左右方向のmarginとかpaddingの計算がダメダメじゃ
ないすか？＞IE6
んー、なんか左右方向のmarginとかpaddingの計算がダメダメじゃ
ないすか？＞IE6
53 ：Name_Not_Found：01/09/13 18:26 ID:lcgFyJfk
54 ：Name_Not_Found：01/09/13 18:32 ID:J5vHuUmY
55 ：Name_Not_Found：01/09/13 21:15 ID:2Etq8K.M
border-boxプロパティに対応してないってのはどういうことだｺﾞﾙｧ(ﾟДﾟ)＞IE6！！
まぁ、取り敢えず
DIV { margin-right: auto; margin-left: auto }
でブロック要素のセンタリングが出来るようになったからいいけど……でも所々変。
ABBR要素にも対応してないし、代替スタイルシートもダメだし……鬱だ。
まぁ、取り敢えず
DIV { margin-right: auto; margin-left: auto }
でブロック要素のセンタリングが出来るようになったからいいけど……でも所々変。
ABBR要素にも対応してないし、代替スタイルシートもダメだし……鬱だ。
56 ：55：01/09/13 21:18 ID:2Etq8K.M
間違えた、border-boxプロパティじゃなくてbox-sizingプロパティだ。ｽﾏﾝ。
文書型宣言によってbox-sizingプロパティを切り替えるのはいいけど、
その肝心のbox-sizingプロパティに対応してないってのが……鬱。
文書型宣言によってbox-sizingプロパティを切り替えるのはいいけど、
その肝心のbox-sizingプロパティに対応してないってのが……鬱。
57 ：Name_Not_Found：01/09/13 22:10 ID:J5vHuUmY
出たばかりのIE6です。
h2の左の方がおかしいです（border-leftやpadding-left）
こりゃバグでしょうか？Mozillaでは正常です。
h2のmargin-leftが負の値の場合、h1の中身の文字の左端が、h2より左にないと
h2の上記のプロパティが無効になるようです。
（h2以外の影響は調べてません。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>test</title>
<style>
<!--
body{margin-left:4em}
h1{margin-left: 1em}
h2{margin-left:-1em;border-width:1px;border-style:solid;border-color:blue;padding:0.2em}
-->
</style>
</head>
<body>
<h1>逝ってよし</h1>
<h2>オマエモナー</h2>
<p>ハァハァ</p>
</body>
</html>
h2の左の方がおかしいです（border-leftやpadding-left）
こりゃバグでしょうか？Mozillaでは正常です。
h2のmargin-leftが負の値の場合、h1の中身の文字の左端が、h2より左にないと
h2の上記のプロパティが無効になるようです。
（h2以外の影響は調べてません。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>test</title>
<style>
<!--
body{margin-left:4em}
h1{margin-left: 1em}
h2{margin-left:-1em;border-width:1px;border-style:solid;border-color:blue;padding:0.2em}
-->
</style>
</head>
<body>
<h1>逝ってよし</h1>
<h2>オマエモナー</h2>
<p>ハァハァ</p>
</body>
</html>
58 ：Name_Not_Found：01/09/15 04:42 ID:vx2l/uMc
【Windows IE6 (6.0.2600.0000)】
カンマ区切りで指定された複数セレクタの中に一つでもIE未対応のセレクタが含まれていると、その宣言ブロックは全て無視される。
p, li { color: blue; }
p, ul>li { background-color: yellow; }
p, li+li { border-right: 1em solid; }
p, a[href] { text-decoration: overline; }
例えばこのような記述だと、 p には color: blue; しか反映されない。
属性セレクタ、子セレクタ、隣接セレクタ、言語セレクタでこの現象を確認しました。
カンマ区切りで指定された複数セレクタの中に一つでもIE未対応のセレクタが含まれていると、その宣言ブロックは全て無視される。
p, li { color: blue; }
p, ul>li { background-color: yellow; }
p, li+li { border-right: 1em solid; }
p, a[href] { text-decoration: overline; }
例えばこのような記述だと、 p には color: blue; しか反映されない。
属性セレクタ、子セレクタ、隣接セレクタ、言語セレクタでこの現象を確認しました。
59 ：Name_Not_Found：01/09/16 06:32 ID:PfaMPrkQ
>>58
http://www.fan.gr.jp/~kaz/rec-css1/rec-css1.html#forward-compatible-parsing
(CSS1での)不正なセレクタに対してその規則集合全体を無視するのは
CSS1 適合 UA として妥当な挙動。
IE6 は公式発表でも CSS1 サポートのみで、
CSS2 サポートについては何も言及していない。
http://www.fan.gr.jp/~kaz/rec-css1/rec-css1.html#forward-compatible-parsing
(CSS1での)不正なセレクタに対してその規則集合全体を無視するのは
CSS1 適合 UA として妥当な挙動。
IE6 は公式発表でも CSS1 サポートのみで、
CSS2 サポートについては何も言及していない。
60 ：Name_Not_Found：01/09/16 09:19 ID:VJ8UHLZk
61 ：Name_Not_Found：01/09/16 09:34 ID:4vlk39N6
62 ：yuu ◆xo3ilszg ：01/09/16 12:17 ID:.eBwbS6c
リストをdisplay:inline;にすると、MacIE4.xでは妙に和風な表示になって
しまうのですが、抜本的対策って何かありますか?
しまうのですが、抜本的対策って何かありますか?
63 ：yuu ◆xo3ilszg ：01/09/16 12:43 ID:.eBwbS6c
あ、ここCSS質問スレじゃないね。
申し訳ない。
申し訳ない。
64 ：Name_Not_Found：01/09/16 12:56 ID:/rEwFzGw
65 ：Name_Not_Found：01/09/17 14:22 ID:9LefElkY
内容はどうでもいいんだけど、ここの日記をＩＥで見てください。
http://www.alib.jp/diary/diary_200109.html
<ul><li></li></ul>の中の<blockquote>が何個か続いた場合、
下の方の<blockquote>で文書行頭がだんだん左にズレてゆき
boxからもはみ出してるのがおわかりになりますか。
これはＩＥのＣＳＳ実装のバグでは？
他にも<dl>などインデントに関係する要素への指定でバグるらしい。
因みに私のＩＥは5.5です。6.0では修正されてるといいんですけど。
http://www.alib.jp/diary/diary_200109.html
<ul><li></li></ul>の中の<blockquote>が何個か続いた場合、
下の方の<blockquote>で文書行頭がだんだん左にズレてゆき
boxからもはみ出してるのがおわかりになりますか。
これはＩＥのＣＳＳ実装のバグでは？
他にも<dl>などインデントに関係する要素への指定でバグるらしい。
因みに私のＩＥは5.5です。6.0では修正されてるといいんですけど。
66 ：Name_Not_Found：01/09/17 15:25 ID:AiUEhf3w
ＩＥ5.5です。
fieldsetのborder-styleにdashedやdottedを使用すると
ボーダーラインがlabelの上を横切ってラベルの文字と重なるんですが。
solidやinset outset ridge groove double等では普通に
ラベル・テキストの所はラインが隠れます。dashedやdottedだけ変になる。
もし既出のバグでしたらごめんなさい。
fieldsetのborder-styleにdashedやdottedを使用すると
ボーダーラインがlabelの上を横切ってラベルの文字と重なるんですが。
solidやinset outset ridge groove double等では普通に
ラベル・テキストの所はラインが隠れます。dashedやdottedだけ変になる。
もし既出のバグでしたらごめんなさい。
67 ：Name_Not_Found：01/09/17 15:46 ID:AiUEhf3w
こんなのはＣＳＳのバグに入りますか。
==================
・リスト1-用語1
用語1の説明
・リスト2
・リストn
==================
上図のごとき表示を狙って次の通りＨＴＭＬを書きます。
＜UL＞
＜LI＞
＜DL＞
＜DT＞リスト1-用語1＜/DT＞
＜DD＞用語1の説明＜/DD＞
＜DT＞リスト1-用語2＜/DT＞
＜DD＞用語2の説明＜/DD＞
＜/DL＞
＜/LI＞
＜LI＞リスト2＜/LI＞
＜LI＞リスト……n＜/LI＞
＜/UL＞
しかしＮＮではちゃんと表示されても
ＩＥではこんな風にリストマークがずれた表示になります。
==================
・
リスト1-用語1
用語1の説明
・リスト2
・リストn
==================
そこで、LI DL{display:inline;}と指定してみましたが、結果は変らず。
なぜDLへの指定は効かないのか（泣）。
==================
・リスト1-用語1
用語1の説明
・リスト2
・リストn
==================
上図のごとき表示を狙って次の通りＨＴＭＬを書きます。
＜UL＞
＜LI＞
＜DL＞
＜DT＞リスト1-用語1＜/DT＞
＜DD＞用語1の説明＜/DD＞
＜DT＞リスト1-用語2＜/DT＞
＜DD＞用語2の説明＜/DD＞
＜/DL＞
＜/LI＞
＜LI＞リスト2＜/LI＞
＜LI＞リスト……n＜/LI＞
＜/UL＞
しかしＮＮではちゃんと表示されても
ＩＥではこんな風にリストマークがずれた表示になります。
==================
・
リスト1-用語1
用語1の説明
・リスト2
・リストn
==================
そこで、LI DL{display:inline;}と指定してみましたが、結果は変らず。
なぜDLへの指定は効かないのか（泣）。
69 ：Name_Not_Found：01/09/17 16:09 ID:Rfgti80s
70 ：Name_Not_Found：01/09/17 16:26 ID:oDYBCT.E
リストとかblockquoteとか、デフォルトでインデントしてある要素は
バグが出る感じですね、ＩＥは。6.0での修正に（淡く）期待。
バグが出る感じですね、ＩＥは。6.0での修正に（淡く）期待。
71 ：Name_Not_Found：01/09/17 20:13 ID:2ivkWEYc
ＩＥ5.5で縱書きプロパティーを使ってみたら
なぜかfont-family指定が無効になった。
横書きに戻したら元通りに。
ワケワカラン。
なぜかfont-family指定が無効になった。
横書きに戻したら元通りに。
ワケワカラン。
72 ：Name_Not_Found：01/09/17 20:25 ID:zAiLig1Q
リンク文字列が右往左往
73 ：Name_Not_Found：01/09/17 20:31 ID:aZXlOYcU
>>67
なんでこんな変な書き方するの。
＜ＤＴ＞リスト＊－用語説明＊＜／ＤＴ＞
＜ＤＤ＞（用語＊の説明があるとき）＜／ＤＤ＞
で統一すればすむ話だと思うが。
頭の点が欲しければつけるなりＤＴにスタイルシートで定義すればいい。
見栄えだけこだわって論理的＆シンプルに考えることができてない
好例だと思います。
なんでこんな変な書き方するの。
＜ＤＴ＞リスト＊－用語説明＊＜／ＤＴ＞
＜ＤＤ＞（用語＊の説明があるとき）＜／ＤＤ＞
で統一すればすむ話だと思うが。
頭の点が欲しければつけるなりＤＴにスタイルシートで定義すればいい。
見栄えだけこだわって論理的＆シンプルに考えることができてない
好例だと思います。
74 ：７３：01/09/17 20:35 ID:aZXlOYcU
>>67はこうしてもいい。
＜ＬＩ＞リスト１
＜ＤＬ＞
＜ＤＴ＞用語１＜／ＤＴ＞
＜ＤＤ＞用語1の説明＜／ＤＤ＞
＜ＤＴ＞用語2＜／ＤＴ＞
＜ＤＤ＞用語2の説明＜／ＤＤ＞
＜／ＤＬ＞
＜／ＬＩ＞
＜ＬＩ＞リスト2＜／ＬＩ＞
個人的に「リスト１」を何度も出すのはうざいとおもう。
＜ＬＩ＞リスト１
＜ＤＬ＞
＜ＤＴ＞用語１＜／ＤＴ＞
＜ＤＤ＞用語1の説明＜／ＤＤ＞
＜ＤＴ＞用語2＜／ＤＴ＞
＜ＤＤ＞用語2の説明＜／ＤＤ＞
＜／ＤＬ＞
＜／ＬＩ＞
＜ＬＩ＞リスト2＜／ＬＩ＞
個人的に「リスト１」を何度も出すのはうざいとおもう。
75 ：67：01/09/17 21:02 ID:Jsy1jZpA
>>73-74
＞なんでこんな変な書き方するの。
とは言っても別に文法的に誤りではないし、
リストにして定義語を兼ねるって場合もあるでしょ。
リスト２以下との関係ではリスト１だが
それ自身は説明を要する語であるとか。
例：初心者向けウェブ制作支援サイトの目次で――
=====================
1.作者からご挨拶
2.ＨＴＭＬ
ＨＴＭＬとはウェブページの記法です。～
3.ＣＳＳ
スタイルシートでデザインができます
4.索引
5.参考文献
=======================
上図みたいにインデント表示するだけなら
<li><p>～</p><p>～</p></li>に
ＣＳＳで指定してやればできるにしても、
文書構造としては<li><dl>～</dl></li>が相応しいのでは？
それに問題はＩＥの表示がＮＮ4＆6と違って変になること。
スタイル指定してもさらに変なことが起きるのだから（>>69参照）
これはやはりＣＳＳ実装のバグかと。
＞なんでこんな変な書き方するの。
とは言っても別に文法的に誤りではないし、
リストにして定義語を兼ねるって場合もあるでしょ。
リスト２以下との関係ではリスト１だが
それ自身は説明を要する語であるとか。
例：初心者向けウェブ制作支援サイトの目次で――
=====================
1.作者からご挨拶
2.ＨＴＭＬ
ＨＴＭＬとはウェブページの記法です。～
3.ＣＳＳ
スタイルシートでデザインができます
4.索引
5.参考文献
=======================
上図みたいにインデント表示するだけなら
<li><p>～</p><p>～</p></li>に
ＣＳＳで指定してやればできるにしても、
文書構造としては<li><dl>～</dl></li>が相応しいのでは？
それに問題はＩＥの表示がＮＮ4＆6と違って変になること。
スタイル指定してもさらに変なことが起きるのだから（>>69参照）
これはやはりＣＳＳ実装のバグかと。
76 ： ：01/09/17 21:14 ID:b.Ns1wOk
>67
IE5.5 SP2 (Win) では inline にすると頭のリストマークが消えて上に上がるよ．
いずれにしても望む動作じゃないだろうけど．
きわめて邪道な方法として li dl{margin-top:-1em} とすれば望むように見えるようになる．
（Moz 0.9.4 でもほぼ同じ見え方）
IE5.5 SP2 (Win) では inline にすると頭のリストマークが消えて上に上がるよ．
いずれにしても望む動作じゃないだろうけど．
きわめて邪道な方法として li dl{margin-top:-1em} とすれば望むように見えるようになる．
（Moz 0.9.4 でもほぼ同じ見え方）
>>76
<li>でなくて<dl>に対してdisplay:inlineを指定したのに
なんでリストマークが消えるんですかね？
まあ何故と問うても虚しくて、理不尽なのがバグってもんなのかな。
ＩＥ6.0でも直ってませんか。
<li>でなくて<dl>に対してdisplay:inlineを指定したのに
なんでリストマークが消えるんですかね？
まあ何故と問うても虚しくて、理不尽なのがバグってもんなのかな。
ＩＥ6.0でも直ってませんか。
78 ：Name_Not_Found：01/09/18 09:31 ID:D8d977Ew
前景色プロパティcolorには後景色と違ってtransparentは指定できないはず。
しかしＩＥ5.5で
A.conceal:link A.conceal:visited{color:transparent;text-decoration:none;}
としてみたところ、文字色が黒となり、他の文字列と全然見分けがつかなくなった。
試しにその前にbody{color:#ff0000;}としてみたら、赤色の中でそこだけ黒色に。
つまり{color:transparent;}は｛color:#000000｝と同じ効果があるらしい。謎だ。
しかしＩＥ5.5で
A.conceal:link A.conceal:visited{color:transparent;text-decoration:none;}
としてみたところ、文字色が黒となり、他の文字列と全然見分けがつかなくなった。
試しにその前にbody{color:#ff0000;}としてみたら、赤色の中でそこだけ黒色に。
つまり{color:transparent;}は｛color:#000000｝と同じ効果があるらしい。謎だ。
79 ：Name_Not_Found：01/09/18 18:27 ID:OHsUWNI6
80 ：Name_Not_Found：01/09/18 23:25 ID:lyU9yjpA
81 ：Name_Not_Found：01/09/19 06:26 ID:IDtySRzs
>>80 もしやＩＥの隠された独自拡張とか？
82 ：Name_Not_Found：01/09/23 08:01 ID:D2pU9J4U
WinIE6 float の怪
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/WinIE6float.html
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/WinIE6float.html
83 ：Name_Not_Found：01/09/24 10:04 ID:ZjPXe/2E
84 ：Name_Not_Found：01/09/25 09:16 ID:5dxz.Ujs
バグって程のもんではないかもしれないけれど気づいたこと。
Macユーザーのページでフォントを指定した
body{font-family:Osaka, sans-serif;}
てなスタイルがありますね。
ex.http://www1.odn.ne.jp/bungaku-shitsu/
http://www.vabil.co.jp/~ussy/
これをWinIE5.5で見ますと、なんか文字の高さや太さが揃ってなくて
ガタガタした版面（印刷用語で呼ぶなら）に見える。
どうやらＭＳゴシックではないなんだかわからない書体が適用されてる模様。
拡大して見た所、MS Song（？）とか、そんな日本字に慣れない書体設計と似てます。
マック使ってる人、font-family指定するならOsakaだけでなく
ウインドウズ対策に"ＭＳ ゴシック""ＭＳ Ｐゴシック"なんかも入れてね。
私もMac向けに"Osaka-等幅"って入れてるからさ（どんな風に見えるのかは知らんが）。
Macユーザーのページでフォントを指定した
body{font-family:Osaka, sans-serif;}
てなスタイルがありますね。
ex.http://www1.odn.ne.jp/bungaku-shitsu/
http://www.vabil.co.jp/~ussy/
これをWinIE5.5で見ますと、なんか文字の高さや太さが揃ってなくて
ガタガタした版面（印刷用語で呼ぶなら）に見える。
どうやらＭＳゴシックではないなんだかわからない書体が適用されてる模様。
拡大して見た所、MS Song（？）とか、そんな日本字に慣れない書体設計と似てます。
マック使ってる人、font-family指定するならOsakaだけでなく
ウインドウズ対策に"ＭＳ ゴシック""ＭＳ Ｐゴシック"なんかも入れてね。
私もMac向けに"Osaka-等幅"って入れてるからさ（どんな風に見えるのかは知らんが）。
85 ：Name_Not_Found：01/09/25 16:35 ID:bfyhfauA
86 ：Name_Not_Found：01/09/25 16:47 ID:n.TGXq2.
次のページで確認しよう。>>85
http://east.portland.ne.jp/~sigekazu/css/font_family.htm
WinIE5.5/6
一般フォントファミリへの対応が良くはなってはいるが、相変わらず中途半端。確認したWindows 98SE/Me/2000のうち、Me版は一般フォントファミリであるsans-serifの扱いがおかしい。
http://east.portland.ne.jp/~sigekazu/css/font_family.htm
WinIE5.5/6
一般フォントファミリへの対応が良くはなってはいるが、相変わらず中途半端。確認したWindows 98SE/Me/2000のうち、Me版は一般フォントファミリであるsans-serifの扱いがおかしい。
あ、特に上掲ページのサンプル5-2だね、この場合。
88 ：Name_Not_Found：01/09/25 17:04 ID:1.a2A8JI
85 じゃないけど，どれもがたがたには見えない．
IE というよりは OS によるのでは？うちは 2000（IE は 6 だけど）．
＃もっとも，「がたがた」という言葉の感じ方の違いかもしれないけど
IE というよりは OS によるのでは？うちは 2000（IE は 6 だけど）．
＃もっとも，「がたがた」という言葉の感じ方の違いかもしれないけど
89 ：86：01/09/25 17:10 ID:n.TGXq2.
>>88
すみません、サンプル５-２を文字の大きさ最大にして見ていただけますか。
他の日本語表示テスト（サンプル3-3、サンプル４）と明らかに字の太さが異なり、
別のフォントになってるんですよ――私の場合は。
ちなみに98SEにＩＥ5.5ですが。
すみません、サンプル５-２を文字の大きさ最大にして見ていただけますか。
他の日本語表示テスト（サンプル3-3、サンプル４）と明らかに字の太さが異なり、
別のフォントになってるんですよ――私の場合は。
ちなみに98SEにＩＥ5.5ですが。
あ，英語フォントね…納得．日本語しか見てなかった．
つーことで，やっぱ OS でなくて IE の問題か．
つーことで，やっぱ OS でなくて IE の問題か．
91 ：86：01/09/25 17:51 ID:6/WDOapM
>>90
>あ，英語フォントね…納得．
いえ、サンプル中の「日本語表示テスト」って文字（日本語フォント）に
適用されるフォントの話なんですけど。
それとも、sans-serifだと日本語部分にも「英語フォント」（欧文用フォント）が適用されるってことですか。
>あ，英語フォントね…納得．
いえ、サンプル中の「日本語表示テスト」って文字（日本語フォント）に
適用されるフォントの話なんですけど。
それとも、sans-serifだと日本語部分にも「英語フォント」（欧文用フォント）が適用されるってことですか。
92 ：Name_Not_Found：01/09/25 17:56 ID:bfyhfauA
93 ：Name_Not_Found：01/09/25 18:06 ID:SAcuNAOo
>>92
いや、指定がsans-serifだったらＭＳＩＥの場合、欧文はさておき日本語の部分は
"ＭＳ Ｐゴシック""ＭＳゴシック"か"MS UI Gothic"で表示されるはずでは？
それ以外のフォントで表示されてるとしたら、それは何か変でしょ。
いや、指定がsans-serifだったらＭＳＩＥの場合、欧文はさておき日本語の部分は
"ＭＳ Ｐゴシック""ＭＳゴシック"か"MS UI Gothic"で表示されるはずでは？
それ以外のフォントで表示されてるとしたら、それは何か変でしょ。
>91
なんだ違うのか…．じゃあやっぱりがたがたには見えない．文字サイズ最大でも．
>86 のページで 4 と 5-2 の「日本語表示テスト」が違って見えるってことね？
どっかにキャプチャをアップすればいいんだろうけど，とにかく，うちでは違わない．
なんだ違うのか…．じゃあやっぱりがたがたには見えない．文字サイズ最大でも．
>86 のページで 4 と 5-2 の「日本語表示テスト」が違って見えるってことね？
どっかにキャプチャをアップすればいいんだろうけど，とにかく，うちでは違わない．
95 ：Name_Not_Found：01/09/25 18:13 ID:ePKoICjw
sans-serif確かに汚いね＠Me+IE5.5
96 ：Name_Not_Found：01/09/25 18:23 ID:SAcuNAOo
CSS Laboratoryによれば……
http://www.inter-cool.net/~phantasm/wdzone/note/fonts/index.html
「IE5.5
欧文フォントや sans-serif 等を指定した場合に日本語が文字化けすることがある。 （HTML文書の方で言語を指定すれば、文字化けしにくくなったが、完全に回避することは出来なかった。）」
とのこと。
http://www.inter-cool.net/~phantasm/wdzone/note/fonts/index.html
「IE5.5
欧文フォントや sans-serif 等を指定した場合に日本語が文字化けすることがある。 （HTML文書の方で言語を指定すれば、文字化けしにくくなったが、完全に回避することは出来なかった。）」
とのこと。
97 ：86：01/09/25 18:46 ID:/IlbdY26
>>95 ……ですよね、やっぱり。
（>>88さんが否定するのでうちのパソコンだけ変なのかと不安になってました）
結局、font-familyプロパティーを使用するならsans-serifのみの指定は避けた方がいいし、
>>84での指摘通り、
マック使ってる人は「Osakaだけでなくウインドウズ対策に"ＭＳ ゴシック""ＭＳ Ｐゴシック"なんかも入れて」指定した方がいい
――ってことでまとめてよいのかな。
（>>88さんが否定するのでうちのパソコンだけ変なのかと不安になってました）
結局、font-familyプロパティーを使用するならsans-serifのみの指定は避けた方がいいし、
>>84での指摘通り、
マック使ってる人は「Osakaだけでなくウインドウズ対策に"ＭＳ ゴシック""ＭＳ Ｐゴシック"なんかも入れて」指定した方がいい
――ってことでまとめてよいのかな。
98 ：Name_Not_Found：01/09/25 18:48 ID:MW3I.8Xk
NN6.1では
body { text-align: center}
を指定してもセンタリングされない見たいなんですが、これって
やっぱバグ？
body { text-align: center}
を指定してもセンタリングされない見たいなんですが、これって
やっぱバグ？
99 ：Name_Not_Found：01/09/25 18:54 ID:17mXm2tY
中央寄せについては下記を参照。
http://www2u.biglobe.ne.jp/~zashiki/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www2u.biglobe.ne.jp/~zashiki/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
>97
うーん，否定したつもりはない（事実を書いただけ）けどそうとられたならごめん．
88 にも書いたけどうちは 2000+IE6 なので，違って当然の結果と言える．
86 にも「Me は」って書いてあるし．
引っかき回したようになってすまない．
うーん，否定したつもりはない（事実を書いただけ）けどそうとられたならごめん．
88 にも書いたけどうちは 2000+IE6 なので，違って当然の結果と言える．
86 にも「Me は」って書いてあるし．
引っかき回したようになってすまない．
101 ：Name_Not_Found：01/09/25 19:06 ID:MW3I.8Xk
>99
サンクスです。
・・・参照ページを見た時、ショックで言葉が出なかった。
サンクスです。
・・・参照ページを見た時、ショックで言葉が出なかった。
102 ：Name_Not_Found：01/09/25 19:23 ID:nvhAqkMU
>>98
CSS でよくある誤解――text-align はボックスの配置用ではない
text-align はボックス内のテキストの水平配置用のプロパティでなので、例えば table を text-align: center を指定した div で括っても、仕様では table 自体は左に寄ったまま、 table 内のテキストだけが中寄せされることになっています。 IE の間違った実装の代表です。
中寄せしたいブロックに対しては margin-left: auto; margin-right: auto と、右寄せしたいブロックに対しては margin-left: auto; margin-right: 0 と指定するのが仕様的には正しく、 N 6 はこれをちゃんと解釈します。
IE では今のところ auto を正しく解釈してくれないので、 text-align や HTML の align 属性と組み合わせて対処するしかないようです。
以上、http://www.cc-net.or.jp/~piro/tips.lzh より
CSS でよくある誤解――text-align はボックスの配置用ではない
text-align はボックス内のテキストの水平配置用のプロパティでなので、例えば table を text-align: center を指定した div で括っても、仕様では table 自体は左に寄ったまま、 table 内のテキストだけが中寄せされることになっています。 IE の間違った実装の代表です。
中寄せしたいブロックに対しては margin-left: auto; margin-right: auto と、右寄せしたいブロックに対しては margin-left: auto; margin-right: 0 と指定するのが仕様的には正しく、 N 6 はこれをちゃんと解釈します。
IE では今のところ auto を正しく解釈してくれないので、 text-align や HTML の align 属性と組み合わせて対処するしかないようです。
以上、http://www.cc-net.or.jp/~piro/tips.lzh より
103 ：Name_Not_Found：01/09/25 20:12 ID:bfyhfauA
>>93
sans-serif を指定した場合の表示フォントは、既定値はOSによってあるいは、
個人の設定/環境によって異なります。
ちなみに私の場合、sans-serif も serif も MS明朝ですが。
sans-serif を指定した場合の表示フォントは、既定値はOSによってあるいは、
個人の設定/環境によって異なります。
ちなみに私の場合、sans-serif も serif も MS明朝ですが。
104 ：Name_Not_Found：01/09/25 20:53 ID:0.RZ1I3k
105 ：Name_Not_Found：01/09/25 21:34 ID:ePKoICjw
106 ：Name_Not_Found：01/09/25 21:54 ID:mw8rZTdU
デフォルトのままの場合ってことかと。
107 ：Name_Not_Found：01/09/26 02:56 ID:4XrpxHYs
「Macの人も、Win用に"ＭＳ ゴシック"って、書いておいてね。」ってあったけど、
NN 4.xにも対応するようにするには、どう書けばいいの？
あと、NN 4.xでは、
body, th, td, div {
color: #fff;
background: green;
font: Osaka 10px;
}
と、fontで宣言すると、ブロックごと無視されるようです。
body, th, td, div {
color: #fff;
background: green;
font-family: Osaka;
font-size: 10px;
}
とすれば、大丈夫。
既出だったら、ｽﾏﾇ。
NN 4.xにも対応するようにするには、どう書けばいいの？
あと、NN 4.xでは、
body, th, td, div {
color: #fff;
background: green;
font: Osaka 10px;
}
と、fontで宣言すると、ブロックごと無視されるようです。
body, th, td, div {
color: #fff;
background: green;
font-family: Osaka;
font-size: 10px;
}
とすれば、大丈夫。
既出だったら、ｽﾏﾇ。
108 ：107：01/09/26 03:00 ID:4XrpxHYs
何度もすみません。
NNは、Macの4.5です。
NNは、Macの4.5です。
110 ：Name_Not_Found：01/09/26 07:59 ID:2vxfe8z2
>>107
ＮＮ４にfont-familyは鬼門です。次のページを読んでみてください。
「文字化け対策」
http://east.portland.ne.jp/~sigekazu/css/font_family.htm
ちなみにMacIEでもfont-familyによって文字化けすることがあるとか（未確認）。
（http://www.cc-net.or.jp/~piro/tips.lzhの情報）
ＮＮ４にfont-familyは鬼門です。次のページを読んでみてください。
「文字化け対策」
http://east.portland.ne.jp/~sigekazu/css/font_family.htm
ちなみにMacIEでもfont-familyによって文字化けすることがあるとか（未確認）。
（http://www.cc-net.or.jp/~piro/tips.lzhの情報）
111 ：Name_Not_Found：01/09/26 08:20 ID:PBQ/9qJY
112 ：Name_Not_Found：01/09/29 04:49 ID:oC6f8ofk
募集中！
113 ：Name_Not_Found：01/09/30 00:31 ID:LuIj9OdA
114 ：Name_Not_Found：01/09/30 16:49 ID:z6G1.gUk
115 ：Name_Not_Found：01/09/30 16:51 ID:bJIKQh0c
116 ：Name_Not_Found：01/09/30 17:00 ID:Kj3D5KBo
http://natto.2ch.net/test/read.cgi/hp/997305601/138-145
より
BODYにCSSで {overflow:scroll;} が指定されているとネスケ６で表示が崩れます。
（そもそもbodyにoverflowは無効のはずですがネスケ６は解釈してしまうようで、、、）
より
BODYにCSSで {overflow:scroll;} が指定されているとネスケ６で表示が崩れます。
（そもそもbodyにoverflowは無効のはずですがネスケ６は解釈してしまうようで、、、）
118 ：Name_Not_Found：01/10/02 11:36 ID:KE6Lx7SY
>bodyにoverflowは無効のはずですが
いや、有効のはずでしょ？ overflow:hidden;でスクロールバーが消えますし。
よく擬似フレームをposition:fixedの効かないＩＥではoverflowの応用で実現しますが、
これをＮＮ６で表示させるとなぜか変な風になりますね。
あれってどちらの解釈が正しいんですか？
いや、有効のはずでしょ？ overflow:hidden;でスクロールバーが消えますし。
よく擬似フレームをposition:fixedの効かないＩＥではoverflowの応用で実現しますが、
これをＮＮ６で表示させるとなぜか変な風になりますね。
あれってどちらの解釈が正しいんですか？
119 ：Name_Not_Found：01/10/02 11:52 ID:P7nxrgC6
120 ：118：01/10/02 12:06 ID:KE6Lx7SY
ではこんなサンプルでいかが。>>119
body {overflow: hidden;margin: 0;padding: 0;}
#navbar {position: absolute;top: 0px;width: 97.5%;height: 2em;}
#contents {position: absolute;
top: 2em; left: 0;
width: 100%; height: 100%;
overflow: auto;
overflow-x: scroll;/*ＩＥ独自拡張、無くても可*/
overflow-y: auto;/*ＩＥ独自拡張、無くても可*/
}
body {overflow: hidden;margin: 0;padding: 0;}
#navbar {position: absolute;top: 0px;width: 97.5%;height: 2em;}
#contents {position: absolute;
top: 2em; left: 0;
width: 100%; height: 100%;
overflow: auto;
overflow-x: scroll;/*ＩＥ独自拡張、無くても可*/
overflow-y: auto;/*ＩＥ独自拡張、無くても可*/
}
121 ：Name_Not_Found：01/10/02 14:50 ID:anA8xGvY
>>120
訂正。逆だね、これは。
overflow-x: scroll;/*ＩＥ独自拡張、無くても可*/
overflow-y: auto;/*ＩＥ独自拡張、無くても可*/
↓↓↓↓
overflow-x: auto;/*ＩＥ独自拡張、無くても可*/
overflow-y: scroll;/*ＩＥ独自拡張、無くても可*/
まあ、無くてもいいんだからどうでもいいか。
訂正。逆だね、これは。
overflow-x: scroll;/*ＩＥ独自拡張、無くても可*/
overflow-y: auto;/*ＩＥ独自拡張、無くても可*/
↓↓↓↓
overflow-x: auto;/*ＩＥ独自拡張、無くても可*/
overflow-y: scroll;/*ＩＥ独自拡張、無くても可*/
まあ、無くてもいいんだからどうでもいいか。
122 ：Name_Not_Found：01/10/02 19:34 ID:n2fqrfSg
ふむ
>>120
body の中は #navbar と #contents の div だけ、でいいのかな？
ポイントは #contents の height: 100%。
これはコンテナブロックの高さに対するパーセンテージを示す。
#contents は絶対配置される非置換要素であるから、そのコンテナブロックは
position:static 以外の最も近い祖先要素、それが存在しなければ
ルート要素である html 要素がコンテナブロックになる。
その場合、#contents{height:100%} は、html 要素の高さの 100% という解釈が正しい。
#contents の内容が多い HTML で N6 で上の CSS を適用したときの
内側のスクロールバーは #contents の overflow 指定によるもの。
外側のスクロールバーについては
N6 の文書表示部は iframe 要素に近いものだと考えればいいかと思う。
内部に表示している文書の CSS に関係なく
文書の高さが iframe の高さを超えたらスクロールバーが出る、みたいに。
回避策としては、#contents {} の後に
body > #contents { bottom:0; height: auto; }
を追加。自信ないので間違ってたらフォロー頼みます。
body の中は #navbar と #contents の div だけ、でいいのかな？
ポイントは #contents の height: 100%。
これはコンテナブロックの高さに対するパーセンテージを示す。
#contents は絶対配置される非置換要素であるから、そのコンテナブロックは
position:static 以外の最も近い祖先要素、それが存在しなければ
ルート要素である html 要素がコンテナブロックになる。
その場合、#contents{height:100%} は、html 要素の高さの 100% という解釈が正しい。
#contents の内容が多い HTML で N6 で上の CSS を適用したときの
内側のスクロールバーは #contents の overflow 指定によるもの。
外側のスクロールバーについては
N6 の文書表示部は iframe 要素に近いものだと考えればいいかと思う。
内部に表示している文書の CSS に関係なく
文書の高さが iframe の高さを超えたらスクロールバーが出る、みたいに。
回避策としては、#contents {} の後に
body > #contents { bottom:0; height: auto; }
を追加。自信ないので間違ってたらフォロー頼みます。
124 ：Name_Not_Found：01/10/03 08:21 ID:FKeWzV1I
>>123さんご指摘の通り、div#contentsの内容が多いと
ネットスケープ６では縦スクロール・バーが２本も出てきますよね。
それが前から不思議でした。特に左右分割フレームを模したもので出易い。
例を出せば――
body {overflow: hidden;margin: 0;padding: 0;}
div#menu {
position: absolute; top: 0; left: 0;
width: 20%; height: 100%;
overflow: auto;
}
div#main {position: absolute;
top: 0; left: 20%;
width: 80%; height: 100%;
overflow: auto;
}
で、ご教示いただいた
body > #main { bottom:0; height: auto; }
を追加すると、ネスケ６でも外側のスクロールバーが消えてちゃんと１本だけになりました。
>外側のスクロールバーについては
>N6 の文書表示部は iframe 要素に近いものだと考えればいいかと思う。
>内部に表示している文書の CSS に関係なく
>文書の高さが iframe の高さを超えたらスクロールバーが出る、みたいに。
つまりネットスケープ６ではoverflow指定がbody要素のみ無効なんですか？
body {overflow:hidden}でもスクロール・バーが消えないってことは。
ネットスケープ６では縦スクロール・バーが２本も出てきますよね。
それが前から不思議でした。特に左右分割フレームを模したもので出易い。
例を出せば――
body {overflow: hidden;margin: 0;padding: 0;}
div#menu {
position: absolute; top: 0; left: 0;
width: 20%; height: 100%;
overflow: auto;
}
div#main {position: absolute;
top: 0; left: 20%;
width: 80%; height: 100%;
overflow: auto;
}
で、ご教示いただいた
body > #main { bottom:0; height: auto; }
を追加すると、ネスケ６でも外側のスクロールバーが消えてちゃんと１本だけになりました。
>外側のスクロールバーについては
>N6 の文書表示部は iframe 要素に近いものだと考えればいいかと思う。
>内部に表示している文書の CSS に関係なく
>文書の高さが iframe の高さを超えたらスクロールバーが出る、みたいに。
つまりネットスケープ６ではoverflow指定がbody要素のみ無効なんですか？
body {overflow:hidden}でもスクロール・バーが消えないってことは。
125 ：Name_Not_Found：01/10/03 09:56 ID:bCG9z/d2
一つ間違えた可能性浮上。
外側のスクロールバーは CSS2-9.1.1
> 閲覧領域が文書の初期コンテナブロックより小さい場合、ユーザエージェントはスクロールの仕組みを提供すべきである。
に沿った挙動かもしれない。
> body {overflow:hidden}でもスクロール・バーが消えないってことは。
body { border: 1px solid red; }
あたりを追加してみれば、ボックスモデルがどうなっているかわかると思う。
通常フローの非置換ブロック要素の高さが 'auto' であるとき
絶対配置ボックスの子要素は無視して高さを算出する。(CSS2-10.6.3)
つまりこの場合、スクロールバー出る出ない以前に、body の高さの算出値は 0 となる。
外側のスクロールバーは CSS2-9.1.1
> 閲覧領域が文書の初期コンテナブロックより小さい場合、ユーザエージェントはスクロールの仕組みを提供すべきである。
に沿った挙動かもしれない。
> body {overflow:hidden}でもスクロール・バーが消えないってことは。
body { border: 1px solid red; }
あたりを追加してみれば、ボックスモデルがどうなっているかわかると思う。
通常フローの非置換ブロック要素の高さが 'auto' であるとき
絶対配置ボックスの子要素は無視して高さを算出する。(CSS2-10.6.3)
つまりこの場合、スクロールバー出る出ない以前に、body の高さの算出値は 0 となる。
126 ：Name_Not_Found：01/10/03 10:05 ID:T1rs3Lpc
bodyのスクロールバーを消すための指定ならば、
ＮＮ６の独自拡張で
overflow: -moz-scrollbars-none;
を使ってみては？
ＮＮ６の独自拡張で
overflow: -moz-scrollbars-none;
を使ってみては？
127 ：Name_Not_Found：01/10/03 10:11 ID:bCG9z/d2
>>124
IE5 で body に border つけると閲覧領域全体にボーダーがつくけれど
これはバグで、閲覧領域と body 要素は無関係。
IE6 の標準準拠モードでは修正されてるが、
body は div などと同じように、基本的に内容の量によって高さが算出され、
ウィンドウサイズ等の影響を受けない。
そのスクロールバーと body{overflow:hidden} は何の関係もないよ。
IE5 で body に border つけると閲覧領域全体にボーダーがつくけれど
これはバグで、閲覧領域と body 要素は無関係。
IE6 の標準準拠モードでは修正されてるが、
body は div などと同じように、基本的に内容の量によって高さが算出され、
ウィンドウサイズ等の影響を受けない。
そのスクロールバーと body{overflow:hidden} は何の関係もないよ。
128 ：Name_Not_Found：01/10/03 10:18 ID:T1rs3Lpc
>>127
するとIE6の標準準拠モードでは、N6と同じくスクロールバーが２本表示されるんですか？
するとIE6の標準準拠モードでは、N6と同じくスクロールバーが２本表示されるんですか？
>>128
試してもいなければ IE6 を入れてもいないが
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_topic4
によればそういう修正をしているらしいので可能性は大きいと思う。
試してもいなければ IE6 を入れてもいないが
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_topic4
によればそういう修正をしているらしいので可能性は大きいと思う。
130 ：Name_Not_Found：01/10/04 12:28 ID:0CGmi382
えー、みなさん興味無いかもしれないけど、一応報告。>>71のバグについて。
ＣＳＳで縦書き（ＩＥ独自拡張writing-mode: tb-rl;）にすると
font-family指定が無効になるって奴ですが、
どうも欧文familyだけですね。和文書体なら大丈夫です。
lang=enと指定した英単語の部分も縦書きだと和文とみなされるらしい。
縦書きはＩＥ5.5以上で可能ですが、ＩＥ6.0で直ってるかどうかは知りません。
ＣＳＳで縦書き（ＩＥ独自拡張writing-mode: tb-rl;）にすると
font-family指定が無効になるって奴ですが、
どうも欧文familyだけですね。和文書体なら大丈夫です。
lang=enと指定した英単語の部分も縦書きだと和文とみなされるらしい。
縦書きはＩＥ5.5以上で可能ですが、ＩＥ6.0で直ってるかどうかは知りません。
131 ：Name_Not_Found：01/10/05 01:06 ID:.afk/EVw
インターネットマガジンのあの名物コーナー
HTML TIPS & TRICKS
改編で終わってしまったんだね。ざんねん。
HTML TIPS & TRICKS
改編で終わってしまったんだね。ざんねん。
132 ：アナログから光までオッケー：01/10/05 02:03 ID:F9IuR.fs
このサイトはみなさんのインターネット環境の
スピードを計ってくれます。また、遅いと思う
人は設定を少し変えることによって無料で
スピードを早くすることができます。
お金を出す前に一度試してみては
いかがでしょうか。上がりの計測も可能です。
http://cym10262.omosiro.com/
スピードを計ってくれます。また、遅いと思う
人は設定を少し変えることによって無料で
スピードを早くすることができます。
お金を出す前に一度試してみては
いかがでしょうか。上がりの計測も可能です。
http://cym10262.omosiro.com/
133 ：Name_Not_Found：01/10/05 18:22 ID:3rXDJMtc
>>132
誤爆、か。
誤爆、か。
134 ：Name_Not_Found：01/10/05 19:07 ID:3rXDJMtc
ネットスケープ6.1で
テーブルの左端の列の各セル内の文字が表示されないことがあります。
セルの外まで大幅に右にズレて一部分だけ文字が現れてる場合もありますが、
画面を最大化すると不可解なことにその文字まで全部消えます。
また、fieldsetの中に入れたフォーム用テーブルがfieldsetの右borderからはみ出すことも
珍しくありません。
これらはＩＥ5.5でもＮＣ4.7でもちゃんと表示されます。
Another HTML-lintでチェックしてもその部分に文法的問題はありません。
どうもtableの処理が変なのです。
必ずしも再現性が無いのですが、場合によっては、左右計２列のテーブルで
左列のtdに指定したtext-align:right;を指定から外すと
見えなかった左列のテキストもまともに表示されて直りました。
こんな基本的プロパティーでもバグはあるんですね（しかもNN6.1でも！）。
テーブルの左端の列の各セル内の文字が表示されないことがあります。
セルの外まで大幅に右にズレて一部分だけ文字が現れてる場合もありますが、
画面を最大化すると不可解なことにその文字まで全部消えます。
また、fieldsetの中に入れたフォーム用テーブルがfieldsetの右borderからはみ出すことも
珍しくありません。
これらはＩＥ5.5でもＮＣ4.7でもちゃんと表示されます。
Another HTML-lintでチェックしてもその部分に文法的問題はありません。
どうもtableの処理が変なのです。
必ずしも再現性が無いのですが、場合によっては、左右計２列のテーブルで
左列のtdに指定したtext-align:right;を指定から外すと
見えなかった左列のテキストもまともに表示されて直りました。
こんな基本的プロパティーでもバグはあるんですね（しかもNN6.1でも！）。
135 ：Name_Not_Found：01/10/05 19:12 ID:7KTf5S62
dhtmlwatch
http://21st.kakiko.com/yasuhira/index.html
http://21st.kakiko.com/yasuhira/index.html
136 ：Name_Not_Found：01/10/05 19:15 ID:bsBEFVJs
137 ：Name_Not_Found：01/10/05 19:48 ID:MWugGbMU
>>134
IE6もだYo
IE6もだYo
138 ：Name_Not_Found：01/10/05 19:53 ID:w/ZeIFPA
ここに問題のページからソースをコピペしておきました。
http://natto.2ch.net/test/read.cgi/hp/997305601/154-155
http://natto.2ch.net/test/read.cgi/hp/997305601/154-155
140 ：Name_Not_Found：01/10/06 11:44 ID:LkNwYsd.
141 ：Name_Not_Found：01/10/06 12:06 ID:Y00LlL1k
>>140
<th>は初期設定がセンタリングですから、特にtext-alignを指定しなくとも
<th><label></label></th>だけで中味が表示されなくなるバグの起きることがあります。
cf.「Netscape6.1の評価」http://natto.2ch.net/test/read.cgi/hp/997305601/152-164
フォームをテーブルで排列なんて、よくあるものなのに……困ったもんです。
<th>は初期設定がセンタリングですから、特にtext-alignを指定しなくとも
<th><label></label></th>だけで中味が表示されなくなるバグの起きることがあります。
cf.「Netscape6.1の評価」http://natto.2ch.net/test/read.cgi/hp/997305601/152-164
フォームをテーブルで排列なんて、よくあるものなのに……困ったもんです。
バグではないけど一応報告．
【Windows NN6.1, Mozilla 0.9.5】
外部スタイルシートで日本語を使う場合（font-familyの指定など），
明示的に @charset=... を書かないと無視される．
呼び出し側で charset を指定してもダメ
（つまり <link rel="stylesheet" href="..." type="text/css" charset="..."> でも無視される．
ここの charset と @charset が違っても @charset しか見てない模様）
なお，IE(6) と NN4.78 では日本語だとわかってくれる．
他のブラウザ（Mac 含めて）は検証してない．
（余談，なぜ気づいたか）
Windows 用 Osaka フォントを入れたら自サイトの見え方が変わってしまったから．
【Windows NN6.1, Mozilla 0.9.5】
外部スタイルシートで日本語を使う場合（font-familyの指定など），
明示的に @charset=... を書かないと無視される．
呼び出し側で charset を指定してもダメ
（つまり <link rel="stylesheet" href="..." type="text/css" charset="..."> でも無視される．
ここの charset と @charset が違っても @charset しか見てない模様）
なお，IE(6) と NN4.78 では日本語だとわかってくれる．
他のブラウザ（Mac 含めて）は検証してない．
（余談，なぜ気づいたか）
Windows 用 Osaka フォントを入れたら自サイトの見え方が変わってしまったから．
143 ：._. . _：01/10/14 01:42 ID:uhETMsO.
っと，下げてしまった．
あと，NN4.78 ではそもそも日本語入りの font-family まわりにバグがあるから，
日本語だとわかってくれているというのは間違っているかも．
あと，NN4.78 ではそもそも日本語入りの font-family まわりにバグがあるから，
日本語だとわかってくれているというのは間違っているかも．
146 ：Name_Not_Found：01/10/14 21:15 ID:asLlMjiU
「バグ」ではないかもしれないけれど……
こんな指定をしました。
HR {
height:1px;
margin:3px auto;
color:#ccc;/*ＩＥ用*/
background-color:#ccc;/*ＮＮ用*/
}
で、これをNN6.1で見たときに、文書のDOCTYPE宣言が
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
の場合と
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
の場合とでは、線の太さが異なるのに気づきました。
後者の方がヘアライン（極細）になるのです。
なんでこんな差が出るの？
こんな指定をしました。
HR {
height:1px;
margin:3px auto;
color:#ccc;/*ＩＥ用*/
background-color:#ccc;/*ＮＮ用*/
}
で、これをNN6.1で見たときに、文書のDOCTYPE宣言が
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
の場合と
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
の場合とでは、線の太さが異なるのに気づきました。
後者の方がヘアライン（極細）になるのです。
なんでこんな差が出るの？
147 ：Name_Not_Found：01/10/15 02:19 ID:IjsQs3sQ
148 ：Name_Not_Found：01/10/15 02:40 ID:9hlX2Wsz
知ってて使ってるのかどうか、微妙なとこね
149 ：Name_Not_Found：01/10/15 08:20 ID:IcODvQnU
Hair Lineてのは印刷・ＤＴＰ用語。髮の毛みたいに細い線のこと。
>>146は横罫（Horizontal Rule）の太さ細さを問題にしてるのだから、別に問題無い。
>>146は横罫（Horizontal Rule）の太さ細さを問題にしてるのだから、別に問題無い。
150 ：爆弾&食料投下！：01/10/15 14:41 ID:m/+dNtkM
widthの扱いが
html4.01 Strictと
xhtml1.0 Strictと解釈が違う
<div style="margin:3%" width:100%;>
なばあい、4.01ではマージン分縮んだdiv要素の100%だが、
xhtmlはウィンドと同じになるので結果横バーがでますです
html4.01 Strictと
xhtml1.0 Strictと解釈が違う
<div style="margin:3%" width:100%;>
なばあい、4.01ではマージン分縮んだdiv要素の100%だが、
xhtmlはウィンドと同じになるので結果横バーがでますです
151 ：Name_Not_Found：01/10/15 14:56 ID:ah3y322P
>>150 お使いのブラウザは何ですか？
152 ：150：01/10/15 16:08 ID:m/+dNtkM
>>151
IE6であります。
IE6であります。
153 ：Name_Not_Found：01/10/15 16:15 ID:X76Q/R67
>>152
こちらをご覧くださいませ。
http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp#cssenhancements_topic3
こちらをご覧くださいませ。
http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp#cssenhancements_topic3
154 ：150：01/10/15 16:45 ID:nX4mW1rH
>>153
ご丁寧にありがとうございます。
ご丁寧にありがとうございます。
155 ：150：01/10/15 16:57 ID:nX4mW1rH
過去ログ見るのは有料になったんですか？
156 ：Name_Not_Found：01/10/18 02:55 ID:zIbvaa3t
age
157 ：Name_Not_Found：01/10/24 11:09 ID:Pw7h2dsI
WindowsでIE5.5、NN6で表示確認してる者ですが――
知人のMacIE5で見ると、テーブルの右列の文字が二行目以降見えなくなる、との報告が。
他のブラウザでは問題ないのだしHTMLやCSSのチェックでもミスは出てこないので
どうやらこれはMacIEだけのバグかと。一行目は無事なのだし。
で、このバグの原因なのですが、心当りある方いらっしゃいますか。
Macを持ってないし、その知人はWeb制作についてよく知らないので、見当がつけられません。
どんなプロパティが悪さをするとこんな状態が生じるのやら、
それがわからないとバグ回避策も浮かびません。
まさかtext-align:rightなんて基本的プロパティでもバグるんですかね、MacIEは。
MacIEのCSSバグをまとめたページがあると助かるのですが。
知人のMacIE5で見ると、テーブルの右列の文字が二行目以降見えなくなる、との報告が。
他のブラウザでは問題ないのだしHTMLやCSSのチェックでもミスは出てこないので
どうやらこれはMacIEだけのバグかと。一行目は無事なのだし。
で、このバグの原因なのですが、心当りある方いらっしゃいますか。
Macを持ってないし、その知人はWeb制作についてよく知らないので、見当がつけられません。
どんなプロパティが悪さをするとこんな状態が生じるのやら、
それがわからないとバグ回避策も浮かびません。
まさかtext-align:rightなんて基本的プロパティでもバグるんですかね、MacIEは。
MacIEのCSSバグをまとめたページがあると助かるのですが。
158 ：Name_Not_Found：01/10/26 11:33 ID:NGeM+VXb
>>157
>MacIEのCSSバグをまとめたページ
まとめてはないが、「ねこめしにっき」で時々出て来るね。
http://www.remus.dti.ne.jp/~a-satomi/nikki/
他にもあるかな？
>MacIEのCSSバグをまとめたページ
まとめてはないが、「ねこめしにっき」で時々出て来るね。
http://www.remus.dti.ne.jp/~a-satomi/nikki/
他にもあるかな？
159 ：Name_Not_Found：01/10/26 11:36 ID:iDNhGBfr
ところでMacIEのユーザーって多いの？
161 ：Name_Not_Found：01/10/26 19:36 ID:nCVm35Pl
Mac使ってて「ネスケって何ですか？」ってひと、
最近多いよ。
最近多いよ。
>>160
ソースを書くと長くなるので、お恥づかしながらURLを晒します。
www.ne.jp/asahi/anarchy/saluton/bnlist.html
ちなみにここは自分のサイトではなく、知人に頼まれて私がhtml化を請け負ったものです。
したがって内容は関知しません（txtファイルで貰っただけ）。マークアップとCSSのみが私の責任です。
素人が書いたつたないソースなので、あれこれツッコミどころがあるかもしれませんが、
ともあれ、当面のバグ回避についてご指摘いただけると有り難い限りです。
ソースを書くと長くなるので、お恥づかしながらURLを晒します。
www.ne.jp/asahi/anarchy/saluton/bnlist.html
ちなみにここは自分のサイトではなく、知人に頼まれて私がhtml化を請け負ったものです。
したがって内容は関知しません（txtファイルで貰っただけ）。マークアップとCSSのみが私の責任です。
素人が書いたつたないソースなので、あれこれツッコミどころがあるかもしれませんが、
ともあれ、当面のバグ回避についてご指摘いただけると有り難い限りです。
163 ：Name_Not_Found：01/10/27 03:07 ID:CIDPymy9
いままでＣＳＳバグばっかりでＤＨＴＭＬのバグが報告されないのはなんでだろ。
そもそもＤＨＴＭＬって何だ？
JScript+CSSのことなら（HTML関係ないぢゃんって声も）、
スタイルシート切替スクリプトだって含まれはしないか？
どうも範疇がよくわからん。
そもそもＤＨＴＭＬって何だ？
JScript+CSSのことなら（HTML関係ないぢゃんって声も）、
スタイルシート切替スクリプトだって含まれはしないか？
どうも範疇がよくわからん。
164 ：Name_Not_Found：01/10/27 12:00 ID:JktzSUum
http://www.cc-net.or.jp/~piro/latest/latest.html
ここIE5.5で見てたら変なことに気づきました。
なんか文章の横幅狭いななんて思ってたら、
P要素中のアンカーにマウスで触れるとなぜか横幅が拡がるんですよ。
しかしA要素を含まないパラグラフは狭い幅のまま、拡げる手もない。
だもので、右端が揃ってないわけです。
これもIEのCSSバグでせう。WinIEの5.0や6.0でも一緒かな？
ここIE5.5で見てたら変なことに気づきました。
なんか文章の横幅狭いななんて思ってたら、
P要素中のアンカーにマウスで触れるとなぜか横幅が拡がるんですよ。
しかしA要素を含まないパラグラフは狭い幅のまま、拡げる手もない。
だもので、右端が揃ってないわけです。
これもIEのCSSバグでせう。WinIEの5.0や6.0でも一緒かな？
165 ：Name_Not_Found：01/10/27 12:14 ID:YuP92mQt
>>163
クライアントサイドで HTML 文書の内容や表示法を動的に変化させる技術の
総称を指すような感じか。
スクリプト + DOM じゃないかな。
# ふと思ったんだが VBScript でも DOM 操作ってできるんだろうか？
スクリプト処理系のバグは実際少ないと思う。
DOM にしても、バグって言うより未実装ってのがほとんどだし。
クライアントサイドで HTML 文書の内容や表示法を動的に変化させる技術の
総称を指すような感じか。
スクリプト + DOM じゃないかな。
# ふと思ったんだが VBScript でも DOM 操作ってできるんだろうか？
スクリプト処理系のバグは実際少ないと思う。
DOM にしても、バグって言うより未実装ってのがほとんどだし。
166 ：Name_Not_Found：01/10/27 12:25 ID:XE3qUP5Q
167 ：まかー：01/10/27 12:49 ID:ihQz7QbN
>>157
今ファイルをダウンロードして状況を確認。
どうやらdefault.cssが問題の様子。
（default.cssのimportは取り除いて確認）
どうも、右列はレンダリングされてるんだけど
何らかの原因で画面の右へ、遥か彼方へ飛んでってしまってるらしい。
横スクロールバーは無し。
原因究明中。次報を待たれよ。
今ファイルをダウンロードして状況を確認。
どうやらdefault.cssが問題の様子。
（default.cssのimportは取り除いて確認）
どうも、右列はレンダリングされてるんだけど
何らかの原因で画面の右へ、遥か彼方へ飛んでってしまってるらしい。
横スクロールバーは無し。
原因究明中。次報を待たれよ。
168 ：Name_Not_Found：01/10/27 12:55 ID:oeO0POwH
169 ：まかー：01/10/27 15:10 ID:ihQz7QbN
>>157
原因判明。
brへのdisplay:block指定が問題。こいつをはずすと問題なく表示される。
CSSでbrは記述出来ない（仕様書にも書いてある）から、
はずした方がいいと思う。
それと、関係無いかも知れないけどtableが左端に表示されてるよ。
原因判明。
brへのdisplay:block指定が問題。こいつをはずすと問題なく表示される。
CSSでbrは記述出来ない（仕様書にも書いてある）から、
はずした方がいいと思う。
それと、関係無いかも知れないけどtableが左端に表示されてるよ。
>>169
まかーさん、有り難う。
てっきり悪さをしてるのはbn.cssの方かと思ってましたよ。
br {display:block} は「ブラウザが持つデフォルトのスタイルシート」とするものが
あったので、確かめもせずそのまま記述してしまったものです。
cf.http://tancro.stp-1.com/stylesheet/default.html
しかし使ってもない<br>への指定が悪影響を及ぼすとは、想像もつきませんでした。
それから、ご指摘を受けてMacIEでもtableを中央に寄せるべく
table.center {
text-align:-moz-center;
margin-right:auto;margin-left:auto;
}
としてみましたが、NN6で見るとなぜかcaptionだけ中央寄せになってくれません。
captionもtableに含まれるはずですが、これはバグなのか、仕様なのか……。
それで一応、captionにもclass="center"を振ってセンタリングしておきました。
まかーさん、有り難う。
てっきり悪さをしてるのはbn.cssの方かと思ってましたよ。
br {display:block} は「ブラウザが持つデフォルトのスタイルシート」とするものが
あったので、確かめもせずそのまま記述してしまったものです。
cf.http://tancro.stp-1.com/stylesheet/default.html
しかし使ってもない<br>への指定が悪影響を及ぼすとは、想像もつきませんでした。
それから、ご指摘を受けてMacIEでもtableを中央に寄せるべく
table.center {
text-align:-moz-center;
margin-right:auto;margin-left:auto;
}
としてみましたが、NN6で見るとなぜかcaptionだけ中央寄せになってくれません。
captionもtableに含まれるはずですが、これはバグなのか、仕様なのか……。
それで一応、captionにもclass="center"を振ってセンタリングしておきました。
173 ：Name_Not_Found：01/10/28 23:17 ID:mZHWLoRg
アンカー触るとズレるのって自分とこでもある。
誰か原因知らん？
誰か原因知らん？
174 ：Name_Not_Found：01/10/28 23:36 ID:ZTirAR2v
175 ：Name_Not_Found：01/10/29 05:15 ID:jtRl1MoK
outsider 見てみたけどなんともなっていなかった＠WinIE5.01
キャッシュかな。で、>173 じゃないけど俺のもずれる事があります。
自分のシート見ると
p
{
letter-spacing: 1px;
text-align: justify;
text-justify: inter-ideograph;
}
a:active
{
bottom: -0.12em;
right: -0.10em;
}
justify があやしいような。hover では色変えてるだけですし。
キャッシュかな。で、>173 じゃないけど俺のもずれる事があります。
自分のシート見ると
p
{
letter-spacing: 1px;
text-align: justify;
text-justify: inter-ideograph;
}
a:active
{
bottom: -0.12em;
right: -0.10em;
}
justify があやしいような。hover では色変えてるだけですし。
176 ：Name_Not_Found：01/10/29 14:14 ID:56xCH76L
既出かな。
ページの下にゆくほど左にはみだすバグが見事に現れてます。IE5.5にて（6も？）
http://www.alib.jp/diary/diary_200110.html#diary_20011028a
ページの下にゆくほど左にはみだすバグが見事に現れてます。IE5.5にて（6も？）
http://www.alib.jp/diary/diary_200110.html#diary_20011028a
177 ：Name_Not_Found：01/10/29 14:19 ID:RR5ddH39
178 ：Name_Not_Found：01/10/29 22:02 ID:k2InB4DW
Netscape6.1には失望しました。
text-indentを指定したブロック要素内のインライン要素にfont-weight:boldとすると、
太字とそれにつづく普通の文字が重なってしまったのです。
例:
p.text {text-indent:1em;}
a:link {font-weight:600;}
<p class="text">ひろゆき氏によれば<a href="http://www.2ch.net/guide/">『２ちゃんねる』</a>はアングラではない。<p>
Ａ要素末尾の「』」と次の「は」の字が重なります。Ａ要素が長くなると重なる度合もひどくなる。
例文のＡ要素を<strong>や<b>などの太字がデフォルトであるマークアップにしても、同じ症状が発生します。
こんな基本的プロパティでバグ起こしてんぢゃないよ、全く。
text-indentを指定したブロック要素内のインライン要素にfont-weight:boldとすると、
太字とそれにつづく普通の文字が重なってしまったのです。
例:
p.text {text-indent:1em;}
a:link {font-weight:600;}
<p class="text">ひろゆき氏によれば<a href="http://www.2ch.net/guide/">『２ちゃんねる』</a>はアングラではない。<p>
Ａ要素末尾の「』」と次の「は」の字が重なります。Ａ要素が長くなると重なる度合もひどくなる。
例文のＡ要素を<strong>や<b>などの太字がデフォルトであるマークアップにしても、同じ症状が発生します。
こんな基本的プロパティでバグ起こしてんぢゃないよ、全く。
例文の文末に「<p>」とあるのはむろん「</p>」の誤記です。失礼しました。
色々試してみたら原因判明した、とは限らない模様。
当方、
body { margin: xxx; }
というのが気にいらず、
body { margin: 0; padding: xxx; }
のようにしてるんだけど、
これを前者のマージン指定に戻したらとりあえずは解消した。
ただ、他のシートでも同じことしてるのにそちらはズレないのね。
恐らく、BODYに限らず、marginやpaddingの設定の仕方に原因があるんだろうけど、
今はちょっとワカラソ。眠い。そのうち単位とか変えて調べてみる予定。
>>174
ちと恥ずかしいので勘弁。
「CSSでイケてる～リンク集」に何故か載ってるので、その気があったら探してみて。
>>175
そちらはどう？
当方、
body { margin: xxx; }
というのが気にいらず、
body { margin: 0; padding: xxx; }
のようにしてるんだけど、
これを前者のマージン指定に戻したらとりあえずは解消した。
ただ、他のシートでも同じことしてるのにそちらはズレないのね。
恐らく、BODYに限らず、marginやpaddingの設定の仕方に原因があるんだろうけど、
今はちょっとワカラソ。眠い。そのうち単位とか変えて調べてみる予定。
>>174
ちと恥ずかしいので勘弁。
「CSSでイケてる～リンク集」に何故か載ってるので、その気があったら探してみて。
>>175
そちらはどう？
181 ：173：01/10/30 01:22 ID:WgIYq8uj
下げちまった。
182 ：Name_Not_Found：01/10/30 02:18 ID:WtO1U4hq
>>178
text-align: justify;と併用するとその問題が起こるのは知ってるけど、
今見た限り、text-indentとの併用では起こってないなぁ……
まぁどっちにしろこの辺にバグがあるというのは変わらないか。
text-align: justify;と併用するとその問題が起こるのは知ってるけど、
今見た限り、text-indentとの併用では起こってないなぁ……
まぁどっちにしろこの辺にバグがあるというのは変わらないか。
183 ：Name_Not_Found：01/10/30 09:38 ID:tibs+KVf
[IE6]
垂直方向のマージンに負の値を指定すると、互換/標準モードともに
親ボックス? の border や background が意図しない位置に重複して現れる。
<div style="margin:1em; border:1px solid red">
<div style="margin-top:-0.2em">hoge</div>
<div style="margin-top:-0.2em">hoge</div>
</div>
こんなのを 5-6 個連続させてみると顕著。Win2000 にて確認。
垂直方向のマージンに負の値を指定すると、互換/標準モードともに
親ボックス? の border や background が意図しない位置に重複して現れる。
<div style="margin:1em; border:1px solid red">
<div style="margin-top:-0.2em">hoge</div>
<div style="margin-top:-0.2em">hoge</div>
</div>
こんなのを 5-6 個連続させてみると顕著。Win2000 にて確認。
184 ：Name_Not_Found：01/10/30 11:21 ID:qu1lP6Hw
>>182
回避法としては、
text-align: expression(justify);TEXT-JUSTIFY: ～;
で、いいのかな？ expression()でIEにのみスタイルが適用される。
どうせtext-align:justifyはＩＥしか対応してないんだし（少なくとも日本語では）。
MacIEでもtext-align:justifyを指定するとよくないらしいね。media@で除けるか。
回避法としては、
text-align: expression(justify);TEXT-JUSTIFY: ～;
で、いいのかな？ expression()でIEにのみスタイルが適用される。
どうせtext-align:justifyはＩＥしか対応してないんだし（少なくとも日本語では）。
MacIEでもtext-align:justifyを指定するとよくないらしいね。media@で除けるか。
185 ：Name_Not_Found：01/10/30 12:09 ID:4807kiO6
186 ：Name_Not_Found：01/10/30 21:19 ID:h2nnqRKd
Netscape6.1には失望しました。
<sup>へのfont-family指定が効かないバグ。↓
http://pc.2ch.net/test/read.cgi/hp/996828258/727-734
しかも、親要素のfont-familyが或る種の和文フォント(*)だと<sup>の位置が変です。
上付文字にならず、vertical-align:baseline;の状態になることもあります。
*"ヒラギノ明朝体3等幅""ヒラギノ明朝体5等幅""ヒラギノ明朝体7等幅"とかね。
ただし初めからシートにsup{vertical-align:55%;}と指定しておけば、回避できますが。
mozilla0.9.5では直ってるといいのですが。
<sup>へのfont-family指定が効かないバグ。↓
http://pc.2ch.net/test/read.cgi/hp/996828258/727-734
しかも、親要素のfont-familyが或る種の和文フォント(*)だと<sup>の位置が変です。
上付文字にならず、vertical-align:baseline;の状態になることもあります。
*"ヒラギノ明朝体3等幅""ヒラギノ明朝体5等幅""ヒラギノ明朝体7等幅"とかね。
ただし初めからシートにsup{vertical-align:55%;}と指定しておけば、回避できますが。
mozilla0.9.5では直ってるといいのですが。
187 ：Name_Not_Found：01/10/31 12:08 ID:G9h3zazj
次みたいなスタイルがあったと思ってください。
ul {list-style-position:inside;}
li.em{list-style-position:outside ! important;}
<ul>
<li><p>第一に、……</p>
<li><p>次に、……</p>
<li><p>第三に、……</p>
<li class="em"><p>結論としては、……</p>
</ul>
これがIE5.5では、最後のリストへのlist-style-position:outside;の指定が効いてくれません。
Netscape6.2では有効ですが、その代り、別のところで表示が変です。こんな感じで表示されます。
～～～～～～～～～
・
第一に、……
・
次に、……
・
第三に、……
・結論として、……
～～～～～～～～～～～～～～～
要するに、insideの場合だけなぜかリストマークの後で改行されて表示されるわけです。
<li>要素内の<p>を削除するとリストマークとリストの箇条書きの文章がちゃんと一列に並びますが――
これはバグではないのですか？
ul {list-style-position:inside;}
li.em{list-style-position:outside ! important;}
<ul>
<li><p>第一に、……</p>
<li><p>次に、……</p>
<li><p>第三に、……</p>
<li class="em"><p>結論としては、……</p>
</ul>
これがIE5.5では、最後のリストへのlist-style-position:outside;の指定が効いてくれません。
Netscape6.2では有効ですが、その代り、別のところで表示が変です。こんな感じで表示されます。
～～～～～～～～～
・
第一に、……
・
次に、……
・
第三に、……
・結論として、……
～～～～～～～～～～～～～～～
要するに、insideの場合だけなぜかリストマークの後で改行されて表示されるわけです。
<li>要素内の<p>を削除するとリストマークとリストの箇条書きの文章がちゃんと一列に並びますが――
これはバグではないのですか？
188 ：Name_Not_Found：01/10/31 12:14 ID:rVyOjkW7
N6の場合はそれでいい。
要するにinseideにするって事はインライン要素として扱うって事だから、
pがあるとリストマーカーは匿名ブロックに囲まれてしまうから。
N6の場合はこうなるってだけで、他が間違ってるわけじゃないよ。
そもそもリストマーカーの位置は厳密には定められてないから。
要するにinseideにするって事はインライン要素として扱うって事だから、
pがあるとリストマーカーは匿名ブロックに囲まれてしまうから。
N6の場合はこうなるってだけで、他が間違ってるわけじゃないよ。
そもそもリストマーカーの位置は厳密には定められてないから。
189 ：187：01/10/31 12:53 ID:6ns0RDPY
>要するにinseideにするって事はインライン要素として扱うって事だから、
Ｎ６の場合、list-style-position:inside;ではli要素をインラインと解釈するってことですか。
それによってリストマーカーとテキストの位置関係がinside式に表示されるのだ、と。
しかしlist-style-positionはあくまでリストマーカーの位置に対するプロパティなのですから、
li要素のインライン／ブロックの設定まで変化させるのはあまり宜しくない解釈の仕方ではないかと感じます。
li要素はブロック要素内包可能なのですから、その点で不都合の出ない解釈が望ましいのでは。
Ｎ６の場合、list-style-position:inside;ではli要素をインラインと解釈するってことですか。
それによってリストマーカーとテキストの位置関係がinside式に表示されるのだ、と。
しかしlist-style-positionはあくまでリストマーカーの位置に対するプロパティなのですから、
li要素のインライン／ブロックの設定まで変化させるのはあまり宜しくない解釈の仕方ではないかと感じます。
li要素はブロック要素内包可能なのですから、その点で不都合の出ない解釈が望ましいのでは。
190 ：Name_Not_Found：01/10/31 17:41 ID:L7/XL1Uy
入れ子になったリストで、一番外側のリストマーカーだけ用意した画像で表示したいんですが……。
ul {list-style-image: url("../images/triangle.gif");}
li ul{list-style-image: url("");}
このスタイルで表示させると、
IEでは意図した通りにうまくゆくのですが、
NN6.2ではネストされたリスト（内側のリスト）のリストマーカーが全く表示されなくなります。
つまり、list-style-type: none;の状態として表示される破目になる。
確かNN6.01ではそんなことなかったからバグっぽいけど、それともこれも解釈の差なんですかね？
ul {list-style-image: url("../images/triangle.gif");}
li ul{list-style-image: url("");}
このスタイルで表示させると、
IEでは意図した通りにうまくゆくのですが、
NN6.2ではネストされたリスト（内側のリスト）のリストマーカーが全く表示されなくなります。
つまり、list-style-type: none;の状態として表示される破目になる。
確かNN6.01ではそんなことなかったからバグっぽいけど、それともこれも解釈の差なんですかね？
191 ：Name_Not_Found：01/11/01 11:29 ID:mxCfPn2/
IE6のCSSバグを強制的に矯正
http://members.jcom.home.ne.jp/jintrick/Personal/agenda.html#failed2001_10_29c8
「仮説
IE6のpaddingやborderのバグは、バグが発生した要素より後に登場する要素に対して、re-style（造語）すれば直る。」
「よく、a:hoverで、marginやpaddingのバグが直っているのを見かけ、この仮説を立てた。実は指定は何でも良くて、単にHTMLソースにおける登場順が下の要素に対してスタイルを変更してやれば良かった、ということか。」
>>164・>>173-176で挙がったのと同じバグかな？
http://members.jcom.home.ne.jp/jintrick/Personal/agenda.html#failed2001_10_29c8
「仮説
IE6のpaddingやborderのバグは、バグが発生した要素より後に登場する要素に対して、re-style（造語）すれば直る。」
「よく、a:hoverで、marginやpaddingのバグが直っているのを見かけ、この仮説を立てた。実は指定は何でも良くて、単にHTMLソースにおける登場順が下の要素に対してスタイルを変更してやれば良かった、ということか。」
>>164・>>173-176で挙がったのと同じバグかな？
192 ：Name_Not_Found：01/11/01 12:02 ID:J4FO0cQj
193 ：Name_Not_Found：01/11/01 12:04 ID:J4FO0cQj
>>190
list-style-typeを指定してみそ。
list-style-typeを指定してみそ。
194 ：Name_Not_Found：01/11/01 12:17 ID:J4FO0cQj
195 ：u.r.a：01/11/01 18:38 ID:T61eq4Tz
DHTMLでPULLDOWN MENUをやろうとしているんですが、IEでセキュリティレベルを
『高』に設定したときって、JavaScriptが効かなくなりますよね。
時々『高』でも表示されているサイトを見かけるんですが、対策知っている方
いませんでしょうか？
『信頼済みサイト』に設定するネタは却下ということで。。。
あと、IE6ってセキュリティレベルを『高』に設定すると
<NOSCRIPT>自体認識しなくなりませんか？
『高』に設定したときって、JavaScriptが効かなくなりますよね。
時々『高』でも表示されているサイトを見かけるんですが、対策知っている方
いませんでしょうか？
『信頼済みサイト』に設定するネタは却下ということで。。。
あと、IE6ってセキュリティレベルを『高』に設定すると
<NOSCRIPT>自体認識しなくなりませんか？
196 ：Name_Not_Found：01/11/02 03:09 ID:EE6RPhVu
HTMLとJavaScriptは別だということを先ず知ってから。
恐らくselect要素のことを言ってるんだよね？
というかそもそもスレ違いじゃないかい？
恐らくselect要素のことを言ってるんだよね？
というかそもそもスレ違いじゃないかい？
＞196
違いますよ。M$社のTOPや東京三菱のTOPみたいなのを
逝っているんですがね。。。
スレ違いかもしれませんね、すまそ。
でも知ってるひといたら宜しく。。。
違いますよ。M$社のTOPや東京三菱のTOPみたいなのを
逝っているんですがね。。。
スレ違いかもしれませんね、すまそ。
でも知ってるひといたら宜しく。。。
198 ：Name_Not_Found：01/11/02 13:25 ID:9m+7TJRW
199 ：Name_Not_Found：01/11/02 22:17 ID:Ct45ZuzS
たぶん>>197は「M$社のTOPや東京三菱のTOPみたい」でしかも
「高」で動くのを見た事があると言いたいんだと思うが、
CSSで色変えられてたselectを勘違いしたに一票。
そうでなけりゃ実際に動くソースを見せてくれ。
「高」で動くのを見た事があると言いたいんだと思うが、
CSSで色変えられてたselectを勘違いしたに一票。
そうでなけりゃ実際に動くソースを見せてくれ。
200 ：Name_Not_Found：01/11/04 04:00 ID:RIKPHC1N
バグ報告です。
【NN6】
ruby {/* 行間増やす */
position: relative;
line-height: 2.0;
}
ruby>rt, rtc {/* rt(ruby text) を上に配置 */
position: absolute;
left: 0;
top: -1.1em;
font: 55%/1 monospace;
text-indent: 0;
}
rp {display:none;}/* 括弧を非表示に */
A:link RT, A:visited RT ,a[href] RT
{text-decoration:none ! important;}
最後の、ルビ部分(RT)にまでリンクの下線をつけぬための指定だけなぜか効かない。
【WinIE5～】
RT {text-decoration:none !important;}
<u><RUBY><RB>ルビ</RB><RP>(</RP><RT>ふりがな</RT><RP>)</RP></RUBY></u>
RT要素の下線が消えてくれない。
非推奨タグの<u>を<em style="text-decoration:underline;">としてもやはり同様。
但しNN6と違って、A要素内にあるRUBY要素の場合ではリンクの下線はRB要素のみにつく。
【NN6】
ruby {/* 行間増やす */
position: relative;
line-height: 2.0;
}
ruby>rt, rtc {/* rt(ruby text) を上に配置 */
position: absolute;
left: 0;
top: -1.1em;
font: 55%/1 monospace;
text-indent: 0;
}
rp {display:none;}/* 括弧を非表示に */
A:link RT, A:visited RT ,a[href] RT
{text-decoration:none ! important;}
最後の、ルビ部分(RT)にまでリンクの下線をつけぬための指定だけなぜか効かない。
【WinIE5～】
RT {text-decoration:none !important;}
<u><RUBY><RB>ルビ</RB><RP>(</RP><RT>ふりがな</RT><RP>)</RP></RUBY></u>
RT要素の下線が消えてくれない。
非推奨タグの<u>を<em style="text-decoration:underline;">としてもやはり同様。
但しNN6と違って、A要素内にあるRUBY要素の場合ではリンクの下線はRB要素のみにつく。
201 ：Name_Not_Found：01/11/04 12:23 ID:qR4G0uq7
>>200
http://pc.2ch.net/test/read.cgi/hp/996828258/926
＞このプロパティは継承を行わない。 しかし当該ブロックの子孫部に当たるボックスは、すべて同じ装飾を施されるべきである
＞http://www.fan.gr.jp/~kaz/rec-css2/text.html#lining-striking-props
＞
＞とあるので、子要素での下線解除は出来ないのではないか。
とすると、IE5でA要素内では解除できる方がバグってことになるのか？
http://pc.2ch.net/test/read.cgi/hp/996828258/926
＞このプロパティは継承を行わない。 しかし当該ブロックの子孫部に当たるボックスは、すべて同じ装飾を施されるべきである
＞http://www.fan.gr.jp/~kaz/rec-css2/text.html#lining-striking-props
＞
＞とあるので、子要素での下線解除は出来ないのではないか。
とすると、IE5でA要素内では解除できる方がバグってことになるのか？
202 ：Name_Not_Found：01/11/04 13:02 ID:X1AFrflk
>>201
仕様
仕様
203 ：Name_Not_Found：01/11/08 08:10 ID:Uax81n0P
↓margin-topがマイナス値を取った場合のバグ（NN6、IE6）
http://pc.2ch.net/test/read.cgi/hp/996828258/945-951
http://pc.2ch.net/test/read.cgi/hp/996828258/945-951
204 ：Name_Not_Found：01/11/08 14:42 ID:M+cBEwAo
遅レスな上趣旨とは違うんだけどさ、
>>187 の場合 ul よりも ol のがいいんでない？
>>187 の場合 ul よりも ol のがいいんでない？
205 ：Name_Not_Found：01/11/08 18:38 ID:ksbZuB36
いまさらだけど
>CSSでbrは記述出来ない（仕様書にも書いてある）から
CSS2では
br:before{content:"\A"}となってるよ
>CSSでbrは記述出来ない（仕様書にも書いてある）から
CSS2では
br:before{content:"\A"}となってるよ
206 ：Name_Not_Found：01/11/08 18:52 ID:WRcKZNWD
207 ：Name_Not_Found：01/11/08 20:21 ID:EnelM577
>>206
一応、アリ。あまり意味は無いと思うけど。
一応、アリ。あまり意味は無いと思うけど。
208 ：Name_Not_Found：01/11/08 20:35 ID:JlpswVyj
>>208
生き残れるかとか言われても、元々BR要素型なんて
めったに使わないしなぁ……あ、ADDRESSの中では使ってるか……。
と言うか、空要素をdisplay: inlineにするのには、何か意味があるの？
生き残れるかとか言われても、元々BR要素型なんて
めったに使わないしなぁ……あ、ADDRESSの中では使ってるか……。
と言うか、空要素をdisplay: inlineにするのには、何か意味があるの？
211 ：Name_Not_Found：01/11/10 01:44 ID:qranrXht
>210
意図はわかります（Prox でやった事あるし）が、それをすると読みにくくなって
生き残れないのはむしろこちらのような。
意図はわかります（Prox でやった事あるし）が、それをすると読みにくくなって
生き残れないのはむしろこちらのような。
212 ： ◆Web/W/NE ：01/11/12 14:57 ID:eB9QPuVD
N6.1で、
親要素で
{
float: left;
position: relative;
}
子要素で
{
positon: absolute;
top: xxx; left: xxx
}
とやると、子要素のabsoluteが包含ブロックを無視して、
bodyに対する絶対配置になってしまうのですが、
N6.2では改善されてますか？ 原因はfloatのようです。
親要素で
{
float: left;
position: relative;
}
子要素で
{
positon: absolute;
top: xxx; left: xxx
}
とやると、子要素のabsoluteが包含ブロックを無視して、
bodyに対する絶対配置になってしまうのですが、
N6.2では改善されてますか？ 原因はfloatのようです。
213 ：Name_Not_Found：01/11/15 20:03 ID:KtGuJURr
いまさらネスケ４のバグなど珍しくもないかもしれませんが、
CSSではなくhtmlソースの書き方（改行の有り無し）でバグるってのは
ちょっと珍しいので、この事典にも登録しておきます。↓
http://pc.2ch.net/test/read.cgi/hp/1000552896/536-538
CSSではなくhtmlソースの書き方（改行の有り無し）でバグるってのは
ちょっと珍しいので、この事典にも登録しておきます。↓
http://pc.2ch.net/test/read.cgi/hp/1000552896/536-538
214 ：Name_Not_Found：01/11/15 20:57 ID:ASoQ8fjr
>>213(ﾟДﾟ)ﾊｧ?
215 ：Name_Not_Found：01/11/16 03:11 ID:Z3KPZ8hL
誰かOperaのCSS対応についてまとめてませんか。参考ＵＲＬ希望。
結構バグ多いみたいなんですが。
結構バグ多いみたいなんですが。
216 ： ：01/11/16 03:52 ID:+cNTw/NC
217 ：Name_Not_Found：01/11/16 10:17 ID:gtyk6rsy
218 ：Name_Not_Found：01/11/16 17:21 ID:ORKmh74V
219 ：Name_Not_Found：01/11/16 18:01 ID:b3fZ0z3A
>>215
http://members.jcom.home.ne.jp/jintrick/Personal/agenda.htmlによれば、
Operaは――
・CSSにて日本語は解釈しないらしい（Charset指定しても駄目）
・しかしエスケープ文字なら解釈するらしい
・font-familyはひとつしか指定が効かないらしい
・text-indentの値の解釈が不正
・画像の透過部分の表示が変（GIF、PNG共）
・インライン要素の扱いが色々怪しい（border、padding等）
・まあどれもたいした話じゃあない
またhttp://snob.s1.xrea.com/2001/11.shtml#nov14によれば、
・body に font-family:"arial","verdana","comic sans ms"; と書いてゐると
欧文/邦文フォントの混りぐあひがあまり見好くないので、おしまひのところ
を ,; とする（かうすると、font-family を無視するみたい）。
http://members.jcom.home.ne.jp/jintrick/Personal/agenda.htmlによれば、
Operaは――
・CSSにて日本語は解釈しないらしい（Charset指定しても駄目）
・しかしエスケープ文字なら解釈するらしい
・font-familyはひとつしか指定が効かないらしい
・text-indentの値の解釈が不正
・画像の透過部分の表示が変（GIF、PNG共）
・インライン要素の扱いが色々怪しい（border、padding等）
・まあどれもたいした話じゃあない
またhttp://snob.s1.xrea.com/2001/11.shtml#nov14によれば、
・body に font-family:"arial","verdana","comic sans ms"; と書いてゐると
欧文/邦文フォントの混りぐあひがあまり見好くないので、おしまひのところ
を ,; とする（かうすると、font-family を無視するみたい）。
220 ：Name_Not_Found：01/11/16 18:20 ID:rsujQZ6U
document.body.clientHeight、
IEだとウィンドウの(クライアント領域の)高さを返すのに対して
Operaだと文書全体の高さを返すようなんだけど
どっちが正しいのかな? Operaのバグかな?
IEだとウィンドウの(クライアント領域の)高さを返すのに対して
Operaだと文書全体の高さを返すようなんだけど
どっちが正しいのかな? Operaのバグかな?
221 ：Name_Not_Found：01/11/16 18:26 ID:PHxCbSir
>>220
正しいとか正しくないとかの問題ではない。
これは、どちらのブラウザともバグではなく仕様です。
ただその仕様が異なるというだけであり、
各ブラウザにとって、それらの各仕様は正しい。
貴方は、何を基準に、正しい、正しくないと言っているのですか？
W3Cの仕様と異なる動作を行うものは、バグだと思っている
非常識な奴は帰れ。
正しいとか正しくないとかの問題ではない。
これは、どちらのブラウザともバグではなく仕様です。
ただその仕様が異なるというだけであり、
各ブラウザにとって、それらの各仕様は正しい。
貴方は、何を基準に、正しい、正しくないと言っているのですか？
W3Cの仕様と異なる動作を行うものは、バグだと思っている
非常識な奴は帰れ。
222 ：Name_Not_Found：01/11/16 21:23 ID:8dyyiFSJ
223 ：220：01/11/16 21:32 ID:rsujQZ6U
>>221
あー、バグという言葉を使った俺が悪かったよ。
>>222
なるほど、今後の流れとしては文書全体の高さが主流なのね。
ではOperaのバグという線は少なくともないと。
バグなら報告しようかと思ってたがその必要はないのか。
サンクス。
あー、バグという言葉を使った俺が悪かったよ。
>>222
なるほど、今後の流れとしては文書全体の高さが主流なのね。
ではOperaのバグという線は少なくともないと。
バグなら報告しようかと思ってたがその必要はないのか。
サンクス。
224 ：Name_Not_Found：01/11/17 17:55 ID:PcMN7C8D
N6.1で、
親要素で
{
position: relative;
}
子要素で
{
positon: absolute;
top: xxx; left: xxx
}
子要素の配置を親要素より飛び出させる(マイナス値)にすると
完全に飛び出たところで、リンク/フォームものが無効になったよ。
IE6.0ならちゃんとクリックできる。
同じく、親要素の高さより子要素の高さが大きくなると、
超えた分だけちょん切れる。これはN6.1IE6.0ともに。
欄外表示の注釈風にしたかったんだけどね。うーむ。
親要素で
{
position: relative;
}
子要素で
{
positon: absolute;
top: xxx; left: xxx
}
子要素の配置を親要素より飛び出させる(マイナス値)にすると
完全に飛び出たところで、リンク/フォームものが無効になったよ。
IE6.0ならちゃんとクリックできる。
同じく、親要素の高さより子要素の高さが大きくなると、
超えた分だけちょん切れる。これはN6.1IE6.0ともに。
欄外表示の注釈風にしたかったんだけどね。うーむ。
225 ：Name_Not_Found：01/11/19 23:35 ID:I9q7FwxV
http://pc.2ch.net/test/read.cgi/hp/1005047493/164-
【NN6.2】
{position:relative; top:xx%;}って記述しても無視される。
但し親要素を（BODY以外に）特に持たない要素に適用させた場合は有効。
.foo {position:relative; top:yy%; left:xx%;}として
その適用させた要素を<div>とかで括ると、
なぜかtop:yy%が無視されて、left:xx%だけ有効になる。
しかし単位を%でなくpxやemにするとtopの記述も無視されなかった。
【NN6.2】
{position:relative; top:xx%;}って記述しても無視される。
但し親要素を（BODY以外に）特に持たない要素に適用させた場合は有効。
.foo {position:relative; top:yy%; left:xx%;}として
その適用させた要素を<div>とかで括ると、
なぜかtop:yy%が無視されて、left:xx%だけ有効になる。
しかし単位を%でなくpxやemにするとtopの記述も無視されなかった。
226 ：Name_Not_Found：01/11/28 07:55 ID:yYAA/Nep
【Opera6β】
http://www6.plala.or.jp/s-meteo/hime/index9.htmlによれば――
>複数mediaが記述された@importのみ認識されないようです。
>例えば、以下の記述は受け付けてくれません(Mozillaではサポートされている)。
>@import "style3.css" screen,print;
>@import url(style4.css) screen,print,tv;
>以上の記述をうまく利用することにより、Opera対策を取れるかも知れません。
http://www6.plala.or.jp/s-meteo/hime/index9.htmlによれば――
>複数mediaが記述された@importのみ認識されないようです。
>例えば、以下の記述は受け付けてくれません(Mozillaではサポートされている)。
>@import "style3.css" screen,print;
>@import url(style4.css) screen,print,tv;
>以上の記述をうまく利用することにより、Opera対策を取れるかも知れません。
227 ：Name_Not_Found：01/11/29 02:15 ID:UZ8X30QK
背景指定のprintメディアへの反映について。
H1 {
background-image: url('icon.gif');
background-repeat:repeat;
background-position:center;
background-color:#c0c0c0;
}
上記のスタイルは、画面で表示確認する限りでは問題無い。
しかし２行目の値をrepeat以外、no-repeatやrepeat-xにすると、
なぜかプリントアウトした時に背景イメージだけ印刷されなくなる。
media="print"や@media printと指定してみても結果は同じ。
WinIE5.5で確認。
もちろんIEは、インターネットオプション＞詳細設定＞背景の色とイメージを印刷する、
にチェックを入れてあり、現に背景色はちゃんと印刷される。
印刷プレビューで見ても、背景画像だけ印刷に出てない。
background-repeat:repeat;ならば背景画像も印刷されるから、これはバグかと。
NN6.2では印刷プレビュー機能が無いのでいちいちプリントアウトしなくてはならず、
全パターンは確認しなかったが、同じく背景イメージのみprintメディアに反映さ
れない場合があった。
cf.http://pc.2ch.net/test/read.cgi/hp/1005047493/273-277
H1 {
background-image: url('icon.gif');
background-repeat:repeat;
background-position:center;
background-color:#c0c0c0;
}
上記のスタイルは、画面で表示確認する限りでは問題無い。
しかし２行目の値をrepeat以外、no-repeatやrepeat-xにすると、
なぜかプリントアウトした時に背景イメージだけ印刷されなくなる。
media="print"や@media printと指定してみても結果は同じ。
WinIE5.5で確認。
もちろんIEは、インターネットオプション＞詳細設定＞背景の色とイメージを印刷する、
にチェックを入れてあり、現に背景色はちゃんと印刷される。
印刷プレビューで見ても、背景画像だけ印刷に出てない。
background-repeat:repeat;ならば背景画像も印刷されるから、これはバグかと。
NN6.2では印刷プレビュー機能が無いのでいちいちプリントアウトしなくてはならず、
全パターンは確認しなかったが、同じく背景イメージのみprintメディアに反映さ
れない場合があった。
cf.http://pc.2ch.net/test/read.cgi/hp/1005047493/273-277
228 ：Name_Not_Found：01/12/03 19:31 ID:F53Kc1zu
確認用HTML(一部略)
<style>
body {
width: 500px;
height: 400px;
}
div {
position: absolute;
}
#a {
right: 100px;
bottom: 100px;
left: 100px;
top: 100px;
}
#b {
right: 25%;
bottom: 25%;
left: 25%;
top: 25%;
}
</style>
<body><div id="a">a<div id="b">b</div></div></body>
【IE6】
right、bottomはスッパリ無視。
#a は a が表示できる部分しか確保されない。
【Netscape6】
<body>直下の<div>が<body>の表示領域ではなく、
ブラウザのクライアント領域に対応してしまう模様。
それ以外は期待どおりっぽい。
【Opera6β】
どうもrightのみ無視っぽい。
#b は、どうもクライアント領域に対しての割合のようだ。
#a は #b が入るように横幅が拡張される。
<style>
body {
width: 500px;
height: 400px;
}
div {
position: absolute;
}
#a {
right: 100px;
bottom: 100px;
left: 100px;
top: 100px;
}
#b {
right: 25%;
bottom: 25%;
left: 25%;
top: 25%;
}
</style>
<body><div id="a">a<div id="b">b</div></div></body>
【IE6】
right、bottomはスッパリ無視。
#a は a が表示できる部分しか確保されない。
【Netscape6】
<body>直下の<div>が<body>の表示領域ではなく、
ブラウザのクライアント領域に対応してしまう模様。
それ以外は期待どおりっぽい。
【Opera6β】
どうもrightのみ無視っぽい。
#b は、どうもクライアント領域に対しての割合のようだ。
#a は #b が入るように横幅が拡張される。
229 ：Name_Not_Found：01/12/04 19:00 ID:73rxXEHC
230 ：Name_Not_Found：01/12/04 20:12 ID:3tSPw7cO
>>229
未だに間違ってるレファレンス本もあるらしいが、信じてはいけない。
rightもbottomもちゃんと仕様で定まったプロパティです。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#position-props
未だに間違ってるレファレンス本もあるらしいが、信じてはいけない。
rightもbottomもちゃんと仕様で定まったプロパティです。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#position-props
231 ：Name_Not_Found：01/12/04 20:35 ID:73rxXEHC
232 ：Name_Not_Found：01/12/04 20:42 ID:MwdUvkqf
>>231
実用的かどうかはともかく、「right、bottomなんて存在しない」と言い放った229は
どう見ても馬鹿だと思うが。
間違っているのは、君の読解力（と言うか、頭）だよ。
229が何を間違えているのか、230が何を言いたかったのか読み取れないなんてはずかしいよ。
実用的かどうかはともかく、「right、bottomなんて存在しない」と言い放った229は
どう見ても馬鹿だと思うが。
間違っているのは、君の読解力（と言うか、頭）だよ。
229が何を間違えているのか、230が何を言いたかったのか読み取れないなんてはずかしいよ。
とにかくright,bottomは立派に「存在する」し、
少なくとも手持ちのIE5.5やNN6では動作するから
うちのサイトにとっては十分実用的でもあります。
レファレンス本でも、存在するけどこれこれのブラウザでは実装してないと書くべき。
少なくとも手持ちのIE5.5やNN6では動作するから
うちのサイトにとっては十分実用的でもあります。
レファレンス本でも、存在するけどこれこれのブラウザでは実装してないと書くべき。
234 ：Name_Not_Found：01/12/04 21:58 ID:73rxXEHC
>>234
キミは>>233の
>少なくとも手持ちのIE5.5やNN6では動作するから
> うちのサイトにとっては十分実用的でもあります。
と言うのが読めないのかい？ つーか、勝手に一般的とか一般的じゃないとか
決め付けるんじゃないよ、ボケが。
第一、「ブラウザ」ってのは何のことを言ってるんだい？ まさか、
Netscape Navigator 4.xですとか言わないだろうね。
キミは>>233の
>少なくとも手持ちのIE5.5やNN6では動作するから
> うちのサイトにとっては十分実用的でもあります。
と言うのが読めないのかい？ つーか、勝手に一般的とか一般的じゃないとか
決め付けるんじゃないよ、ボケが。
第一、「ブラウザ」ってのは何のことを言ってるんだい？ まさか、
Netscape Navigator 4.xですとか言わないだろうね。
236 ：Name_Not_Found：01/12/04 22:54 ID:73rxXEHC
>>235
もっと勉強しましょうね！
もっと勉強しましょうね！
238 ：Name_Not_Found：01/12/04 23:18 ID:73rxXEHC
>>237
本当に知らないならイタイ
本当に知らないならイタイ
239 ：Name_Not_Found：01/12/04 23:27 ID:IPlA88wB
>>238
一応、top,right.bottom.leftのブラウザ別対応表を出しておく。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#top
問題点があるなら知ったかぶりしてないで具体的に提示し、読者の判断を仰ぎたまへ。
一応、top,right.bottom.leftのブラウザ別対応表を出しておく。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#top
問題点があるなら知ったかぶりしてないで具体的に提示し、読者の判断を仰ぎたまへ。
240 ：Name_Not_Found：01/12/04 23:41 ID:nbjwHFge
何がネタなんだか判らなくなってきた。
241 ：Name_Not_Found：01/12/05 12:28 ID:R6Fg8q6l
>>239
その表が間違っているのが問題だろ。
bottomはIE4.0では対応していません。
プロならまともなリファレンスを読め。
http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
その表が間違っているのが問題だろ。
bottomはIE4.0では対応していません。
プロならまともなリファレンスを読め。
http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
242 ：Name_Not_Found：01/12/05 13:03 ID:WL5hAoKj
>>241
IE4なんかを基準にされて「一般的に存在しません」って断言されてもなあ……。
「（一部のブラウザでは）実装してない」ならともかく、「存在しない」ってのは
どうしたって勇み足だろ。素直に過ちを認めなよ。
IE4なんかを基準にされて「一般的に存在しません」って断言されてもなあ……。
「（一部のブラウザでは）実装してない」ならともかく、「存在しない」ってのは
どうしたって勇み足だろ。素直に過ちを認めなよ。
243 ：Name_Not_Found：01/12/05 15:43 ID:PE0ReF9e
>>242
日本語の読解がんばれ
日本語の読解がんばれ
244 ：Name_Not_Found：01/12/05 15:54 ID:M/Vwbkuh
【IE5.5】
ルビ文字（RT要素）内でタグづけしてあると、通常の横書き時には問題ないが
縱書き（writing-mode:tb-rl;）適用時に前後の行が重なってしまった。
例：
<RUBY><RB>ルビ</RB><RP>(</RP><RT><span class="red">ふりがな</span></RT><RP>)</RP></RUBY>
タグをコメント（<!-- -->）にしても廻避できず。
ルビ文字（RT要素）内でタグづけしてあると、通常の横書き時には問題ないが
縱書き（writing-mode:tb-rl;）適用時に前後の行が重なってしまった。
例：
<RUBY><RB>ルビ</RB><RP>(</RP><RT><span class="red">ふりがな</span></RT><RP>)</RP></RUBY>
タグをコメント（<!-- -->）にしても廻避できず。
245 ：Name_Not_Found：01/12/05 16:00 ID:M/Vwbkuh
246 ：Name_Not_Found：01/12/05 17:01 ID:V2xBxSRv
CSSでカッコよくサイト作った！ヽ( ´∀`)ノ
IE5.5、IE6で見た！ナイス！
NN6.2で見た。・・・悲惨。
・・・・・・。
MacIEで見た。・・・旅に出ます・・・
IE5.5、IE6で見た！ナイス！
NN6.2で見た。・・・悲惨。
・・・・・・。
MacIEで見た。・・・旅に出ます・・・
247 ：Name_Not_Found：01/12/05 17:55 ID:PE0ReF9e
>>245
日本語の分からない245は哀れ
日本語の分からない245は哀れ
>>248
さんくす！
旅に出る前にこのページを参考にしてみます。
部分的にはNNの方が正しい解釈をしていることもあるので、
とりあえず参考程度に入れてみたらすごかったよ・・・（；´Д｀）
テーブル周り・FLOAT周りで大崩れだった。
デフォルト値が違うだけなのか、実装の進み方が違うのかはわかんない。
さんくす！
旅に出る前にこのページを参考にしてみます。
部分的にはNNの方が正しい解釈をしていることもあるので、
とりあえず参考程度に入れてみたらすごかったよ・・・（；´Д｀）
テーブル周り・FLOAT周りで大崩れだった。
デフォルト値が違うだけなのか、実装の進み方が違うのかはわかんない。
250 ：Name_Not_Found：01/12/05 19:47 ID:vM3dj3xy
251 ：Name_Not_Found：01/12/06 19:08 ID:rTS1T8ys
参考にさせていただいた。
center入りのｄｉｖでテーブルを中寄せするのは
ＩＥのバグとはしらなんだ。
ありがと。
center入りのｄｉｖでテーブルを中寄せするのは
ＩＥのバグとはしらなんだ。
ありがと。
252 ：Name_Not_Found：01/12/07 00:34 ID:xYRTWvt7
253 ：Name_Not_Found：01/12/07 03:41 ID:q59oKMs3
254 ：Name_Not_Found：01/12/07 16:03 ID:wQl3vU3j
煽りは無視して、一般論でいこうよ。
255 ：Name_Not_Found：01/12/16 21:00 ID:TLJYAZvZ
【IE6】
確認用HTML(抜粋)
<style type="text/css">
.menu {
background-image: url(menu_back.png);
}
.profile a {
background-image: url(profile.png);
}
.diary a {
background-image: url(diary.png);
}
.menuitem a:hover {
background-image: none;
}
</style>
<ul class="menu">
<li class="menuitem profile"><a href="profile.html">Profile</a></li>
<li class="menuitem diary"><a href="diary.html">Diary</a></li>
</ul>
menu_back.pngにはすでにメニューの文字が書いてある。
profile.png , diary.pngには
menu_back.pngとは別のスタイルでメニューの文字が書いてある。
マウスが通り過ぎる際に画像を変更する手段として、
個別の画像を表示しないようにして
背景画像を表示させるという手段をとったわけです。
結果は、マウスが通過するとまったく別の画像が表示されます。
N6.2、Opera6では正常。
確認用HTML(抜粋)
<style type="text/css">
.menu {
background-image: url(menu_back.png);
}
.profile a {
background-image: url(profile.png);
}
.diary a {
background-image: url(diary.png);
}
.menuitem a:hover {
background-image: none;
}
</style>
<ul class="menu">
<li class="menuitem profile"><a href="profile.html">Profile</a></li>
<li class="menuitem diary"><a href="diary.html">Diary</a></li>
</ul>
menu_back.pngにはすでにメニューの文字が書いてある。
profile.png , diary.pngには
menu_back.pngとは別のスタイルでメニューの文字が書いてある。
マウスが通り過ぎる際に画像を変更する手段として、
個別の画像を表示しないようにして
背景画像を表示させるという手段をとったわけです。
結果は、マウスが通過するとまったく別の画像が表示されます。
N6.2、Opera6では正常。
256 ：Name_Not_Found：01/12/16 21:49 ID:K8FePhuT
>>255
>結果は、マウスが通過するとまったく別の画像が表示されます。
「まったく別の画像」とは？ IE6で実験したが、別に異常ありませんでしたが。
初めはmenu_back.gifの上にprofile.gifとdiary.gifが重なって表示され、
アンカー上をポインターを乗せるとprofile.gifやdiary.gifが消えて
その下のmenu_back.gifが見える。
むしろ変なのはOpera。profile.gifやdiary.gifが初めから全く見えない。
>結果は、マウスが通過するとまったく別の画像が表示されます。
「まったく別の画像」とは？ IE6で実験したが、別に異常ありませんでしたが。
初めはmenu_back.gifの上にprofile.gifとdiary.gifが重なって表示され、
アンカー上をポインターを乗せるとprofile.gifやdiary.gifが消えて
その下のmenu_back.gifが見える。
むしろ変なのはOpera。profile.gifやdiary.gifが初めから全く見えない。
257 ：Name_Not_Found：01/12/18 11:38 ID:oiWzKzYh
リストを入れ子にした場合のスタイル。
ul.mark {list-style-image:url(mark1.gif);}
ul.mark ul {list-style-image:none;}
これで一番外側のリストのマーカーだけが画像になる筈。
IE6とNN6では意図通りになった。
ところが、Opera6ではnoneの指定が効かず、入れ子の中まで画像マーカーがついた。
そこで、いささか邪道だが、
ul.mark {list-style-image:url(mark1.gif);}
ul.mark ul {list-style-image:url("none.gif");}
とする。このnone.gifは存在しないものを指定してあるので、
やはり一番外側だけリストマーカーが画像となる見込み。
今度はOperaでも狙った通りになった。
ところがNN6.2では画像だけでなくマーカーも表示されなくなる。
list-style-imageでなくlist-style-type:noneの状態になってしまったのだ。
結局、一貫して正しく表示してくれたのはIEだけ。
ul.mark {list-style-image:url(mark1.gif);}
ul.mark ul {list-style-image:none;}
これで一番外側のリストのマーカーだけが画像になる筈。
IE6とNN6では意図通りになった。
ところが、Opera6ではnoneの指定が効かず、入れ子の中まで画像マーカーがついた。
そこで、いささか邪道だが、
ul.mark {list-style-image:url(mark1.gif);}
ul.mark ul {list-style-image:url("none.gif");}
とする。このnone.gifは存在しないものを指定してあるので、
やはり一番外側だけリストマーカーが画像となる見込み。
今度はOperaでも狙った通りになった。
ところがNN6.2では画像だけでなくマーカーも表示されなくなる。
list-style-imageでなくlist-style-type:noneの状態になってしまったのだ。
結局、一貫して正しく表示してくれたのはIEだけ。
258 ：Name_Not_Found：01/12/19 13:18 ID:ufJPdzCi
NN6.2英語版
XHTML 1.1で外部CSSと代替CSSを利用した環境において
<style type="text/css">
<![CDATA[
<!--
h1 {color:aqua;}
-->
]]>
</style>
のようにstyle要素を設定しても、反映されない。
[email protected]ってとこから300通くらいスパムが来た。
むかつく。
XHTML 1.1で外部CSSと代替CSSを利用した環境において
<style type="text/css">
<![CDATA[
<!--
h1 {color:aqua;}
-->
]]>
</style>
のようにstyle要素を設定しても、反映されない。
[email protected]ってとこから300通くらいスパムが来た。
むかつく。
259 ：258：01/12/19 13:20 ID:ufJPdzCi
ちなみに
<style>
h1 {color:aqua;}
</style>のように
マークアップすればOK
<style>
h1 {color:aqua;}
</style>のように
マークアップすればOK
260 ：Name_Not_Found：01/12/19 13:22 ID:rFTYF64u
261 ：Name_Not_Found：01/12/19 13:26 ID:rFTYF64u
>>258
バグではなくて厳格なだけでは。以下引用。
「XHTMLの書き方と留意点」
http://www.kanzaki.com/docs/html/xhtml1.html
<style type="text/css">
<!--
p {color:red}
-->
</style>
のように記述していると、その定義は無視されてしまう可能性が高いとされています。
バグではなくて厳格なだけでは。以下引用。
「XHTMLの書き方と留意点」
http://www.kanzaki.com/docs/html/xhtml1.html
<style type="text/css">
<!--
p {color:red}
-->
</style>
のように記述していると、その定義は無視されてしまう可能性が高いとされています。
a:link { text-decoration: none }
a:hover { text-decoration: underline }
a:active { text-decoration: none }
a:visited { text-decoration: none }
にしてあっても、リンクした後（visited)では、下線が表示されっぱなし・・・
な、なぜ？
a:hover { text-decoration: underline }
a:active { text-decoration: none }
a:visited { text-decoration: none }
にしてあっても、リンクした後（visited)では、下線が表示されっぱなし・・・
な、なぜ？
263 ：Name_Not_Found：01/12/19 13:39 ID:rFTYF64u
>>262
それもバグではない。
リンク擬似要素には優先順位がある。
記述の順番を下記の通りにすること。
a:link { }
a:visited { }
a:hover { }
a:active { }
但しOpera6ではその優先順位が変なのだが。
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=245
それもバグではない。
リンク擬似要素には優先順位がある。
記述の順番を下記の通りにすること。
a:link { }
a:visited { }
a:hover { }
a:active { }
但しOpera6ではその優先順位が変なのだが。
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=245
264 ：＞260-261：01/12/19 13:40 ID:ufJPdzCi
違う違う。
確かに、XHTMLではstyle要素の内容は#PCDATAだから
>>261のようにすれば内容はコメントアウトされちゃう。
けど、<![CDATA[～～]]>でマークアップすれば、
その中身はCDATAになるべきだから、
コメントアウトされるのはおかしい。
確かに、XHTMLではstyle要素の内容は#PCDATAだから
>>261のようにすれば内容はコメントアウトされちゃう。
けど、<![CDATA[～～]]>でマークアップすれば、
その中身はCDATAになるべきだから、
コメントアウトされるのはおかしい。
ごめん、間違った。
>>263は「擬似要素」ではなく「擬似クラス」ですね。
>>263は「擬似要素」ではなく「擬似クラス」ですね。
266 ：Name_Not_Found：01/12/19 18:02 ID:PL4ANVnB
ありがとうございます。
なかなかめんどくさいのですね（汗
何でもっと自由・・・（自主規制
なかなかめんどくさいのですね（汗
何でもっと自由・・・（自主規制
268 ：Name_Not_Found：01/12/19 20:08 ID:VHJ5Kvca
>>266
そのために
CDO <!--
CDC -->
が定義されているんですけど……。
http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#tokenization
参照。
そのために
CDO <!--
CDC -->
が定義されているんですけど……。
http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#tokenization
参照。
269 ：Name_Not_Found：01/12/19 20:11 ID:VHJ5Kvca
まぁ、Netscape 6.2なら、わざわざstyle要素を注釈宣言で囲まなくても、
User-AgentのCanvasに表示してしまうことは無いと思うけど。
User-AgentのCanvasに表示してしまうことは無いと思うけど。
270 ：Name_Not_Found：01/12/19 20:51 ID:v9ixxAL6
>>267
その>>262の順番で試したが、WinIE6,NN6.2,NC4.7,Opera6、どれも
「リンクした後（visited)では、下線が表示されっぱなし」にはならない。
あなたのブラウザは何（バージョンも）？
何か他に変なスタイル指定入れてない？
その>>262の順番で試したが、WinIE6,NN6.2,NC4.7,Opera6、どれも
「リンクした後（visited)では、下線が表示されっぱなし」にはならない。
あなたのブラウザは何（バージョンも）？
何か他に変なスタイル指定入れてない？
271 ：Name_Not_Found：01/12/22 00:07 ID:PZIkD2JV
>>258
今のところContent-Typeがtext/htmlだとCDATA区間を認識しないらしい。
http://bugzilla.mozilla.org/show_bug.cgi?id=27403
今のところContent-Typeがtext/htmlだとCDATA区間を認識しないらしい。
http://bugzilla.mozilla.org/show_bug.cgi?id=27403
272 ：Name_Not_Found：01/12/24 20:51 ID:cSe2cgwt
☠ฺ
273 ：Name_Not_Found：01/12/24 21:41 ID:WtOxvadv
ＣＳＳで段組を作るには悩まされますよね。
左右二段、左段の幅のみ一定の段組にする場合でのバグ。
ソースは大略以下の通り。
<div id="navbar">～</div>
<div id="base">
<div class="head">
<h1><img src="logo.gif" alt="title" width="450" height="300"></h1>
<p class="rublic">～前文～</p>
</div>
<div class="main"><p>～～本文～～</div>
</div>
<div id="address">©氏名 <address>アドレス</address></div>
#navbar,#address{height:2.5em; background:black; color:white;}
#base {
position:relative; /*#mainの基準に*/
background:#efefef;
}
#head {
width: 165px;
position: absolute;
left: 3px;
}
#main {
margin-left: 170px;
min-height: 450px; /*#headを#addressに被さらせないために*/
}
NN6.2やOpera6ではこれで問題なし。
これがWinIE5.5～6で確認すると、div#headがなぜか
左端から右に170pxほどズレて、div#mainに重なって表示される。
どうやら#mainのmargin-leftを引き継いでしまってるらしい。
#headへの指定に“width:100%;"を追加するとこのバグは廻避された。
左右二段、左段の幅のみ一定の段組にする場合でのバグ。
ソースは大略以下の通り。
<div id="navbar">～</div>
<div id="base">
<div class="head">
<h1><img src="logo.gif" alt="title" width="450" height="300"></h1>
<p class="rublic">～前文～</p>
</div>
<div class="main"><p>～～本文～～</div>
</div>
<div id="address">©氏名 <address>アドレス</address></div>
#navbar,#address{height:2.5em; background:black; color:white;}
#base {
position:relative; /*#mainの基準に*/
background:#efefef;
}
#head {
width: 165px;
position: absolute;
left: 3px;
}
#main {
margin-left: 170px;
min-height: 450px; /*#headを#addressに被さらせないために*/
}
NN6.2やOpera6ではこれで問題なし。
これがWinIE5.5～6で確認すると、div#headがなぜか
左端から右に170pxほどズレて、div#mainに重なって表示される。
どうやら#mainのmargin-leftを引き継いでしまってるらしい。
#headへの指定に“width:100%;"を追加するとこのバグは廻避された。
ＨＴＭＬソースのclass="head"、class="main"は
正しくはid="head"、id="main"でした。失礼。
正しくはid="head"、id="main"でした。失礼。
【WinIE6】>>273と類似バグですが、width:100%では廻避できないもの。
<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>
.header{
width: 100%;/*IEバグ廻避できず*/
background-color: #f00;
position:relative;
height:2em
}
.header h1{
position: absolute;
width: 80%;
padding:0;margin:0;
}
.header .navi{
margin-left:82%;
width:17%;
background-color: #0f0;
}
バグ廻避には .header h1{left:0;} が必要。
しかしleft:0;初期値なんだから、指定しなきゃいけないのも変な話。
IEの計算はどうなってるんだ？
<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>
.header{
width: 100%;/*IEバグ廻避できず*/
background-color: #f00;
position:relative;
height:2em
}
.header h1{
position: absolute;
width: 80%;
padding:0;margin:0;
}
.header .navi{
margin-left:82%;
width:17%;
background-color: #0f0;
}
バグ廻避には .header h1{left:0;} が必要。
しかしleft:0;初期値なんだから、指定しなきゃいけないのも変な話。
IEの計算はどうなってるんだ？
276 ：Name_Not_Found：01/12/31 01:05 ID:y/BQKu+O
ユーザーサイドクリッカブルマップで
<area ～（省略）～ style="cursor:e-resize;">[画像]</area>
としてもカーソルが変わりません。
間違ってるのかと思って<map>にも指定したのですが…。
IE5.5とN6.2で試したのです。
（Operaはもともとcursorに対応してないですよね？）
これはバグですか？
それともタグ間違ってますか？
<area ～（省略）～ style="cursor:e-resize;">[画像]</area>
としてもカーソルが変わりません。
間違ってるのかと思って<map>にも指定したのですが…。
IE5.5とN6.2で試したのです。
（Operaはもともとcursorに対応してないですよね？）
これはバグですか？
それともタグ間違ってますか？
277 ：Name_Not_Found：02/01/02 01:02 ID:Mh3aE+zN
>>276
そもそも、空要素のareaをなぜ閉じてるのかが意味不明。
CSS云々よりまずHTMLからですな。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#h-13.6.1
そもそも、空要素のareaをなぜ閉じてるのかが意味不明。
CSS云々よりまずHTMLからですな。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#h-13.6.1
278 ：Name_Not_Found：02/01/05 04:20 ID:fdoBuYB/
http://pc.2ch.net/test/read.cgi/hp/1005047493/759
http://pc.2ch.net/test/read.cgi/hp/1005047493/776-782
http://pc.2ch.net/test/read.cgi/hp/1005047493/776-782
279 ：Name_Not_Found：02/01/11 02:02 ID:EisS/Knr
こんな例があります。
body{
background-image:url(test.gif);
background-repeat:no-repeat;
background-position:600px top;
}
<body>
<h1>見出し</h1>
<div>
短い文章
</div>
</body>
これで、ブラウザのウィンドウ幅を600px以下で視ると背景画像は現れず、
600px以上にして閲覧された場合のみ背景画像が表示されるはずです。
ところが、WinIE6やOpera6及びMacIE5では意図通りになりますが、
NN6ではウィンドウ幅に拘らず、背景画像は現れません。
バグですよね？
body{
background-image:url(test.gif);
background-repeat:no-repeat;
background-position:600px top;
}
<body>
<h1>見出し</h1>
<div>
短い文章
</div>
</body>
これで、ブラウザのウィンドウ幅を600px以下で視ると背景画像は現れず、
600px以上にして閲覧された場合のみ背景画像が表示されるはずです。
ところが、WinIE6やOpera6及びMacIE5では意図通りになりますが、
NN6ではウィンドウ幅に拘らず、背景画像は現れません。
バグですよね？
http://pc.2ch.net/test/read.cgi/hp/1005047493/855-856
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position
＞ 'background-position'
＞ Value: [ [<percentage> | <length> ] {1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
仕様ではlength（pxやem等）とtop等を混ぜて使ってはダメ。
よってNetscape6の動作は正しいと思われ。
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position
＞ 'background-position'
＞ Value: [ [<percentage> | <length> ] {1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
仕様ではlength（pxやem等）とtop等を混ぜて使ってはダメ。
よってNetscape6の動作は正しいと思われ。
281 ：Name_Not_Found：02/01/11 06:38 ID:N5GnJWW/
こちらのサイトを例に。
http://dai.pekori.to/opera/
これをIE6で見ると、
タブ状のナビゲーション・リンク、即ちdiv#navi内のspanやa要素に対して
指定されてあるborderのtopだけなぜか表示されてない。
同じく一括指定されたpaddingのうちtopのみ効いてない。
NN6.2やOperaではそんなことはないから、WinIEのバグだと推定されます。
しかしソースをダウンロードしてみたものの、これを再現させる条件がわからない。
原因の特定できる方、いらっしゃいますか。
http://dai.pekori.to/opera/
これをIE6で見ると、
タブ状のナビゲーション・リンク、即ちdiv#navi内のspanやa要素に対して
指定されてあるborderのtopだけなぜか表示されてない。
同じく一括指定されたpaddingのうちtopのみ効いてない。
NN6.2やOperaではそんなことはないから、WinIEのバグだと推定されます。
しかしソースをダウンロードしてみたものの、これを再現させる条件がわからない。
原因の特定できる方、いらっしゃいますか。
因みに、關係部分のソースは以下の通り。
div#navi {
display: block;
position: absolute;
top: 70px; left: 160px;
z-index: 10;
width: 600px;
height: 4em;
margin: 0px;
padding: 0px;
line-height: 100% ! important;
}
div#navi a {
display: inline;
text-align: center;
text-decoration: none;
color: #000;
background-color: #ccc;
border-width: 5px 1px 5px 1px;
border-style: solid;
border-color: red;
padding: 1px 10px 5px 10px;
margin: 1px 5px;
}
div#navi span {
color: white;
font-weight: bold;
background-color: rgb(128,128,128);
text-align: center;
border-width: 1px 1px 5px 1px ;
border-style: solid solid double solid;
border-color: rgb(128,128,128) rgb(128,128,128) rgb(255,255,255) rgb(128,128,128);
padding: 10px 20px 5px 20px;
margin: 0px 5px 0px 5px;
}
<DIV id="navi">
<SPAN>Index</SPAN> <A
href="http://dai.pekori.to/opera/preferences/index.html">Opera</A> <A
href="http://dai.pekori.to/opera/tips/index.html">Tips</A> <A
href="http://dai.pekori.to/opera/faq/index.html">Faq</A> <A
href="http://dai.pekori.to/opera/bugs/index.html">Bugs</A> <A
href="http://dai.pekori.to/opera/links.html">links</A> <A
href="http://dai.pekori.to/opera/others.html">others</A></p>
</DIV>
div#navi {
display: block;
position: absolute;
top: 70px; left: 160px;
z-index: 10;
width: 600px;
height: 4em;
margin: 0px;
padding: 0px;
line-height: 100% ! important;
}
div#navi a {
display: inline;
text-align: center;
text-decoration: none;
color: #000;
background-color: #ccc;
border-width: 5px 1px 5px 1px;
border-style: solid;
border-color: red;
padding: 1px 10px 5px 10px;
margin: 1px 5px;
}
div#navi span {
color: white;
font-weight: bold;
background-color: rgb(128,128,128);
text-align: center;
border-width: 1px 1px 5px 1px ;
border-style: solid solid double solid;
border-color: rgb(128,128,128) rgb(128,128,128) rgb(255,255,255) rgb(128,128,128);
padding: 10px 20px 5px 20px;
margin: 0px 5px 0px 5px;
}
<DIV id="navi">
<SPAN>Index</SPAN> <A
href="http://dai.pekori.to/opera/preferences/index.html">Opera</A> <A
href="http://dai.pekori.to/opera/tips/index.html">Tips</A> <A
href="http://dai.pekori.to/opera/faq/index.html">Faq</A> <A
href="http://dai.pekori.to/opera/bugs/index.html">Bugs</A> <A
href="http://dai.pekori.to/opera/links.html">links</A> <A
href="http://dai.pekori.to/opera/others.html">others</A></p>
</DIV>
283 ：Name_Not_Found：02/01/11 13:32 ID:93n8VRdv
>>281
> 指定されてあるborderのtopだけなぜか表示されてない。
> 同じく一括指定されたpaddingのうちtopのみ効いてない。
のではなくて、span と a のボックス上部が #navi のボックスからはみ出していて
その部分が非表示になっている。
#navi に border つけて表示してみると
ボックスの配置が判りやすいだろうと思う。
position:absolute またはボックスのサイズ指定をするとこの現象が発生するようだ。
バグかどうかは判らん…
> 指定されてあるborderのtopだけなぜか表示されてない。
> 同じく一括指定されたpaddingのうちtopのみ効いてない。
のではなくて、span と a のボックス上部が #navi のボックスからはみ出していて
その部分が非表示になっている。
#navi に border つけて表示してみると
ボックスの配置が判りやすいだろうと思う。
position:absolute またはボックスのサイズ指定をするとこの現象が発生するようだ。
バグかどうかは判らん…
284 ：Name_Not_Found：02/01/11 13:44 ID:g81zZK/2
>>283
>position:absolute またはボックスのサイズ指定をするとこの現象が発生するようだ。
いや、ボックスdiv#naviへのスタイル指定を全てコメントアウトしても
やはりdiv#navi内のspan と a のボックス上部がちょんぎれますよ。
対処策としては、
div#navi a, div#navi span {position:relative;}を追加指定すると、
はみ出た分も表示されます――なぜかはわかりませんが。バグでしょ。
IE5.5以下ではどうなのかな。
>position:absolute またはボックスのサイズ指定をするとこの現象が発生するようだ。
いや、ボックスdiv#naviへのスタイル指定を全てコメントアウトしても
やはりdiv#navi内のspan と a のボックス上部がちょんぎれますよ。
対処策としては、
div#navi a, div#navi span {position:relative;}を追加指定すると、
はみ出た分も表示されます――なぜかはわかりませんが。バグでしょ。
IE5.5以下ではどうなのかな。
ごめん、>>286の名前欄は「284」の誤記でした。
288 ：Name_Not_Found：02/01/12 16:11 ID:Wrh8/LAm
>>281-287
より単純化したモデルで試験してみた。
div.A{ }
.A span {
padding:10px 5px;
border:2px solid red;
margin:10px 5px;
}
<div class="A">
<span>111</span><span>222</span>
</div>
これをWinIE6で表示させると、border、padding、margin、いづれもtopが無効。
.A span{position:relative;}を追加するとちょん切れて見えなかった上部が現れる。
div.A{border:1px solid blue}を指定すると、spanのボックスは上部だけでなく
下部もdiv.Aからはみ出てるのがわかる。
position:relative;
より単純化したモデルで試験してみた。
div.A{ }
.A span {
padding:10px 5px;
border:2px solid red;
margin:10px 5px;
}
<div class="A">
<span>111</span><span>222</span>
</div>
これをWinIE6で表示させると、border、padding、margin、いづれもtopが無効。
.A span{position:relative;}を追加するとちょん切れて見えなかった上部が現れる。
div.A{border:1px solid blue}を指定すると、spanのボックスは上部だけでなく
下部もdiv.Aからはみ出てるのがわかる。
position:relative;
>>288
追記。
ソースを改変し、上下を水平線で挾んでみた。
<hr>
<div class="A">
<span>111</span><span>222</span>
</div>
<hr>
すると、position:relative;抜きでも、全く問題無く指定通りの表示となった。
>>284と>>285の齟齬はこれに類似する、前後のソースの異同によるものではないか。
ちなみにこのHTMLソースで、div.Aに対してposition:absoluteまたは
ボックスのサイズ指定（width or height）をすると、症状は再発した。
追記。
ソースを改変し、上下を水平線で挾んでみた。
<hr>
<div class="A">
<span>111</span><span>222</span>
</div>
<hr>
すると、position:relative;抜きでも、全く問題無く指定通りの表示となった。
>>284と>>285の齟齬はこれに類似する、前後のソースの異同によるものではないか。
ちなみにこのHTMLソースで、div.Aに対してposition:absoluteまたは
ボックスのサイズ指定（width or height）をすると、症状は再発した。
>>288ｰ289
どうも、 288 のソースを互換モードで表示すると問題が起こらない。
標準モードにすると「ちょん切れ」が出るようだ。
互換モードでも 289 の下２行の条件が加わると問題が出る。
で、この「はみ出たりちょん切れたり挙動が一定しない」のはまあ
バグと言っていいのかなーと思うのだが、
仕様的にどうなのかがよくわからん。
インライン要素の padding や border のはみだしの扱いってどうなってるの？
どうも、 288 のソースを互換モードで表示すると問題が起こらない。
標準モードにすると「ちょん切れ」が出るようだ。
互換モードでも 289 の下２行の条件が加わると問題が出る。
で、この「はみ出たりちょん切れたり挙動が一定しない」のはまあ
バグと言っていいのかなーと思うのだが、
仕様的にどうなのかがよくわからん。
インライン要素の padding や border のはみだしの扱いってどうなってるの？
>>288-289 間違えた…utudasinou
292 ：Name_Not_Found：02/01/12 19:31 ID:n33ScOCg
293 ：Name_Not_Found：02/01/12 19:42 ID:OQYd4pSB
>>292
> はみ出すのはNN6もOpera6も一緒。だから仕様通りではないか。
…そ、そんなんでいいの？
や、俺もしかしてその辺の定義が仕様になくて
挙動として一方が誤りと言い切れないとかあるんじゃないかと思ったんだ。
> はみ出すのはNN6もOpera6も一緒。だから仕様通りではないか。
…そ、そんなんでいいの？
や、俺もしかしてその辺の定義が仕様になくて
挙動として一方が誤りと言い切れないとかあるんじゃないかと思ったんだ。
294 ：Name_Not_Found：02/01/14 00:57 ID:S1RrxLaw
つづけて>>288に類似したソースでのＩＥ６のバグ。
なぜかwhite-space: nowrap;の所為でボックスが消え去る。ソースは以下の通り。
<html>
<head>
<title>test</title>
<STYLE type="text/css"><!--
.A{
margin:0px; padding:0px;
white-space: nowrap;
}
.A span{
padding: 1px 10px;
border:3px solid red;
margin:0px;
background:#ccc;
}
body {
margin-left: 0px;
font-size: 15px;
font-family: "ＭＳ 明朝";
}
// --></STYLE>
<script type="text/javascript"><!--
if (window == window.top) { window.resizeTo(600,400);}
//--></script>
</head>
<body>
<div class="A">
<span>1</span>
<span>22</span>
<span>333</span>
<span>4444</span>
<span>55555</span>
<span>666666</span>
<span>7777777</span>
<span>88888888</span>
</div>
</body></html>
これでWinIE6で表示させると、div.A内のspan要素が消え去って、全く表示されない。
但し窓幅600pxの場合のみ。窓幅を狭めたり拡げたりするとちゃんと消えないで現れる。
JavaScriptでウインドウサイズを指定してあるのはこのため。
また、spanのテクストを一字でも増減すると、消え去る時の窓幅の条件も変化する。
bodyの左右マージンやfont-sizeやfont-familyによっても異なってくる。
とにかく、ウィンドウの幅が或る一定の範囲に来ると、
white-space: nowrap;を指定したdivの子要素であるspanが消失する。
IE5.5以前ではどうなるかは未確認。
なぜかwhite-space: nowrap;の所為でボックスが消え去る。ソースは以下の通り。
<html>
<head>
<title>test</title>
<STYLE type="text/css"><!--
.A{
margin:0px; padding:0px;
white-space: nowrap;
}
.A span{
padding: 1px 10px;
border:3px solid red;
margin:0px;
background:#ccc;
}
body {
margin-left: 0px;
font-size: 15px;
font-family: "ＭＳ 明朝";
}
// --></STYLE>
<script type="text/javascript"><!--
if (window == window.top) { window.resizeTo(600,400);}
//--></script>
</head>
<body>
<div class="A">
<span>1</span>
<span>22</span>
<span>333</span>
<span>4444</span>
<span>55555</span>
<span>666666</span>
<span>7777777</span>
<span>88888888</span>
</div>
</body></html>
これでWinIE6で表示させると、div.A内のspan要素が消え去って、全く表示されない。
但し窓幅600pxの場合のみ。窓幅を狭めたり拡げたりするとちゃんと消えないで現れる。
JavaScriptでウインドウサイズを指定してあるのはこのため。
また、spanのテクストを一字でも増減すると、消え去る時の窓幅の条件も変化する。
bodyの左右マージンやfont-sizeやfont-familyによっても異なってくる。
とにかく、ウィンドウの幅が或る一定の範囲に来ると、
white-space: nowrap;を指定したdivの子要素であるspanが消失する。
IE5.5以前ではどうなるかは未確認。
猶、>>294のソースからwhite-space: nowrap;を削ると問題は生じなくなる。
また、
<div class="A">
<span>1</span>
<span>22</span>
<span>333</span>
<span>4444</span>
<span>55555</span>
<span>666666</span>
<span>7777777</span>
<span>88888888</span>
</div>
を
<div class="A">
<span>1</span><span>22</span><span>333</span><span>4444</span>
<span>55555</span><span>666666</span><span>7777777</span><span>88888888</span>
</div>
と改行せずに書くと、やはり消失するウインドウ幅が変動する。
また、
<div class="A">
<span>1</span>
<span>22</span>
<span>333</span>
<span>4444</span>
<span>55555</span>
<span>666666</span>
<span>7777777</span>
<span>88888888</span>
</div>
を
<div class="A">
<span>1</span><span>22</span><span>333</span><span>4444</span>
<span>55555</span><span>666666</span><span>7777777</span><span>88888888</span>
</div>
と改行せずに書くと、やはり消失するウインドウ幅が変動する。
296 ：備忘録：02/01/14 19:23 ID:iPYzBieu
CSS2対応状況ガイド
http://www.zspc.com/documents/css2/index.html
ブラウザごとのHTML/CSSバグ？
http://dfj.cool.ne.jp/html/html_css_bug.html
IE3,IE4,NN4でのCSSのバグと回避方法
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html
Netscape4.xスタイルシートの既知の問題
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html
Netscape Communicator 4.7x が強制終了してしまうCSS
http://www.aynimac.com/bibouroku/nc47crash.html
スタイルシート使用者のためのNetscape Navigator 4.0x対策案
http://www.remus.dti.ne.jp/~takahisa/flm/OWTXML/NN40x.html
Mozilla（≒NN6）
http://bugzilla.mozilla.gr.jp/
Opera 6.0
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=235
http://www6.plala.or.jp/s-meteo/hime/index9.html
MacIEバグの報告多し
http://www.remus.dti.ne.jp/~a-satomi/nikki/
iCab Pre2.5 の CSS1 実装状況
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/iCab2.5_CSStest.html
http://www.gld.mmtr.or.jp/~tanico/iCabAce.shtml
バグ・未実装を利用した振り分けについて
http://east.portland.ne.jp/~sigekazu/css/boxm.htm
http://www.zspc.com/documents/css2/index.html
ブラウザごとのHTML/CSSバグ？
http://dfj.cool.ne.jp/html/html_css_bug.html
IE3,IE4,NN4でのCSSのバグと回避方法
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html
Netscape4.xスタイルシートの既知の問題
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html
Netscape Communicator 4.7x が強制終了してしまうCSS
http://www.aynimac.com/bibouroku/nc47crash.html
スタイルシート使用者のためのNetscape Navigator 4.0x対策案
http://www.remus.dti.ne.jp/~takahisa/flm/OWTXML/NN40x.html
Mozilla（≒NN6）
http://bugzilla.mozilla.gr.jp/
Opera 6.0
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=235
http://www6.plala.or.jp/s-meteo/hime/index9.html
MacIEバグの報告多し
http://www.remus.dti.ne.jp/~a-satomi/nikki/
iCab Pre2.5 の CSS1 実装状況
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/iCab2.5_CSStest.html
http://www.gld.mmtr.or.jp/~tanico/iCabAce.shtml
バグ・未実装を利用した振り分けについて
http://east.portland.ne.jp/~sigekazu/css/boxm.htm
297 ：Name_Not_Found：02/01/17 08:45 ID:RYFLclU0
「/*CSS、スタイルシート質問スレッド【5】 */ 」より
http://pc.2ch.net/test/read.cgi/hp/1005047493/898
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>
……以下略……
「謹賀新年」の四文字が縦書きで画面の背景文字として表示される。
しかしWinIE6で「表示－文字のサイズ」を「小」以下にして閲覧すると、
画面上部の要素（このdivに続く部分）が表示されなくなる。
NN6やOperaでは問題無し。
WinIEではemの基準が異なるのか？
http://pc.2ch.net/test/read.cgi/hp/1005047493/898
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>
……以下略……
「謹賀新年」の四文字が縦書きで画面の背景文字として表示される。
しかしWinIE6で「表示－文字のサイズ」を「小」以下にして閲覧すると、
画面上部の要素（このdivに続く部分）が表示されなくなる。
NN6やOperaでは問題無し。
WinIEではemの基準が異なるのか？
298 ：Name_Not_Found：02/01/17 14:57 ID:2QAW1FKR
IEでフォントサイズ変えるとem指定した部分全てに影響する。
常にその時のフォントサイズを基準にしてるんだと。
width: ○em;
とか
top: ○em;
とかやる場合、IEのほうが賢く感じる。
N6等だと、要素からテキストがはみ出たり、重なったりして鬱。
>>297
それはCSSの使い方に問題があると思われ。
マイナスマージンで重ね合わせてるんでしょ？
position: absolute;するべき。
もう終わったみたいだけど。
常にその時のフォントサイズを基準にしてるんだと。
width: ○em;
とか
top: ○em;
とかやる場合、IEのほうが賢く感じる。
N6等だと、要素からテキストがはみ出たり、重なったりして鬱。
>>297
それはCSSの使い方に問題があると思われ。
マイナスマージンで重ね合わせてるんでしょ？
position: absolute;するべき。
もう終わったみたいだけど。
299 ：Name_Not_Found：02/01/18 03:58 ID:jl+TllFs
>>298
「IEのほうが賢く感じる」てのは同感なのですが、にも拘らず、>>297の例で
WinIEだと表示が変になるのはやはり問題です。
>マイナスマージンで重ね合わせてるんでしょ？
>position: absolute;するべき。
これもおっしゃる通りですが、同じ効果ならどの手段でそれをなすかは自由に選択できるべきで、
NN6やOperaがちゃんと表示してるのにWinIEだとうまくゆかないのはバグとして修正されるのが望ましい。
「IEのほうが賢く感じる」てのは同感なのですが、にも拘らず、>>297の例で
WinIEだと表示が変になるのはやはり問題です。
>マイナスマージンで重ね合わせてるんでしょ？
>position: absolute;するべき。
これもおっしゃる通りですが、同じ効果ならどの手段でそれをなすかは自由に選択できるべきで、
NN6やOperaがちゃんと表示してるのにWinIEだとうまくゆかないのはバグとして修正されるのが望ましい。
300 ：Name_Not_Found：02/01/18 15:15 ID:/uV7joPS
何度か出てたような気もするけど
Opera 6.0 (6.01βも含む) Win版で確認
overflow : auto が overflow : visible と解釈される。
overflow : scroll が overflow : hidden と解釈される。
但し、body要素は overflow : auto で固定(これは正しく解釈される)。
Opera 6.0 (6.01βも含む) Win版で確認
overflow : auto が overflow : visible と解釈される。
overflow : scroll が overflow : hidden と解釈される。
但し、body要素は overflow : auto で固定(これは正しく解釈される)。