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

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

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 :スタイルシート質問用スレ2の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
漏れは普通に消えたゾー。
めげずに再現性を突き止めるのだー(n

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
おお、上がってきてる。懐かしいなぁ。実は1です。

>>27
それはバグではなく、正しい実装のようです。
widthで指定した数値は、paddingを除く内容領域のみを指すものであって、
paddingを含んで解釈するIEのほうが間違いのようです。

ですので>>27の場合、
div { width: 80%; padding: 10%; }
とするのが正しい訳ですね。

自分はこれで一番悩まされてます。

29 :Name_Not_Found:2001/07/04(水) 07:56
>>28
おお、1さんから直々に!
そうだったんですか。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
内容はどうでもいいんだけど、ここの日記をIEで見てください。
 http://www.alib.jp/diary/diary_200109.html
<ul><li></li></ul>の中の<blockquote>が何個か続いた場合、
下の方の<blockquote>で文書行頭がだんだん左にズレてゆき
boxからもはみ出してるのがおわかりになりますか。
これはIEのCSS実装のバグでは?
他にも<dl>などインデントに関係する要素への指定でバグるらしい。
因みに私のIEは5.5です。6.0では修正されてるといいんですけど。

66 :Name_Not_Found:01/09/17 15:25 ID:AiUEhf3w
IE5.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
こんなのはCSSのバグに入りますか。
==================
・リスト1-用語1
   用語1の説明
・リスト2
・リストn
==================
上図のごとき表示を狙って次の通りHTMLを書きます。
<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>

しかしNNではちゃんと表示されても
IEではこんな風にリストマークがずれた表示になります。
==================

 リスト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とか、デフォルトでインデントしてある要素は
バグが出る感じですね、IEは。6.0での修正に(淡く)期待。

71 :Name_Not_Found:01/09/17 20:13 ID:2ivkWEYc
IE5.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
なんでこんな変な書き方するの。
<DT>リスト*−用語説明*</DT>
 <DD>(用語*の説明があるとき)</DD>
で統一すればすむ話だと思うが。
頭の点が欲しければつけるなりDTにスタイルシートで定義すればいい。
見栄えだけこだわって論理的&シンプルに考えることができてない
好例だと思います。

74 :73:01/09/17 20:35 ID:aZXlOYcU
>>67はこうしてもいい。

<LI>リスト1
<DL>
<DT>用語1</DT>
 <DD>用語1の説明</DD>
<DT>用語2</DT>
 <DD>用語2の説明</DD>
</DL>
</LI>
<LI>リスト2</LI>

個人的に「リスト1」を何度も出すのはうざいとおもう。

75 :67:01/09/17 21:02 ID:Jsy1jZpA
>>73-74
>なんでこんな変な書き方するの。

とは言っても別に文法的に誤りではないし、
リストにして定義語を兼ねるって場合もあるでしょ。
リスト2以下との関係ではリスト1だが
それ自身は説明を要する語であるとか。
例:初心者向けウェブ制作支援サイトの目次で――
=====================
1.作者からご挨拶
2.HTML
  HTMLとはウェブページの記法です。〜
3.CSS
  スタイルシートでデザインができます
4.索引
5.参考文献
=======================
上図みたいにインデント表示するだけなら
<li><p>〜</p><p>〜</p></li>に
CSSで指定してやればできるにしても、
文書構造としては<li><dl>〜</dl></li>が相応しいのでは?

それに問題はIEの表示がNN4&6と違って変になること。
スタイル指定してもさらに変なことが起きるのだから(>>69参照)
これはやはりCSS実装のバグかと。

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を指定したのに
なんでリストマークが消えるんですかね?
まあ何故と問うても虚しくて、理不尽なのがバグってもんなのかな。
IE6.0でも直ってませんか。

78 :Name_Not_Found:01/09/18 09:31 ID:D8d977Ew
前景色プロパティcolorには後景色と違ってtransparentは指定できないはず。
しかしIE5.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 もしやIEの隠された独自拡張とか?

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ゴシックではないなんだかわからない書体が適用されてる模様。
拡大して見た所、MS Song(?)とか、そんな日本字に慣れない書体設計と似てます。

マック使ってる人、font-family指定するならOsakaだけでなく
ウインドウズ対策に"MS ゴシック""MS Pゴシック"なんかも入れてね。
私も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
すみません、サンプル5-2を文字の大きさ最大にして見ていただけますか。
他の日本語表示テスト(サンプル3-3、サンプル4)と明らかに字の太さが異なり、
別のフォントになってるんですよ――私の場合は。
ちなみに98SEにIE5.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だったらMSIEの場合、欧文はさておき日本語の部分は
"MS Pゴシック""MSゴシック"か"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だけでなくウインドウズ対策に"MS ゴシック""MS Pゴシック"なんかも入れて」指定した方がいい
――ってことでまとめてよいのかな。

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用に"MS ゴシック"って、書いておいてね。」ってあったけど、
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
NN4に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;} が指定されているとネスケ6で表示が崩れます。
(そもそもbodyにoverflowは無効のはずですがネスケ6は解釈してしまうようで、、、)

