CSS/DHTMLバグ辞典スレッド ver2.0
- 1 名前：Name_Not_Found ：2001/06/04(月) 23:54
前スレが志半ばにして逝ってしまわれたので立て直します。
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
- 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
だそうです。間違ってたらごめんなさい。
- 4 名前：Name_Not_Found ：2001/06/05(火) 00:58
- 【NN6】
<li>をポジショニングしたらリストマークが消えたんだけど、これってバグかな
- 5 名前：Name_Not_Found ：2001/06/05(火) 08:00
- >>3
どこがバグ？
- 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>
- 7 名前：Name_Not_Found ：2001/06/05(火) 13:09
- 【NN6】
<body>でtextの色を指定しないと、その直前の表示色が引き継がれる。
バグか仕様かはわかんないけど、
CSSでbody{color: black; background-color: white;}なんて定義してて
スタイルシートをオフにするとページが真っ白になる。
- 8 名前：7 ：2001/06/05(火) 13:11
- 逆だ。
body{color: white; background-color: black;}
- 9 名前：3 ：2001/06/05(火) 13:12
- >>5
いや、モードが変わるとCSSの解釈も変わるので、
一応参考にと思って書いてみたのですが……スレ違いでしたね、すみません。
- 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 に関係ありそうなところはこのへんか。
- 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って恐くてつかえないヨ。
- 14 名前：Name_Not_Found ：2001/06/07(木) 23:14
- >>13 float で inline とはこれいかに？
- 15 名前：Name_Not_Found ：2001/06/07(木) 23:44
- >>14
ゴメンナサイ。
display:inline は無視してください。
バグと回避策は同じでしたので。
- 16 名前：Name_Not_Found ：2001/06/12(火) 02:37
- 上げる
- 17 名前：Name_Not_Found ：2001/06/15(金) 22:23
- list-style-type:none;
が効かないような…＞Mozilla
- 18 名前：Name_Not_Found ：2001/06/15(金) 22:45
- >>17
> list-style-type:none;
> が効かないような…＞Mozilla
うちも条件はわかんなかったけど、効かなくなったことある。
どっかと宣言が衝突してるのかと思って
ulだけ別シートに分離したら効いた。わけわからん。
- 19 名前：17 ：2001/06/15(金) 23:20
- >>18
そうか、効く場合と効かない場合があるのか。
ちょっと書き方変えたらMozillaでもうまく消えてくれるかなー…
- 20 名前：Name_Not_Found ：2001/06/16(土) 00:05
- >>17
漏れは普通に消えたゾー。
めげずに再現性を突き止めるのだー（ｎ
- 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的にどちらが正しいのかは不明。
- 22 名前：Name_Not_Found ：2001/06/16(土) 01:58
- >>21
それってテーブル回りだけの現象？
- 23 名前：Name_Not_Found ：2001/06/16(土) 02:02
- >>22
そこまで検証していないっす。
子孫セレクタ全般の現象という可能性もあるわけやね。
- 24 名前：Name_Not_Found ：2001/06/18(月) 05:33
- 報告きぼんぬ
- 25 名前：Name_Not_Found ：2001/06/18(月) 06:01
- 【N6】
overflow: auto; でページ内リンクが効かなくなるぞ
- 26 名前：17 ：2001/06/21(木) 17:02
- list-style: 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%; }
とするのが正しい訳ですね。
自分はこれで一番悩まされてます。
- 29 名前：Name_Not_Found ：2001/07/04(水) 07:56
- >>28
おお、１さんから直々に！
そうだったんですか。IEの方を信じていました。
すばやくレスいただけて良かったです。ありがとうございました！
- 30 名前：Name_Not_Found ：2001/07/04(水) 08:03
- >>27-28
ttp://www.cc-net.or.jp/~piro/tips/page/p0031.html
これですね。
- 31 名前：Name_Not_Found ：2001/07/04(水) 09:50
- >>21
あの～、少なくともHTML4.01では<tr>は省略不可能だと思うヨ。
>>17
ちなみに26ブラウザは？
- 32 名前：27 ：2001/07/05(木) 00:53
- >>30
ありがとうございます。box-sizingってたまに目にしてたけど何だろう？と
思ってたんですが、勉強になりました。
- 33 名前：Name_Not_Found ：2001/07/05(木) 12:53
- box-sizing: boeder-boxってcontent+paddingなの？
IEだとborderまで含んでるような気がする（content+padding+border）んだけど、気のせいかな。。。
- 34 名前：Name_Not_Found ：2001/07/05(木) 13:22
- >>33
IEのバージョンは?
- 35 名前：Name_Not_Found ：2001/07/05(木) 13:23
- >>33
ボーダーを100pxくらいにしてみれば判るんじゃ？
- 36 名前：Name_Not_Found ：2001/07/05(木) 13:26
- 誰か暇な方このスレッドで完璧に証明されてる
バグをまとめて下さらないかしら。うふ♪
- 37 名前：Name_Not_Found ：2001/07/07(土) 02:45
- >>33
border-boxはその名の通りborderも含めて計算されるからそれで正しいよ。
35の言うようにmozillaでborder太くして試してみたら？
- 38 名前：33 ：2001/07/09(月) 00:46
- >>34-35,>>37
おぉ、ありがとうございます。borderを太くして試してみたところ、
確かにcontent+padding+borderになってました。
いや、>>30氏が紹介してたサイトにcontent+paddingだと書いてあったので、
ちょっと気になって書き込んだ次第です。ありがとうございました！
- 39 名前：Name_Not_Found ：2001/07/09(月) 01:43
- >>31
HTML4.01の仕様書ではTRのEndTagはOptionalとなっていますが何か？
- 40 名前：Name_Not_Found ：2001/07/09(月) 02:41
- >>39
</tr>は省略できても<tr>は省略できないだろ?
- 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には影響ないみたいだけど。
- 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等は継承される。
- 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
と表示される。
- 49 名前：Name_Not_Found ：2001/08/08(水) 17:23
- IE5.01sp2で確認。近いところでも起こるかも。
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', *** ) なんてやってみると
その要素に *** クラスのスタイルが効いてしまったりなんかする。
…なんだかなぁ。
- 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
- 53 名前：Name_Not_Found ：01/09/13 18:26 ID:lcgFyJfk
- >>52
それは IE5と比べて言ってませんか？
ダメダメなのはIE5の方で、W3C 的にはIE6の方が正しいはず。
- 54 名前：Name_Not_Found ：01/09/13 18:32 ID:J5vHuUmY
- >>53
いえ、そのStrictモードがまだ枯れていないのです。
Mozillaとも比較してます。
- 55 名前：Name_Not_Found ：01/09/13 21:15 ID:2Etq8K.M
- border-boxプロパティに対応してないってのはどういうことだｺﾞﾙｧ(ﾟДﾟ)＞IE6！！
まぁ、取り敢えず
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プロパティに対応してないってのが……鬱。
- 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>
- 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; しか反映されない。
属性セレクタ、子セレクタ、隣接セレクタ、言語セレクタでこの現象を確認しました。
- 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 サポートについては何も言及していない。
- 60 名前：Name_Not_Found ：01/09/16 09:19 ID:VJ8UHLZk
- >>59
つうかとっとと対応しろと言うか。
MacOS版のIEは子セレクタ対応してるのに……。
- 61 名前：Name_Not_Found ：01/09/16 09:34 ID:4vlk39N6
- >>60 このご時世に対応できてないところ見ると、
対応には Netscape 並みの大手術が必要なのかもね。
- 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
- >>62
今時そんな腐れブラウザ使ってんじゃねえｺﾞﾙｧ(ﾟДﾟ)!!と言うのはどう（誰に？）。
- 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では修正されてるといいんですけど。
- 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だけ変になる。
もし既出のバグでしたらごめんなさい。
- 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への指定は効かないのか（泣）。
- 68 名前：65 ：01/09/17 15:58 ID:gBBO1jIQ
- 過去ログに関連投稿がありましたね。
http://mentai.2ch.net/hp/kako/987/987003410.html
↑の23参照。
- 69 名前：Name_Not_Found ：01/09/17 16:09 ID:Rfgti80s
- >>67
その HTML の LI に border-top を指定すると、リストマークが消えるね。
- 70 名前：Name_Not_Found ：01/09/17 16:26 ID:oDYBCT.E
- リストとかblockquoteとか、デフォルトでインデントしてある要素は
バグが出る感じですね、ＩＥは。6.0での修正に（淡く）期待。
- 71 名前：Name_Not_Found ：01/09/17 20:13 ID:2ivkWEYc
- ＩＥ5.5で縱書きプロパティーを使ってみたら
なぜか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＜／ＬＩ＞
個人的に「リスト１」を何度も出すのはうざいとおもう。
- 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参照）
これはやはりＣＳＳ実装のバグかと。
- 76 名前： ：01/09/17 21:14 ID:b.Ns1wOk
- >67
IE5.5 SP2 (Win) では inline にすると頭のリストマークが消えて上に上がるよ．
いずれにしても望む動作じゃないだろうけど．
きわめて邪道な方法として li dl{margin-top:-1em} とすれば望むように見えるようになる．
（Moz 0.9.4 でもほぼ同じ見え方）
- 77 名前：67 ：01/09/17 21:27 ID:Jsy1jZpA
- >>76
<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｝と同じ効果があるらしい。謎だ。
- 79 名前：Name_Not_Found ：01/09/18 18:27 ID:OHsUWNI6
- >>78
関係ない語（使用に無い語）は全て黒になるんじゃない？
- 80 名前：Name_Not_Found ：01/09/18 23:25 ID:lyU9yjpA
- >>78 >>79
解析不能な値については宣言ごと無視するするべきってこと考えると
やっぱバグというか、仕様にない挙動なんだろうね、それ。
- 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
- 83 名前：Name_Not_Found ：01/09/24 10:04 ID:ZjPXe/2E
- 行頭が左にはみ出てゆく。
>>65,>>68と同じバグかと。↓
http://www32.tok2.com/home/css/clip/css/99.html
「* CSS { イケてるスタイルを："作れ";} 」より
（http://natto.2ch.net/test/read.cgi?bbs=hp&key=991906104）
- 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-等幅"って入れてるからさ（どんな風に見えるのかは知らんが）。
- 85 名前：Name_Not_Found ：01/09/25 16:35 ID:bfyhfauA
- >>84
Win IE5.5 ですが、どの辺がガタガタなのやら？
>>マック使ってる人
気にすんな。
- 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の扱いがおかしい。
- 87 名前：86 ：01/09/25 16:50 ID:n.TGXq2.
- あ、特に上掲ページのサンプル5-2だね、この場合。
- 88 名前：Name_Not_Found ：01/09/25 17:04 ID:1.a2A8JI
- 85 じゃないけど，どれもがたがたには見えない．
IE というよりは OS によるのでは？うちは 2000（IE は 6 だけど）．
＃もっとも，「がたがた」という言葉の感じ方の違いかもしれないけど
- 89 名前：86 ：01/09/25 17:10 ID:n.TGXq2.
- >>88
すみません、サンプル５-２を文字の大きさ最大にして見ていただけますか。
他の日本語表示テスト（サンプル3-3、サンプル４）と明らかに字の太さが異なり、
別のフォントになってるんですよ――私の場合は。
ちなみに98SEにＩＥ5.5ですが。
- 90 名前：88 ：01/09/25 17:45 ID:1.a2A8JI
- あ，英語フォントね…納得．日本語しか見てなかった．
つーことで，やっぱ OS でなくて IE の問題か．
- 91 名前：86 ：01/09/25 17:51 ID:6/WDOapM
- >>90
>あ，英語フォントね…納得．
いえ、サンプル中の「日本語表示テスト」って文字（日本語フォント）に
適用されるフォントの話なんですけど。
それとも、sans-serifだと日本語部分にも「英語フォント」（欧文用フォント）が適用されるってことですか。
- 92 名前：Name_Not_Found ：01/09/25 17:56 ID:bfyhfauA
- >>89
このスタイル指定だったら、
5-2 と 3-3 や 4 のフォントが違っていても
特に何の問題もないと思うのだが。
- 93 名前：Name_Not_Found ：01/09/25 18:06 ID:SAcuNAOo
- >>92
いや、指定がsans-serifだったらＭＳＩＥの場合、欧文はさておき日本語の部分は
"ＭＳ Ｐゴシック""ＭＳゴシック"か"MS UI Gothic"で表示されるはずでは？
それ以外のフォントで表示されてるとしたら、それは何か変でしょ。
- 94 名前：88 ：01/09/25 18:12 ID:1.a2A8JI
- >91
なんだ違うのか…．じゃあやっぱりがたがたには見えない．文字サイズ最大でも．
>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文書の方で言語を指定すれば、文字化けしにくくなったが、完全に回避することは出来なかった。）」
とのこと。
- 97 名前：86 ：01/09/25 18:46 ID:/IlbdY26
- >>95 ……ですよね、やっぱり。
（>>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}
を指定してもセンタリングされない見たいなんですが、これって
やっぱバグ？
- 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
- 100 名前：88 ：01/09/25 18:57 ID:1.a2A8JI
- >97
うーん，否定したつもりはない（事実を書いただけ）けどそうとられたならごめん．
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 より
- 103 名前：Name_Not_Found ：01/09/25 20:12 ID:bfyhfauA
- >>93
sans-serif を指定した場合の表示フォントは、既定値はOSによってあるいは、
個人の設定/環境によって異なります。
ちなみに私の場合、sans-serif も serif も MS明朝ですが。
- 104 名前：Name_Not_Found ：01/09/25 20:53 ID:0.RZ1I3k
- >>103
あなたは正しい。
しかし>>93の言ってるのは設定がデフォルトの儘の場合ってことかと。
- 105 名前：Name_Not_Found ：01/09/25 21:34 ID:ePKoICjw
- >>104
正直、その漢字読めない。
- 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;
}
とすれば、大丈夫。
既出だったら、ｽﾏﾇ。
- 108 名前：107 ：01/09/26 03:00 ID:4XrpxHYs
- ごめん。
>>107で、divまでご丁寧にセレクタに入れてるのって、変ですか？
- 109 名前：107 ：01/09/26 03:03 ID:4XrpxHYs
- 何度もすみません。
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の情報）
- 111 名前：Name_Not_Found ：01/09/26 08:20 ID:PBQ/9qJY
- >>105
それくらい調べろよ。
http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi?MT=%D0%D6&sw=2
- 112 名前：Name_Not_Found ：01/09/29 04:49 ID:oC6f8ofk
- 募集中！
- 113 名前：Name_Not_Found ：01/09/30 00:31 ID:LuIj9OdA
- MacIE5 の相対配置ばぐ
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001_03b.html#n2001-03-20-03
- 114 名前：Name_Not_Found ：01/09/30 16:49 ID:z6G1.gUk
- >>111
105ではないですが、漢字を調べるのは難しい
- 115 名前：Name_Not_Found ：01/09/30 16:51 ID:bJIKQh0c
- >>114
IME使ってる？
文字部分を選択して再変換をすれば良い。
- 116 名前：Name_Not_Found ：01/09/30 17:00 ID:Kj3D5KBo
- >>114
本物の小学生ですか？ 漢和辞典も引けない（持ってない）の？
それに、>>111の挙げたgoo大辞林では、ヨミを知らなくても
コピーした漢字をキーワード欄に入れて検索できるんですよ。
- 117 名前：どうやら ：01/10/02 11:30 ID:4vbvS02A
- http://natto.2ch.net/test/read.cgi/hp/997305601/138-145
より
BODYにCSSで {overflow:scroll;} が指定されているとネスケ６で表示が崩れます。
（そもそもbodyにoverflowは無効のはずですがネスケ６は解釈してしまうようで、、、）
- 118 名前：Name_Not_Found ：01/10/02 11:36 ID:KE6Lx7SY
- >bodyにoverflowは無効のはずですが
いや、有効のはずでしょ？ overflow:hidden;でスクロールバーが消えますし。
よく擬似フレームをposition:fixedの効かないＩＥではoverflowの応用で実現しますが、
これをＮＮ６で表示させるとなぜか変な風になりますね。
あれってどちらの解釈が正しいんですか？
- 119 名前：Name_Not_Found ：01/10/02 11:52 ID:P7nxrgC6
- >>118
> よく擬似フレームをposition:fixedの効かないＩＥではoverflowの応用で実現しますが
サンプルがないとなんとも言えない。
- 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;/*ＩＥ独自拡張、無くても可*/
}
- 121 名前：Name_Not_Found ：01/10/02 14:50 ID:anA8xGvY
- >>120
訂正。逆だね、これは。
overflow-x: scroll;/*ＩＥ独自拡張、無くても可*/
overflow-y: auto;/*ＩＥ独自拡張、無くても可*/
↓↓↓↓
overflow-x: auto;/*ＩＥ独自拡張、無くても可*/
overflow-y: scroll;/*ＩＥ独自拡張、無くても可*/
まあ、無くてもいいんだからどうでもいいか。
- 122 名前：Name_Not_Found ：01/10/02 19:34 ID:n2fqrfSg
- ふむ
- 123 名前：119 ：01/10/03 00:44 ID:/TtR2TKY
- >>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; }
を追加。自信ないので間違ってたらフォロー頼みます。
- 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}でもスクロール・バーが消えないってことは。
- 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 となる。
- 126 名前：Name_Not_Found ：01/10/03 10:05 ID:T1rs3Lpc
- bodyのスクロールバーを消すための指定ならば、
ＮＮ６の独自拡張で
overflow: -moz-scrollbars-none;
を使ってみては？
- 127 名前：