118 :Name_Not_Found:01/10/02 11:36 ID:KE6Lx7SY
>bodyにoverflowは無効のはずですが

いや、有効のはずでしょ? overflow:hidden;でスクロールバーが消えますし。

よく擬似フレームをposition:fixedの効かないIEではoverflowの応用で実現しますが、
これをNN6で表示させるとなぜか変な風になりますね。
あれってどちらの解釈が正しいんですか?

119 :Name_Not_Found:01/10/02 11:52 ID:P7nxrgC6
>>118
> よく擬似フレームをposition:fixedの効かないIEでは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;/*IE独自拡張、無くても可*/
overflow-y: auto;/*IE独自拡張、無くても可*/
      }

121 :Name_Not_Found:01/10/02 14:50 ID:anA8xGvY
>>120
訂正。逆だね、これは。

overflow-x: scroll;/*IE独自拡張、無くても可*/
overflow-y: auto;/*IE独自拡張、無くても可*/
↓↓↓↓
overflow-x: auto;/*IE独自拡張、無くても可*/
overflow-y: scroll;/*IE独自拡張、無くても可*/

まあ、無くてもいいんだからどうでもいいか。

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の内容が多いと
ネットスケープ6では縦スクロール・バーが2本も出てきますよね。
それが前から不思議でした。特に左右分割フレームを模したもので出易い。
例を出せば――
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; }
を追加すると、ネスケ6でも外側のスクロールバーが消えてちゃんと1本だけになりました。

>外側のスクロールバーについては
>N6 の文書表示部は iframe 要素に近いものだと考えればいいかと思う。
>内部に表示している文書の CSS に関係なく
>文書の高さが iframe の高さを超えたらスクロールバーが出る、みたいに。

つまりネットスケープ6では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のスクロールバーを消すための指定ならば、
NN6の独自拡張で
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} は何の関係もないよ。

128 :Name_Not_Found:01/10/03 10:18 ID:T1rs3Lpc
>>127
するとIE6の標準準拠モードでは、N6と同じくスクロールバーが2本表示されるんですか?

129 :127:01/10/03 10:27 ID:bCG9z/d2
>>128
試してもいなければ 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のバグについて。
CSSで縦書き(IE独自拡張writing-mode: tb-rl;)にすると
font-family指定が無効になるって奴ですが、
どうも欧文familyだけですね。和文書体なら大丈夫です。
lang=enと指定した英単語の部分も縦書きだと和文とみなされるらしい。
縦書きはIE5.5以上で可能ですが、IE6.0で直ってるかどうかは知りません。

131 :Name_Not_Found:01/10/05 01:06 ID:.afk/EVw
インターネットマガジンのあの名物コーナー
HTML TIPS & TRICKS

改編で終わってしまったんだね。ざんねん。

132 :アナログから光までオッケー:01/10/05 02:03 ID:F9IuR.fs
このサイトはみなさんのインターネット環境の
スピードを計ってくれます。また、遅いと思う
人は設定を少し変えることによって無料で
スピードを早くすることができます。
お金を出す前に一度試してみては
いかがでしょうか。上がりの計測も可能です。

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からはみ出すことも
珍しくありません。
これらはIE5.5でもNC4.7でもちゃんと表示されます。
Another HTML-lintでチェックしてもその部分に文法的問題はありません。
どうもtableの処理が変なのです。

必ずしも再現性が無いのですが、場合によっては、左右計2列のテーブルで
左列の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

136 :Name_Not_Found:01/10/05 19:15 ID:bsBEFVJs
>>135
ん? どこがバグですか?
(ここは「CSS/DHTMLバグ辞典スレッド」です)

137 :Name_Not_Found:01/10/05 19:48 ID:MWugGbMU
>>134
IE6もだYo

138 :Name_Not_Found:01/10/05 19:53 ID:w/ZeIFPA
>>137
へええ。
IE5.5ではちゃんと表示されるのに(>>134)
IE6.0とNN6.1では表示されないんですか?
最新版ほど変になるとは……。

139 :134:01/10/05 20:33 ID:acSRYo12
ここに問題のページからソースをコピペしておきました。
http://natto.2ch.net/test/read.cgi/hp/997305601/154-155

140 :Name_Not_Found:01/10/06 11:44 ID:LkNwYsd.
>>139
<label></label>を外すと正常に表示できるようですね。

つまりテーブルのth.td要素内でlabel要素を使っていて、
かつセンタリングや右寄せをする時の挙動が怪しいような…

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

フォームをテーブルで排列なんて、よくあるものなのに……困ったもんです。

142 :._. . _:01/10/14 01:37 ID:uhETMsO.
バグではないけど一応報告.

【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 まわりにバグがあるから,
日本語だとわかってくれているというのは間違っているかも.

144 :関係無いけど:01/10/14 06:40 ID:H/BgegxK
>>142
>Windows 用 Osaka フォント

そんなのあったんですか。どこで手に入りますか?

145 :._. . _:01/10/14 14:16 ID:Be3g4xB5
>144
Osakaフォント for Windows
ttp://yasai.2ch.net/test/read.cgi/win/997898082/

146 :Name_Not_Found:01/10/14 21:15 ID:asLlMjiU
「バグ」ではないかもしれないけれど……
こんな指定をしました。
HR {
 height:1px;
 margin:3px auto;
 color:#ccc;/*IE用*/
 background-color:#ccc;/*NN用*/
}
で、これを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
…「ヘアライン」?
http://www.ne.jp/asahi/minazuki/bakera/html/book/nokezoru#hairrine

148 :Name_Not_Found:01/10/15 02:40 ID:9hlX2Wsz
知ってて使ってるのかどうか、微妙なとこね

149 :Name_Not_Found:01/10/15 08:20 ID:IcODvQnU
Hair Lineてのは印刷・DTP用語。髮の毛みたいに細い線のこと。
>>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はウィンドと同じになるので結果横バーがでますです

151 :Name_Not_Found:01/10/15 14:56 ID:ah3y322P
>>150 お使いのブラウザは何ですか?

152 :150:01/10/15 16:08 ID:m/+dNtkM
>>151
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

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バグをまとめたページがあると助かるのですが。

158 :Name_Not_Found:01/10/26 11:33 ID:NGeM+VXb
>>157
>MacIEのCSSバグをまとめたページ
まとめてはないが、「ねこめしにっき」で時々出て来るね。
http://www.remus.dti.ne.jp/~a-satomi/nikki/
他にもあるかな?

159 :Name_Not_Found:01/10/26 11:36 ID:iDNhGBfr
ところでMacIEのユーザーって多いの?

160 :まかー:01/10/26 18:50 ID:x6xrcZSz
>>157
そーすきぼん
>>159
アクセスログからIE/まかーを割り出してみれ。

161 :Name_Not_Found:01/10/26 19:36 ID:nCVm35Pl
Mac使ってて「ネスケって何ですか?」ってひと、
最近多いよ。

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

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

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)