1 :
Name_Not_Found :
2001/06/04(月) 23:54
2 :
Name_Not_Found :2001/06/04(月) 23:54
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
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;}なんて定義してて スタイルシートをオフにするとページが真っ白になる。
逆だ。 body{color: white; background-color: black;}
>>5 いや、モードが変わるとCSSの解釈も変わるので、
一応参考にと思って書いてみたのですが……スレ違いでしたね、すみません。
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って恐くてつかえないヨ。
>>13 float で inline とはこれいかに?
>>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でもうまく消えてくれるかなー…
>>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
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%; }
とするのが正しい訳ですね。
自分はこれで一番悩まされてます。
>>28 おお、1さんから直々に!
そうだったんですか。IEの方を信じていました。
すばやくレスいただけて良かったです。ありがとうございました!
30 :
Name_Not_Found :2001/07/04(水) 08:03
>>21 あの〜、少なくともHTML4.01では<tr>は省略不可能だと思うヨ。
>>17 ちなみに26ブラウザは?
32 :
27 :2001/07/05(木) 00:53
>>30 ありがとうございます。box-sizingってたまに目にしてたけど何だろう?と
思ってたんですが、勉強になりました。
box-sizing: boeder-boxってcontent+paddingなの? IEだとborderまで含んでるような気がする(content+padding+border)んだけど、気のせいかな。。。
34 :
Name_Not_Found :2001/07/05(木) 13:22
35 :
Name_Not_Found :2001/07/05(木) 13:23
>>33 ボーダーを100pxくらいにしてみれば判るんじゃ?
36 :
Name_Not_Found :2001/07/05(木) 13:26
誰か暇な方このスレッドで完璧に証明されてる バグをまとめて下さらないかしら。うふ♪
>>33 border-boxはその名の通りborderも含めて計算されるからそれで正しいよ。
35の言うようにmozillaでborder太くして試してみたら?
38 :
33 :2001/07/09(月) 00:46
>>34 -35,
>>37 おぉ、ありがとうございます。borderを太くして試してみたところ、
確かにcontent+padding+borderになってました。
いや、
>>30 氏が紹介してたサイトにcontent+paddingだと書いてあったので、
ちょっと気になって書き込んだ次第です。ありがとうございました!
>>31 HTML4.01の仕様書ではTRのEndTagはOptionalとなっていますが何か?
>>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>
【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
60 :
Name_Not_Found :01/09/16 09:19 ID:VJ8UHLZk
>>59 つうかとっとと対応しろと言うか。
MacOS版のIEは子セレクタ対応してるのに……。
>>60 このご時世に対応できてないところ見ると、
対応には Netscape 並みの大手術が必要なのかもね。
62 :
yuu ◆xo3ilszg :01/09/16 12:17 ID:.eBwbS6c
リストをdisplay:inline;にすると、MacIE4.xでは妙に和風な表示になって しまうのですが、抜本的対策って何かありますか?
あ、ここ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
>>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 解析不能な値については宣言ごと無視するするべきってこと考えると
やっぱバグというか、仕様にない挙動なんだろうね、それ。
82 :
Name_Not_Found :01/09/23 08:01 ID:D2pU9J4U
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ゴシックではないなんだかわからない書体が適用されてる模様。
拡大して見た所、MS Song(?)とか、そんな日本字に慣れない書体設計と似てます。
マック使ってる人、font-family指定するならOsakaだけでなく
ウインドウズ対策に"MS ゴシック""MS Pゴシック"なんかも入れてね。
私もMac向けに"Osaka-等幅"って入れてるからさ(どんな風に見えるのかは知らんが)。
>>84 Win IE5.5 ですが、どの辺がガタガタなのやら?
>>マック使ってる人
気にすんな。
86 :
Name_Not_Found :01/09/25 16:47 ID:n.TGXq2.
87 :
86 :01/09/25 16:50 ID:n.TGXq2.
あ、特に上掲ページのサンプル5-2だね、この場合。
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
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} を指定してもセンタリングされない見たいなんですが、これって やっぱバグ?
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 サンクスです。 ・・・参照ページを見た時、ショックで言葉が出なかった。
>>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 より
>>93 sans-serif を指定した場合の表示フォントは、既定値はOSによってあるいは、
個人の設定/環境によって異なります。
ちなみに私の場合、sans-serif も serif も MS明朝ですが。
>>103 あなたは正しい。
しかし
>>93 の言ってるのは設定がデフォルトの儘の場合ってことかと。
105 :
Name_Not_Found :01/09/25 21:34 ID:ePKoICjw
デフォルトのままの場合ってことかと。
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
112 :
Name_Not_Found :01/09/29 04:49 ID:oC6f8ofk
募集中!
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使ってる?
文字部分を選択して再変換をすれば良い。
>>114 本物の小学生ですか? 漢和辞典も引けない(持ってない)の?
それに、
>>111 の挙げたgoo大辞林では、ヨミを知らなくても
コピーした漢字をキーワード欄に入れて検索できるんですよ。
117 :
どうやら :01/10/02 11:30 ID:4vbvS02A
>bodyにoverflowは無効のはずですが いや、有効のはずでしょ? overflow:hidden;でスクロールバーが消えますし。 よく擬似フレームをposition:fixedの効かないIEではoverflowの応用で実現しますが、 これをNN6で表示させるとなぜか変な風になりますね。 あれってどちらの解釈が正しいんですか?
>>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独自拡張、無くても可*/
}
>>120 訂正。逆だね、これは。
overflow-x: scroll;/*IE独自拡張、無くても可*/
overflow-y: auto;/*IE独自拡張、無くても可*/
↓↓↓↓
overflow-x: auto;/*IE独自拡張、無くても可*/
overflow-y: scroll;/*IE独自拡張、無くても可*/
まあ、無くてもいいんだからどうでもいいか。
ふむ
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}でもスクロール・バーが消えないってことは。
一つ間違えた可能性浮上。 外側のスクロールバーは CSS2-9.1.1 > 閲覧領域が文書の初期コンテナブロックより小さい場合、ユーザエージェントはスクロールの仕組みを提供すべきである。 に沿った挙動かもしれない。 > body {overflow:hidden}でもスクロール・バーが消えないってことは。 body { border: 1px solid red; } あたりを追加してみれば、ボックスモデルがどうなっているかわかると思う。 通常フローの非置換ブロック要素の高さが 'auto' であるとき 絶対配置ボックスの子要素は無視して高さを算出する。(CSS2-10.6.3) つまりこの場合、スクロールバー出る出ない以前に、body の高さの算出値は 0 となる。
bodyのスクロールバーを消すための指定ならば、 NN6の独自拡張で overflow: -moz-scrollbars-none; を使ってみては?
>>124 IE5 で body に border つけると閲覧領域全体にボーダーがつくけれど
これはバグで、閲覧領域と body 要素は無関係。
IE6 の標準準拠モードでは修正されてるが、
body は div などと同じように、基本的に内容の量によって高さが算出され、
ウィンドウサイズ等の影響を受けない。
そのスクロールバーと body{overflow:hidden} は何の関係もないよ。
>>127 するとIE6の標準準拠モードでは、N6と同じくスクロールバーが2本表示されるんですか?
129 :
127 :01/10/03 10:27 ID:bCG9z/d2
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で直ってるかどうかは知りません。
インターネットマガジンのあの名物コーナー HTML TIPS & TRICKS 改編で終わってしまったんだね。ざんねん。
132 :
アナログから光までオッケー :01/10/05 02:03 ID:F9IuR.fs
このサイトはみなさんのインターネット環境の
スピードを計ってくれます。また、遅いと思う
人は設定を少し変えることによって無料で
スピードを早くすることができます。
お金を出す前に一度試してみては
いかがでしょうか。上がりの計測も可能です。
http://cym10262.omosiro.com/
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 ん? どこがバグですか?
(ここは「CSS/DHTMLバグ辞典スレッド」です)
137 :
Name_Not_Found :01/10/05 19:48 ID:MWugGbMU
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
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
バグではないけど一応報告. 【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 まわりにバグがあるから, 日本語だとわかってくれているというのは間違っているかも.
>>142 >Windows 用 Osaka フォント
そんなのあったんですか。どこで手に入りますか?
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
知ってて使ってるのかどうか、微妙なとこね
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はウィンドと同じになるので結果横バーがでますです
152 :
150 :01/10/15 16:08 ID:m/+dNtkM
153 :
Name_Not_Found :01/10/15 16:15 ID:X76Q/R67
154 :
150 :01/10/15 16:45 ID:nX4mW1rH
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バグをまとめたページがあると助かるのですが。
ところでMacIEのユーザーって多いの?
160 :
まかー :01/10/26 18:50 ID:x6xrcZSz
Mac使ってて「ネスケって何ですか?」ってひと、 最近多いよ。
162 :
157 :01/10/26 22:22 ID:PUaqysvX
>>160 ソースを書くと長くなるので、お恥づかしながらURLを晒します。
www.ne.jp/asahi/anarchy/saluton/bnlist.html
ちなみにここは自分のサイトではなく、知人に頼まれて私がhtml化を請け負ったものです。
したがって内容は関知しません(txtファイルで貰っただけ)。マークアップとCSSのみが私の責任です。
素人が書いたつたないソースなので、あれこれツッコミどころがあるかもしれませんが、
ともあれ、当面のバグ回避についてご指摘いただけると有り難い限りです。
163 :
Name_Not_Found :01/10/27 03:07 ID:CIDPymy9
いままでCSSバグばっかりでDHTMLのバグが報告されないのはなんでだろ。 そもそもDHTMLって何だ? JScript+CSSのことなら(HTML関係ないぢゃんって声も)、 スタイルシート切替スクリプトだって含まれはしないか? どうも範疇がよくわからん。
>>163 クライアントサイドで HTML 文書の内容や表示法を動的に変化させる技術の
総称を指すような感じか。
スクリプト + DOM じゃないかな。
# ふと思ったんだが VBScript でも DOM 操作ってできるんだろうか?
スクリプト処理系のバグは実際少ないと思う。
DOM にしても、バグって言うより未実装ってのがほとんどだし。
>>164 6.0でもなりますね。
何が原因なんだ?
167 :
まかー :01/10/27 12:49 ID:ihQz7QbN
>>157 今ファイルをダウンロードして状況を確認。
どうやらdefault.cssが問題の様子。
(default.cssのimportは取り除いて確認)
どうも、右列はレンダリングされてるんだけど
何らかの原因で画面の右へ、遥か彼方へ飛んでってしまってるらしい。
横スクロールバーは無し。
原因究明中。次報を待たれよ。
>>166 特にひどいのは「26th day」だけですね。
「27th day」の方もアンカーに触れるとズレるけど、それはほんの僅か。
169 :
まかー :01/10/27 15:10 ID:ihQz7QbN
>>157 原因判明。
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"を振ってセンタリングしておきました。
171 :
まかー :01/10/27 17:36 ID:ihQz7QbN
172 :
164 :01/10/28 01:44 ID:aOtGQher
アンカー触るとズレるのって自分とこでもある。 誰か原因知らん?
174 :
Name_Not_Found :01/10/28 23:36 ID:ZTirAR2v
>>173 ソース希望。
>>164 で挙げた所は日記だけど、今度は27th dayの横幅だけ狭くなってる。
あいにくアンカーが無いけれど、ダウンロードしてA要素を挿入すれば再現するかもね。
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 では色変えてるだけですし。
176 :
Name_Not_Found :01/10/29 14:14 ID:56xCH76L
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/ ">『2ちゃんねる』</a>はアングラではない。<p>
A要素末尾の「』」と次の「は」の字が重なります。A要素が長くなると重なる度合もひどくなる。
例文のA要素を<strong>や<b>などの太字がデフォルトであるマークアップにしても、同じ症状が発生します。
こんな基本的プロパティでバグ起こしてんぢゃないよ、全く。
179 :
178 :01/10/29 22:04 ID:k2InB4DW
例文の文末に「<p>」とあるのはむろん「</p>」の誤記です。失礼しました。
180 :
173 :01/10/30 01:20 ID:WgIYq8uj
色々試してみたら原因判明した、とは限らない模様。
当方、
body { margin: xxx; }
というのが気にいらず、
body { margin: 0; padding: xxx; }
のようにしてるんだけど、
これを前者のマージン指定に戻したらとりあえずは解消した。
ただ、他のシートでも同じことしてるのにそちらはズレないのね。
恐らく、BODYに限らず、marginやpaddingの設定の仕方に原因があるんだろうけど、
今はちょっとワカラソ。眠い。そのうち単位とか変えて調べてみる予定。
>>174 ちと恥ずかしいので勘弁。
「CSSでイケてる〜リンク集」に何故か載ってるので、その気があったら探してみて。
>>175 そちらはどう?
181 :
173 :01/10/30 01:22 ID:WgIYq8uj
下げちまった。
>>178 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 にて確認。
184 :
Name_Not_Found :01/10/30 11:21 ID:qu1lP6Hw
>>182 回避法としては、
text-align: expression(justify);TEXT-JUSTIFY: 〜;
で、いいのかな? expression()でIEにのみスタイルが適用される。
どうせtext-align:justifyはIEしか対応してないんだし(少なくとも日本語では)。
MacIEでもtext-align:justifyを指定するとよくないらしいね。media@で除けるか。
>>184 text-align: expression('justify');だね。
expression('')にしないとエラーになる。
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では直ってるといいのですが。
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>を削除するとリストマークとリストの箇条書きの文章がちゃんと一列に並びますが―― これはバグではないのですか?
N6の場合はそれでいい。 要するにinseideにするって事はインライン要素として扱うって事だから、 pがあるとリストマーカーは匿名ブロックに囲まれてしまうから。 N6の場合はこうなるってだけで、他が間違ってるわけじゃないよ。 そもそもリストマーカーの位置は厳密には定められてないから。
189 :
187 :01/10/31 12:53 ID:6ns0RDPY
>要するにinseideにするって事はインライン要素として扱うって事だから、 N6の場合、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ではそんなことなかったからバグっぽいけど、それともこれも解釈の差なんですかね?
191 :
Name_Not_Found :01/11/01 11:29 ID:mxCfPn2/
>>189 違う。リストマーカーをほかの文字と同じインライン要素として扱うってこと。
「匿名ブロック」って知ってる?
>>190 list-style-typeを指定してみそ。
>>190 て言うかリストマーカーに画像を使わないことを明示するのは
空URLでなくてnoneだ。
195 :
u.r.a :01/11/01 18:38 ID:T61eq4Tz
DHTMLでPULLDOWN MENUをやろうとしているんですが、IEでセキュリティレベルを 『高』に設定したときって、JavaScriptが効かなくなりますよね。 時々『高』でも表示されているサイトを見かけるんですが、対策知っている方 いませんでしょうか? 『信頼済みサイト』に設定するネタは却下ということで。。。 あと、IE6ってセキュリティレベルを『高』に設定すると <NOSCRIPT>自体認識しなくなりませんか?
HTMLとJavaScriptは別だということを先ず知ってから。 恐らくselect要素のことを言ってるんだよね? というかそもそもスレ違いじゃないかい?
>196 違いますよ。M$社のTOPや東京三菱のTOPみたいなのを 逝っているんですがね。。。 スレ違いかもしれませんね、すまそ。 でも知ってるひといたら宜しく。。。
>>197 今ためしたが、「高」だとプルダウンメニューはならなかったけど?
IE6 on Windows2000
たぶん
>>197 は「M$社のTOPや東京三菱のTOPみたい」でしかも
「高」で動くのを見た事があると言いたいんだと思うが、
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要素のみにつく。
201 :
Name_Not_Found :01/11/04 12:23 ID:qR4G0uq7
203 :
Name_Not_Found :01/11/08 08:10 ID:Uax81n0P
204 :
Name_Not_Found :01/11/08 14:42 ID:M+cBEwAo
遅レスな上趣旨とは違うんだけどさ、
>>187 の場合 ul よりも ol のがいいんでない?
205 :
Name_Not_Found :01/11/08 18:38 ID:ksbZuB36
いまさらだけど >CSSでbrは記述出来ない(仕様書にも書いてある)から CSS2では br:before{content:"\A"}となってるよ
>>205 それは
>>169 に対して、ですよね。
ってことはbr{display:block}もアリなんですか?
(まあMacIEでバグるのならそんな指定はしない方がいいけど)
>>206 一応、アリ。あまり意味は無いと思うけど。
209 :
207 :01/11/08 21:31 ID:32VtkEzq
>>208 生き残れるかとか言われても、元々BR要素型なんて
めったに使わないしなぁ……あ、ADDRESSの中では使ってるか……。
と言うか、空要素をdisplay: inlineにするのには、何か意味があるの?
210 :
208 :01/11/08 21:43 ID:JlpswVyj
>>209 いやね、段落改行<p>とすべきところを強制改行<br>使ってたり、
<br><br>とかの連続で余白を作ってる連中には効き目があるかな、と。
>210 意図はわかります(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のようです。
215 :
Name_Not_Found :01/11/16 03:11 ID:Z3KPZ8hL
誰かOperaのCSS対応についてまとめてませんか。参考URL希望。 結構バグ多いみたいなんですが。
216 :
:01/11/16 03:52 ID:+cNTw/NC
217 :
Name_Not_Found :01/11/16 10:17 ID:gtyk6rsy
220 :
Name_Not_Found :01/11/16 18:20 ID:rsujQZ6U
document.body.clientHeight、 IEだとウィンドウの(クライアント領域の)高さを返すのに対して Operaだと文書全体の高さを返すようなんだけど どっちが正しいのかな? Operaのバグかな?
221 :
Name_Not_Found :01/11/16 18:26 ID:PHxCbSir
>>220 正しいとか正しくないとかの問題ではない。
これは、どちらのブラウザともバグではなく仕様です。
ただその仕様が異なるというだけであり、
各ブラウザにとって、それらの各仕様は正しい。
貴方は、何を基準に、正しい、正しくないと言っているのですか?
W3Cの仕様と異なる動作を行うものは、バグだと思っている
非常識な奴は帰れ。
222 :
Name_Not_Found :01/11/16 21:23 ID:8dyyiFSJ
>>220 IEでも6のstandard modeだと
文書の高さを返すよ。
221の言うとおり、どちらが正しいというものではないけどね。
223 :
220 :01/11/16 21:32 ID:rsujQZ6U
>>221 あー、バグという言葉を使った俺が悪かったよ。
>>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ともに。 欄外表示の注釈風にしたかったんだけどね。うーむ。
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の記述も無視されなかった。
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対策を取れるかも知れません。
背景指定のprintメディアへの反映について。
H1 {
background-image: url('icon.gif');
background-repeat:repeat;
background-position:center;
background-color:#c0c0c0;
}
上記のスタイルは、画面で表示確認する限りでは問題無い。
しかし2行目の値を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 が入るように横幅が拡張される。
>>228 right、bottomなんて存在しないちゅうに。
width、heightを使ってよん。
231 :
Name_Not_Found :01/12/04 20:35 ID:73rxXEHC
>>230 一般的なレファレンス本では実用的にするために、
W3Cが定めるものではなく、実際のことが書かれてるよ。
間違ってるのは、君の考え方だよ。
仕様とバグの区別ができないなんてはずかしいよ。
>>231 実用的かどうかはともかく、「right、bottomなんて存在しない」と言い放った229は
どう見ても馬鹿だと思うが。
間違っているのは、君の読解力(と言うか、頭)だよ。
229が何を間違えているのか、230が何を言いたかったのか読み取れないなんてはずかしいよ。
233 :
230 :01/12/04 21:06 ID:R1ATXc9W
とにかくright,bottomは立派に「存在する」し、 少なくとも手持ちのIE5.5やNN6では動作するから うちのサイトにとっては十分実用的でもあります。 レファレンス本でも、存在するけどこれこれのブラウザでは実装してないと書くべき。
>>232 >>233 ブラウザには存在しません。
ゆえに、一般的に存在しません。
原理主義者こわいよう
235 :
231 :01/12/04 22:11 ID:MwdUvkqf
>>234 キミは
>>233 の
>少なくとも手持ちのIE5.5やNN6では動作するから
> うちのサイトにとっては十分実用的でもあります。
と言うのが読めないのかい? つーか、勝手に一般的とか一般的じゃないとか
決め付けるんじゃないよ、ボケが。
第一、「ブラウザ」ってのは何のことを言ってるんだい? まさか、
Netscape Navigator 4.xですとか言わないだろうね。
237 :
230 :01/12/04 23:01 ID:3Zbpa4Sc
>>229 =
>>236 =ID:73rxXEHCはこのスレッドのバグですから、除去して下さい。
ハイ、お次の方どうぞ。
何がネタなんだか判らなくなってきた。
241 :
Name_Not_Found :01/12/05 12:28 ID:R6Fg8q6l
>>241 IE4なんかを基準にされて「一般的に存在しません」って断言されてもなあ……。
「(一部のブラウザでは)実装してない」ならともかく、「存在しない」ってのは
どうしたって勇み足だろ。素直に過ちを認めなよ。
243 :
Name_Not_Found :01/12/05 15:43 ID:PE0ReF9e
【IE5.5】 ルビ文字(RT要素)内でタグづけしてあると、通常の横書き時には問題ないが 縱書き(writing-mode:tb-rl;)適用時に前後の行が重なってしまった。 例: <RUBY><RB>ルビ</RB><RP>(</RP><RT><span class="red">ふりがな</span></RT><RP>)</RP></RUBY> タグをコメント(<!-- -->)にしても廻避できず。
CSSでカッコよくサイト作った!ヽ( ´∀`)ノ IE5.5、IE6で見た!ナイス! NN6.2で見た。・・・悲惨。 ・・・・・・。 MacIEで見た。・・・旅に出ます・・・
247 :
Name_Not_Found :01/12/05 17:55 ID:PE0ReF9e
248 :
参考資料 :01/12/05 18:10 ID:3g0VkM8H
249 :
246 :01/12/05 18:32 ID:V2xBxSRv
>>248 さんくす!
旅に出る前にこのページを参考にしてみます。
部分的にはNNの方が正しい解釈をしていることもあるので、
とりあえず参考程度に入れてみたらすごかったよ・・・(;´Д`)
テーブル周り・FLOAT周りで大崩れだった。
デフォルト値が違うだけなのか、実装の進み方が違うのかはわかんない。
参考にさせていただいた。 center入りのdivでテーブルを中寄せするのは IEのバグとはしらなんだ。 ありがと。
>>247 で、結局right,bottomは「存在しない」のか。
(少なくともIE4ユーザーのあなたにとっては?)
煽りは無視して、一般論でいこうよ。
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では正常。
>>255 >結果は、マウスが通過するとまったく別の画像が表示されます。
「まったく別の画像」とは? IE6で実験したが、別に異常ありませんでしたが。
初めはmenu_back.gifの上にprofile.gifとdiary.gifが重なって表示され、
アンカー上をポインターを乗せるとprofile.gifやdiary.gifが消えて
その下のmenu_back.gifが見える。
むしろ変なのはOpera。profile.gifやdiary.gifが初めから全く見えない。
リストを入れ子にした場合のスタイル。 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通くらいスパムが来た。
むかつく。
259 :
258 :01/12/19 13:20 ID:ufJPdzCi
ちなみに <style> h1 {color:aqua;} </style>のように マークアップすればOK
>>258 そりゃ、反映しないのは<!-- -->で括ってるからでないの?
XHTMLではどうなんだっけ。
a:link { text-decoration: none } a:hover { text-decoration: underline } a:active { text-decoration: none } a:visited { text-decoration: none } にしてあっても、リンクした後(visited)では、下線が表示されっぱなし・・・ な、なぜ?
264 :
>260-261 :01/12/19 13:40 ID:ufJPdzCi
違う違う。
確かに、XHTMLではstyle要素の内容は#PCDATAだから
>>261 のようにすれば内容はコメントアウトされちゃう。
けど、<![CDATA[〜〜]]>でマークアップすれば、
その中身はCDATAになるべきだから、
コメントアウトされるのはおかしい。
265 :
263 :01/12/19 13:51 ID:rFTYF64u
ごめん、間違った。
>>263 は「擬似要素」ではなく「擬似クラス」ですね。
266 :
Name_Not_Found :01/12/19 18:02 ID:PL4ANVnB
>>264 どのみち、「<!--」と「-->」はCSSとして
不正な文字列ではないのか?
NN6は「}」の後に「;」があるだけでも無視するぞ
ありがとうございます。 なかなかめんどくさいのですね(汗 何でもっと自由・・・(自主規制
268 :
Name_Not_Found :01/12/19 20:08 ID:VHJ5Kvca
まぁ、Netscape 6.2なら、わざわざstyle要素を注釈宣言で囲まなくても、 User-AgentのCanvasに表示してしまうことは無いと思うけど。
270 :
Name_Not_Found :01/12/19 20:51 ID:v9ixxAL6
>>267 その
>>262 の順番で試したが、WinIE6,NN6.2,NC4.7,Opera6、どれも
「リンクした後(visited)では、下線が表示されっぱなし」にはならない。
あなたのブラウザは何(バージョンも)?
何か他に変なスタイル指定入れてない?
☠ฺ
273 :
Name_Not_Found :01/12/24 21:41 ID:WtOxvadv
CSSで段組を作るには悩まされますよね。 左右二段、左段の幅のみ一定の段組にする場合でのバグ。 ソースは大略以下の通り。 <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%;"を追加するとこのバグは廻避された。
274 :
273 :01/12/24 21:44 ID:WtOxvadv
HTMLソースのclass="head"、class="main"は 正しくはid="head"、id="main"でした。失礼。
275 :
273 :01/12/25 22:45 ID:JGPoU3wi
【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の計算はどうなってるんだ?
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に対応してないですよね?) これはバグですか? それともタグ間違ってますか?
こんな例があります。 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ではウィンドウ幅に拘らず、背景画像は現れません。 バグですよね?
280 :
ごめん :02/01/11 02:11 ID:EisS/Knr
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のバグだと推定されます。
しかしソースをダウンロードしてみたものの、これを再現させる条件がわからない。
原因の特定できる方、いらっしゃいますか。
282 :
281 :02/01/11 06:54 ID:N5GnJWW/
因みに、關係部分のソースは以下の通り。
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 またはボックスのサイズ指定をするとこの現象が発生するようだ。
バグかどうかは判らん…
>>283 >position:absolute またはボックスのサイズ指定をするとこの現象が発生するようだ。
いや、ボックスdiv#naviへのスタイル指定を全てコメントアウトしても
やはりdiv#navi内のspan と a のボックス上部がちょんぎれますよ。
対処策としては、
div#navi a, div#navi span {position:relative;}を追加指定すると、
はみ出た分も表示されます――なぜかはわかりませんが。バグでしょ。
IE5.5以下ではどうなのかな。
285 :
283 :02/01/11 14:05 ID:93n8VRdv
>>284 ええっ!? div#navi の指定全部コメントアウトしたら
うちは普通に表示されたよ。ちなみに環境は
Win2000 + IE6.0.2600.0000
286 :
283 :02/01/11 14:12 ID:kGb0z97u
>>285 えっ、本当? もしかしてうちのマシン自体がイカれてきてるのかな。
環境はWindows98SE+IE6.0.2600.0000です。
287 :
286 :02/01/11 14:14 ID:kGb0z97u
ごめん、
>>286 の名前欄は「284」の誤記でした。
>>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;
289 :
288 :02/01/12 16:38 ID:Wrh8/LAm
>>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)をすると、症状は再発した。
290 :
285 :02/01/12 18:02 ID:OQYd4pSB
>>288 ー289
どうも、 288 のソースを互換モードで表示すると問題が起こらない。
標準モードにすると「ちょん切れ」が出るようだ。
互換モードでも 289 の下2行の条件が加わると問題が出る。
で、この「はみ出たりちょん切れたり挙動が一定しない」のはまあ
バグと言っていいのかなーと思うのだが、
仕様的にどうなのかがよくわからん。
インライン要素の padding や border のはみだしの扱いってどうなってるの?
291 :
285 :02/01/12 18:04 ID:OQYd4pSB
292 :
Name_Not_Found :02/01/12 19:31 ID:n33ScOCg
>>290 はみ出すのはNN6もOpera6も一緒。だから仕様通りではないか。
問題は、はみ出した分(の上部のみ)が表示されなくなること。
標準モードの存在しなかったIE5.5以前ではどうなのかな。
293 :
Name_Not_Found :02/01/12 19:42 ID:OQYd4pSB
>>292 > はみ出すのはNN6もOpera6も一緒。だから仕様通りではないか。
…そ、そんなんでいいの?
や、俺もしかしてその辺の定義が仕様になくて
挙動として一方が誤りと言い切れないとかあるんじゃないかと思ったんだ。
つづけて
>>288 に類似したソースでのIE6のバグ。
なぜか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: "MS 明朝";
}
// --></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以前ではどうなるかは未確認。
295 :
294 :02/01/14 01:02 ID:S1RrxLaw
猶、
>>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>
と改行せずに書くと、やはり消失するウインドウ幅が変動する。
296 :
備忘録 :02/01/14 19:23 ID:iPYzBieu
「/*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の基準が異なるのか?
IEでフォントサイズ変えるとem指定した部分全てに影響する。
常にその時のフォントサイズを基準にしてるんだと。
width: ○em;
とか
top: ○em;
とかやる場合、IEのほうが賢く感じる。
N6等だと、要素からテキストがはみ出たり、重なったりして鬱。
>>297 それはCSSの使い方に問題があると思われ。
マイナスマージンで重ね合わせてるんでしょ?
position: absolute;するべき。
もう終わったみたいだけど。
>>298 「IEのほうが賢く感じる」てのは同感なのですが、にも拘らず、
>>297 の例で
WinIEだと表示が変になるのはやはり問題です。
>マイナスマージンで重ね合わせてるんでしょ?
>position: absolute;するべき。
これもおっしゃる通りですが、同じ効果ならどの手段でそれをなすかは自由に選択できるべきで、
NN6やOperaがちゃんと表示してるのにWinIEだとうまくゆかないのはバグとして修正されるのが望ましい。
何度か出てたような気もするけど Opera 6.0 (6.01βも含む) Win版で確認 overflow : auto が overflow : visible と解釈される。 overflow : scroll が overflow : hidden と解釈される。 但し、body要素は overflow : auto で固定(これは正しく解釈される)。
301 :
Name_Not_Found :02/01/19 23:53 ID:OE0QwKqH
【Opera6.0(Win)】 <ul> <li>AAA<span>aaa</span></li> <li>BBB<span>bbb</span></li> <li>CCC<span>ccc</span></li> </ul> これをCSSで、 li { display: inline; } span { display: none; } とすると、何故か li 要素前後の改行コードが無視される。 その結果、A〜Cがひと続きの単語として認識され、 ボックスの右端で折り返されなくなり、はみ出して表示される。 ┌────┐ │AAABBBCCC ←こうなる。 └────┘ <span>の直前に改行なりスペースなりを挿入すると直る。
【WinIE6】 註番号を附すのに上附文字<sup>を使用する。 例:<p>…前略…これは文献Aの指摘するところである。<sup><a id="t1" href="#n1">*1</a></sup></p> しかしNN6のデフォルト・スタイル(vertical-align:super)だと附く位置が 上にあがりすぎて好みでないので、sup{vertical-align:55%;}とした。 Opera 6では問題無し。IE5.5ではvertical-alignの%指定に対応してないので効果無し。 ところがIE6にヴァージョン・アップしたところ、<sup>の箇所の前後の表示が 大幅に乱れ、上下の行がズレ重なって読めなくなったりする。 どうやら%を<sup>を含む行の高さとしては計算してない模様。 sup{vertical-align:0.55em;}とすると、IE6でも意図通りになった。
304 :
Name_Not_Found :02/01/22 07:48 ID:Gm0tWAfG
Win IE 5.5 なんですが、 .section { position: relative; border: 1px solid black; margin: 1em; padding: 1em; } .navi { position: absolute; top: 0px; right: 0px; } <div class="section"> <h1>へくしょん</h1> <p>こんにちは</p> <p>さようなら</p> <p class="navi"><a href="next">次いってみよう</a></p> ってやったんですが、.navi が 何故かウィンドウの右端までいってしまいます。 top の方はちゃんと動いてるんですが.... 既出ですか?
306 :
304 :02/01/22 18:58 ID:+GNFQJs7
>>305 うーん、この場合、
div 内部の右端に表示されるのが正しい動作じゃないんでしょうか?
position: absolute って window 相対なんですか?
でも top とかは div 相対になってるし...
left でやったばあい、ちゃんとdiv 相対で表示されますし、
Mozilla だとウィンドウ相対でなく div 相対で表示されます
鳩丸よんでもそれらしい記述は見つかりませんでした。
right だけ特別なんだろうか。
よくわかってないんで、解説プリーズ。
.sectionにwidthを記入してみよう!
308 :
304 :02/01/22 19:20 ID:+GNFQJs7
>>307 なるほど、うまくいきました。ありがとうです。
width: auto じゃだめなのが非常に遺憾ですが。
margin: 1em だから width をパーセントにするわけにもいかんし。
質問スレ向けだったみたいですね。
309 :
Name_Not_Found :02/01/24 15:23 ID:/m4H1m1x
<span style="border : solid 1px">aiueo</span> でNN4だとページが表示もされずに強制終了するんですがこれは当たり前でしょうか。
>>309 バグだけど、本当にそれだけしか書いてない HTML だったら落ちないっしょ。
再現条件はもうちょっと複雑。
バージョンいくつ? 4.0x で落ちても 4.x で落ちないのとかあるよ。
313 :
Name_Not_Found :02/01/26 20:41 ID:kG4K9aTa
>312 line-heightを%指定した場合、メニューのText Zoom: 100%を基準にするっぽい。 line-height: 150%でText Zoomを200%などとすると盛大に被る。
IE 5.5 position: absolute; の時、right/left プロパティが正しく動かない。
>>314 漠然とした情報だと、折角の報告も役に立たない。
できれば詳しい具体的状況と対処法を。
【Opera6.0】 <table class="navbar" width="100%" summary="navigation bar"> <th>サイトタイトル</th> <td> <a href="〜">〜</a>/<a href="〜">〜</a>/<a href="〜">〜</a>/ <a href="〜">〜</a>/<a href="〜">〜</a>/<a href="〜">〜</a>/ <a href="〜">〜</a>/<a href="〜">〜</a>/……以下続く </td> </table> .navbar td a {white-space:nowrap;} これでIE5.5やNN6では「/」の所でだけ改行して幅100%に納めてくれる。 ところがOpera6.0はテーブル内が全く改行せずに一行になって100%を超えて横に伸び、 その結果、横スクロールが発生してtd要素の右端はウィンドウから隠れる。 つまり“.navbar td a"に対してでなく“.navbar td”に対してnowrapがかかってしまった状態。 この症状はOperaの独自拡張CSSであるwhite-space:-pre-wrap;を同時に指定すると 廻避されるが、もちろんOperaではwhite-space:nowrap;は効かなくなり、 IE6・NN6に対してのみnowrapが有効となる。 ちなみに同じソースで .navbar td {text-align:right;}と指定してたら、 MacIEで挙動不審に。nowrapはそれを避けようとして追加指定したのだが。
MacIE5ってWinIEとは別物でむしろCSS実装では上って評価されることも多いけど、 結構、理不尽なバグも多いな。 作ったサイトをたまに他人のMacで見る機会があると大抵ガッカリさせられる。 しかも見るたびにバグる箇所が異なるぞ。仕様書通りの記述なのに、ナゼ……。 floatごときで固まってるんでねえぞ、とか、なぜpositioningした要素が消えるの、とか、 ひどくなると、WinIE5.5以降向けの縦書き用のmarginやwidth指定した記述を、 外部CSSへのリンクは<!--[if gte IE 5.5000 ]> <![endif]-->でコメントアウトして, さらにはそのシート内では@media screen,print{ }で括ってあるのにも拘らず、 なぜかその一部だけを認識してしまって表示が崩れる、とかとか。 セレクタやプロパティへの対応を増やすよりも、実装分のミスを無くす方向で 早いとこ正式新バージョンを出して欲しいもんだよ。これはOperaにも通じるナ。
318 :
Name_Not_Found :02/01/29 20:45 ID:lLY8YKEx
そういや MacIE5 は textarea に font-family: 'Tahoma', 'MS UI Gothic', 'Osaka', sans-serif; とかやったら 日本語が文字化けしてくれた記憶があるな。
>>319 Operaのfont-size:100%は90%っぽいから、
継承されてどんどん文字が小さくなっていると思われ(w
320のおかげでオイラのサイトが少し幸せになれた気がします。 感謝です。
【Opera6】
外部スタイルシートの先頭に
@charset Shift_JIS;
と書くと、そのシートを無視する。
しかし
@charset "Shift_JIS";
とクォーテーション・マークつきなら大丈夫。
cf.
http://www.toybox.jpn.org/test/ これを逆用すれば、Operaに適用させたくないCSSが書ける。
324 :
Name_Not_Found :02/02/02 20:50 ID:iLypiChk
>>323 って言うか、そもそも二重引用符外したら文法違反では。
@charsetの後に続くのはKeywordsじゃなくてStringsでしょ?
>>324 文法違反の誤った記述があった場合、そこだけを無視するのがCSSの本則では?
しかしOperaはシート全体を認識しなくなります。そこがつけめ。
326 :
324 :02/02/02 21:06 ID:iLypiChk
>>325 @charsetは一つのシートに一つだけ……と言うか、
そのシートの文字符号化方法を決める(ヒントにする)ものだから、
その規則はシート全体に適用されると考えていいんじゃないの?
と言うことは、@charsetを認識出来なかった場合、シート全体を認識しなくなる
Operaの挙動も、別にバグとは言えないと思いますけど。
# もちろん、エラーを適当に補完してくれればそれに越したことはありませんが。
あと、
> cf.
http://www.toybox.jpn.org/test/ の中に
> 外部CSSファイルで@charsetを誤って宣言している場合(大文字小文字の間違い)
と言う項目があるけど、charsetってcase-insensitiveなのでは? CSSの管轄下じゃないし。
327 :
324 :02/02/02 21:14 ID:iLypiChk
間違えた、325氏の通りでいいんだった。
http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#parsing-errors > Invalid at-keywords. User agents must ignore an invalid at-keyword together with everything following it,
> up to and including the next semicolon (;) or block ({...}), whichever comes first. For example, consider the following:
「不正な@キーワードは次のセミコロンか、もしくは次のブロックの終わりまで無視しなければならない。」
……と言うことは、@charsetがないものとして解釈しろってことなのね。
いい加減なことを書いて申し訳ありませんでした>325氏
# テストの方はよく分からん……。
328 :
Name_Not_Found :02/02/05 03:11 ID:Ix5CYk0q
http://www.ne.jp/asahi/anarchy/saluton/index.html ↑MacIE5.0で見ると、右側に出るべき<h2>Contents</h2>が消え去って
表示されない。
MacIE4.1では表示が崩れて困るが、消えはしなかったのに。
しかしOSXのMacIE5.1で見たら大丈夫で、指定通りに表示される
(但しなぜか先頭のCの字だけ書体が異なるバグあり)。
原因はposition:relativeを指定してある所為らしい。
float:leftを指定した<div>の中でpositioningをするとバグるのかな?
Macは一時的に借りただけなので追試ができない……。
【WinIE5.5〜6】 例は以下の通り。 h1 { background-color:silver; border:double 6px white; width:50%; margin:auto; text-align:center; } <h1>タイトル</h1> border-styleにdoubleを指定した場合、二重線の間の空白はborderを持つ 要素のbackground-color(上の例なら銀色)で充填されるのが通則なのだが、 同時にその適用要素にwidth乃至heightが指定してあると、適用さるべき background-colorを無視して、その親要素(body)の背景色で表示される。 上の例では二重線も白、bodyの背景色も(初期設定で)白、よって枠線が見えない状態になってしまふ。
330 :
Name_Not_Found :02/02/07 23:13 ID:3v6guWrv
誰かブラウザ別にここに出たバグまとめてくれないかなあ、アゲ。
【Opera6.01日本語版】 オペラでは a:link:hoverやa:link:activeをセレクタとして background-colorを指定してあると、hoberやactiveの状態にない 未訪問リンク(単なるa:link)にまでその背景色がつく等のバグがある。 Opera6.0ではa:link{background:transparent;}を指定しておくことで このバグを廻避できたのだが、Opera6.01日本語版ではこれも効き目が無い。 バージョンアップしてひどくなるなんて……しっかりしてくれよな、もう。
【IE6】 overflow: visible (初期値) の場合、 はみ出す内容はボックスの外にレンダリングされるべきが、 内容がはみ出さないサイズまでボックスの幅と高さが修正される。 さらに、 height または width 指定があると、 そのボックスの高さ算出においてフロートの子要素が除外されない。 また、フロートに後続するブロックボックスに height 指定があると そのボックスはフロートの幅を確保するように幅が短縮される。 以上まとめてサンプル。 <div style="border: 5px solid red; height:4em; overflow:visible;"> <div style="border: 5px solid blue; width:3em; float:right"> <div style="border: 5px solid green;width:6em; height:6em;"></div> </div> <div style="border: 5px solid orange;height:2em;"></div> </div> IE6 ってやっぱボックスモデルがヘン…
336 :
Name_Not_Found :02/02/21 01:53 ID:rT5Xdwle
【バグ】 fieldset 直下に input をおいた場合にのみ、input に form の margin が適用される。 【対象ブラウザ】 IE5、IE6 【ソース】 <html><head> <title>form fieldset input バグ [IE]</title> <style>form { margin: 100px; }</style> </head><body> <form action="バグ辞典スレ"> <fieldset><legend>隊長! input の margin がおかしいです!</legend> <input type="submit" name="bug" value="form の margin が適用される" /> </fieldset> </form> </body></html> 【回避方】 fieldset 直下に input をおかない。 ex) <fieldset><p><input 〜/></p></fieldset> 【備考】 input に先行する文字があれば一見回避できるように見えるが、 input の直前で改行されるとバグが再発する。 ex) br がなくてもブラウザによりおり返されても同じ<br /><input 〜/>
337 :
Name_Not_Found :02/02/25 00:51 ID:DiroaioK
さんくすあげ
338 :
Name_Not_Found :02/02/25 13:45 ID:szhb7hRE
<div style="background-color:blue">aiueo</div> IEでは、横一杯に背景が青くなります。 NN4では、文字の部分のみ背景が青くなります。 これはどちらの解釈が正しいのでしょうか。 例えば、IEのように横一杯に青くしたいのが作成者の理想だとします。 NNだとその通りにならないので、 <table bgcolor="blue" width="100%"><tr><td>aiueo</td></tr></table> を使うしかないと思うのですが、これは間違った使い方ですよね。
>>338 <div style="background-color:blue width:100%">aiueo</div>
じゃダメか?
>>338 NN4は実際問題、スタイルシートに対応してません。
>>2 のリンク先で色々勉強できますよ。
341 :
339 :02/02/25 13:54 ID:gH6I70B0
つーかスレ違い。 続きは質問スレで。
343 :
342 :02/02/25 14:09 ID:hB04mY3E
345 :
Name_Not_Found :02/02/27 03:35 ID:t48drw49
>344 overflow-xは?
347 :
Name_Not_Found :02/02/27 09:41 ID:t48drw49
>346 overflow-yの間違い。
>>344 ウチでは (Win2k+IE6) 標準モードで line-height:100% でも再現する。
互換モードならばこの問題は起きない模様。
line-height の初期値が normal でなく inherit になっていることが原因では?
だから 130% を 1.3 にすると算出値でなく指定値を継承する、と。
上がちょん切れる件はなんか
margin-top でも padding-top でも BR 要素でもいいから
body と h1 の間にすき間をあければレンダリングされるみたいだ(w
349 :
バイク犬 :02/02/28 22:00 ID:Ct4MpaYq
.style01 { font-size: 10pt;} のスタイルを設定してテーブルのTDに適用してるんですが <td class="style01"> Win NN4.6jaでプリントする際に、そのセルが縦一杯に拡がって 行ごとに改ページしてしまうことになってます。 よくある会社推奨ブラウザがNN4.6jaというクライアントなので どうにか回避せねばならぬのですが、お知恵お借りしたいです。 NN4.61enしか手に入らなかったのですが、現象は再現できないのです…
350 :
バイク犬 :02/02/28 22:02 ID:Ct4MpaYq
書くとこ間違えました…すまん
351 :
Name_Not_Found :02/03/02 00:41 ID:JqfpUdEO
>全くネスケ4って手を焼かせるな。早く亡くなって欲しい……。 その通りだ!
352 :
Name_Not_Found :02/03/09 02:35 ID:I26hAr3A
緊急あげ
しんど。
354 :
Name_Not_Found :02/03/12 05:43 ID:MpBoLfwu
結局、Operaを避けたいなら「@charset Shift_JIS」が一番簡単確実って事でOKすか?
>>355 どうもありがとう。ためになりました。
Operaって自分の中でN6ぐらいしっかりしたUAだって思い込みがあって
ノーマークだったんだけど、先日初めてOpera使ってみて愕然としました。
自分のスタイル付けが少し強引なのも原因なんでしょうが。
これで何とか公開前に対策が出来そうです。
358 :
Name_Not_Found :02/03/26 19:12 ID:UPjXP/9H
例のWinIEで下に行くほど左にズレていく問題について。 当方、Win98SE IE5.5SP2にて <blockquote><p>ほげ</p></blockquote> このマークアップに、 .text blockquote { margin: 0 1.5em; padding: 0.5em; border-left: 10px solid #366; font-style: normal; font-weight: normal; text-indent: 0; } .text blockquote p { margin: 0; padding: 0em 0em 0em 0.5em; text-indent: 0; } と指定したら発生。 border-left を blockquote p のセレクタの方に書いたら直った。 border プロパティが怪しいのかも知れない。
【WinIE6で発現】 [症状]h2 {border:1px solid red;}でなぜか上の線(border-top)のみ表示されない。 [原因]シートでbody{line-height:1.2;} と指定してあったのがいけないらしい。 bodyへの指定を削ってh2{line-height:120%;}としても発現する。 [対処法]line-height:1.1;とするとちゃんとborder-topも線が出た。 但しline-height:110%;やline-height:1.3〜1.9だと駄目。ワケワカラン。 またh2に適用するfont-size指定によっては発現しなくなる。 しかしその場合、表示する文字のサイズ(小とか)によっては再発する。よけいワケワカラン。 追試求む。
361 :
360 :02/03/30 12:17 ID:OOT4cE/s
間違った。書き直し 【WinIE6で発現】 [症状]h2 {border:1px solid red; position:relative;z-index:5;}で、なぜか上の線(border-top)のみ表示されない。 [原因]シートでbody{line-height:1.2;} と指定してあったのがいけないらしい。 bodyへの指定を削ってh2{line-height:120%;}としても発現する。 [対処法]line-height:1.1;とするとちゃんとborder-topも線が出た。 但しline-height:110%;やline-height:1.3〜1.9だと駄目。ワケワカラン。 またh2に適用するfont-size指定によっては発現しなくなる。 しかしその場合、表示する文字のサイズ(小とか)によっては再発する。よけいワケワカラン。 追試求む。
>>360-361 追試(同じくWinIE6で確認)
[症状]
子孫が「置換要素を除いたインライン要素」だけのブロックレベル要素に
line-height 及び position: relative を適用させると、
border-top の線が細くなり、場合によっては消える。
線はフォントサイズ(font-size 及びメニューの 表示 > 文字のサイズ)と
line-height の値が大きいほど細くなるようだ。
[対処法]
子孫としてブロックレベル要素か置換要素を含めればいいので、
<div><p>本文</p></div> のようにマークアップし、
border と position: relative を div に適用させるのが手っ取り早い。
また、line-height の値が1.1以下ならば確認できなかった。
363 :
Name_Not_Found :02/04/01 02:02 ID:T4y5iaVt
【ie6】 overflowでの擬似フレームで上中下に分割し、尚且つ中列を左右に分割。 中列右のみ overflow:auto; とし、 body及び残りを overflow: hidden; にしました。 友人から、中列右の overflow:auto; が効いていないと言われたのですが、 暇で暇でどうしようもない方試してくださりませ。
>>363 それだけだとよくわからない。
HTMLとCSSのソース全部晒してくれたら追試してもいいよ。
あぼーん
366 :
Name_Not_Found :02/04/10 15:01 ID:E9XDl2IE
大塚玲
>>366 お疲れさまです。
早速ブクマークしたよ。ありがとう。
370 :
360 :02/04/10 18:47 ID:K82aANPI
>>366 地道にまとめてたオイラって一体・・・。
しかも構成まで同じぽ。やるね、チミィ。
>>371 それはそれで別に進めておくれ。
まだ
>>366 のサイトにも採られてないバグ報告がこのスレッドにはあるのだし。
実例をブラウザで表示確認できる仕組みにするともっといいやね。
期待します。
374 :
Name_Not_Found :02/04/14 19:16 ID:jlaBYmNj
WIN IE5.5なんだけど、 a:hover img {foo:bar} が利かないのは、バグと見做して良い?
>>374 よくない。
A:link IMG, A:visited IMG {border:none;}
A:hover IMG {border:1px solid #f33;}
これでちゃんと効くよ。
何か間違ったことやってない? プロパティはなに?
376 :
374 :02/04/14 22:24 ID:jlaBYmNj
>>375 本当に利く?borderだから、375の例そのままだよ。
mozillaで利いてて、IE5.5で利かないからそう思ったんだけど。
>>375 効くったら効く。(「利く」に非ず)
他のスタイル指定を全部コメントアウトして試してみた?
なんか他のスタイルとの悪い組合せをやってるんでないかい。
もっと詳しくソースを出してくれんと判断できんよ。
379 :
374 :02/04/15 01:00 ID:CCT5IDWt
やっぱり利かない。だからバグとは言える。 でもhoverにborder利かすだけなら、こんなことしなくても良いんだね。 アホ過ぎた。 a img {border:none;} a {border:none;} a:hover {border:#aabbcc 1px solid;} で、良い訳か。
380 :
374 :02/04/15 01:11 ID:CCT5IDWt
>>378 <p>
<a href="
http:// 〜"><img src="foo.png"></a>
</p>
に hover で border を利かそうとしていたんだけど、本当に利く?
私の
>>379 がそういう風に見えるだけだと思うんだけど。
>>379 だからさ、言いきる前に両方のソース出してみれ。
自分でアホだとわかってるんならなおさら。
おぬしwwwじゃな
383 :
Name_Not_Found :02/04/17 12:11 ID:MtOjIZVZ
やはりホームページ制作王は必須ソフトですね。 美しいソースを吐き出すし、バグとも無縁ですから。
384 :
Name_Not_Found :02/04/22 00:32 ID:vg3fVgMO
MacIE5でulに対してmargin:autoが効かないバグがあったと思うんだけど、 5.1.4で直ったかもしれない・・・
385 :
366 :02/04/23 02:45 ID:uege4AnJ
WinIEの詳細版完成。と思ったら追加という罠? >374-381 あとはMacIE、Moz、N4、O6か…4月中に完成できるかなぁ? 完成したらダウソ用アーカイブも置く予定です。 >369
>>385 >親要素を持つ要素への top の % 値指定が無効になる(N6.2)
ってあるけど、topの%値は親のheightを参照するのね。
heightが明示されてなければ、%は無効になるのが正しいような。
387 :
366 :02/04/28 00:19 ID:4YUQteJL
388 :
Name_Not_Found :02/04/29 11:00 ID:EV+g916q
<!--[if gte IE 5.5000 ]> <![endif]--> として、外部シート内でも @media screen { } と囲ってもMacIEではおかしくなると過去ログにありましたが、 実際のところはどうなんでしょうか?
>>388 >>317 のハナシですね。
MacIE5.x では、
<!--[if gte IE 5.5000 ]>...<![endif]--> や
<!--[if gte IE 5 ]>...<![endif]--> なんてのは
どうあっても理解しないはず。ゆえに普通にコメントアウトとしたのと
同じなワケで、これで囲われた部分は解釈・適用されないっす。
@media 何か {...} で囲われた部分ついても、ご存じのように
どーあっても解釈・適用されません。されたトコを見たことがない。
なにか記述ミスをしてて、MacIE5 回避状態になってなかったんじゃ
ないんでしょーか。というか、一部だけにしろこのあたりを認識・適用
されるケースがもしあったとしたなら、どう記述したらなのか、知りたいかも。
つまり、ソースキボンヌ、と。縦書きプロパティなんてモンは知らないので、書けません。
追伸。MacIE5 の CSS 解釈は、一部の既知のバグをのぞけば
だいたい素直〜な解釈をする、イイコチャンですよ。
あ、そういえば。 外部 CSS と Shift_JIS で書いてて、 たとえばコメント /* ... */ 内とかで特定の漢字(たとえば「表示」)を使うと その直後あたりのセレクタ等が認識されないことがあります。 SJIS の Perl Script で「表示」は「表\示」ってエスケープしないと エラーでて動かないですけど、まさにあれに似たフィーリング。 でもたいがいは発生しないス。でも、発生するときはマジに発生。すごく謎。
× 外部 CSS と Shift_JIS で書いてて、 ○ 外部 CSS を Shift_JIS で書いてて、
392 :
317 :02/05/03 13:51 ID:gdnvBdUm
>>389 >というか、一部だけにしろこのあたりを認識・適用
>されるケースがもしあったとしたなら、どう記述したらなのか、知りたいかも。
>>317 です。
その後いろいろ弄ってたら直りました。MacIEでも廻避されます。
しかし原因は未だに謎。どこが悪かったのか……。
追試はしてませんが、
<STYLE type="text/css"><!-- --></STYLE>
をJavaScriptの場合と混同して
<STYLE type="text/css"><!-- //--></STYLE>
と書いてある、他との組合せによってはバグるのかも。
>追伸。MacIE5 の CSS 解釈は、一部の既知のバグをのぞけば
>だいたい素直〜な解釈をする、イイコチャンですよ。
私はMacIEの理不尽なバグっぷりに悩まされ続けてるので、
これには同意できません。
393 :
317 :02/05/03 13:54 ID:gdnvBdUm
>>392 の訂正。
誤>と書いてある、
正>と書いてあると、
>>392 > 私はMacIEの理不尽なバグっぷりに悩まされ続けてるので、
> これには同意できません。
たぶん、Winの各種ブラウザに比べればまだまし、という意味だと思った。
当方Win98。
まぁ、Winユザからしたら、マクブラウザに触れる機会なんて 皆無でしょうし、自サイトの表示チェックもままならないわけで。 その数少ない表示チェックの機会に、思いもよらない表示崩れを 見つけたらカチンときますやね。修正したとしてもすぐ確認とれないし。 んだからボク他のマクIE萌えなCSS野郎は、どんどん情報を出して、 だけど日記にだらだら書くだけでなくて、ちゃんとまとめておかないとなぁ。 「CSSバグリスト@CSSバグ辞典スレッド」の役にも立たないと。
おながいします。Macを自由に使える環境のみなさん。
漢字Talkならあるが…(w
399 :
366 :02/05/07 05:56 ID:wUn9ZRhP
一通りできました。後は要望待ちということで。 アーカイブも作りました。MacやUnixなどでも対応できる形式が よくわからないのでとりあえず3種類(lzh/zip/tar.gz)置きました。 うちでもブラウザ5つで対応しているとはいえ、MacIEやWinIE5.xの 情報はうちでは調べられないのでみなさんよろしくお願いします。
>>366 お疲れさま
MacIEの詳細版「CSS内にbrをセレクタ使用すると配置が狂う」で
>本来CSSのセレクタとして使用してはならない「br」
とあるけど少なくともCSS2でそんなことはないです。
CSS1でもbrの挙動をCSS1のプロパティだけではコントロールできない
と言ってるだけだった気がします。
401 :
366 :02/05/07 22:44 ID:wUn9ZRhP
>>400 そうでした。CSS2仕様書付記にあるHTML4.0のCSS例には
> BR:before { content: "\A" }
というものがありました。別に使えないわけではないようで。
結局、例の件はbr要素をブロック要素として表示させようとする
行為がMacIEでバグを引き起こすということでいいでしょうか?
402 :
400 :02/05/08 10:01 ID:MzOQacAc
>>401 そういう事だと思います。
Mac無いのでdisplay:block以外のスタイルが
brでどうなるのかはわからんですけども。
>>366 いま MacIE5.1.4 (OSX) で見てみたですが
>br要素に対してスタイルを設定すると、表内の文字列が閲覧領域外へ消えてしまう。
という現象は出てないようです。Mozilla RC1 と変わらない表示。
>403 あれ? 169では display: block; が原因だと書いてあったんだけどなぁ。 162にあったURIはもう404だったからソースがよくわからないので、 とりあえずできるだけ簡単なソースにしてみたのですが。 IE5.0/5.1の違いとか、標準/互換モードの違いなどが関わっているのかも?
>>404 ・MacIE 4.51 (OS9)
・MacIE 5.0 (OS9)
・MacIE 5.1 (OS9/OSX)
それぞれについて、
br { display: block; }
<table>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
<tr><td>E</td><td>F</td></tr>
</table>
を、Quirks/Standard 両モードで試してみたですが
文字が消える現象は起きませんでした。
>>162 にある URL のページでは、何か複合的な要因で文字が消えた
んじゃないのかなぁ…。
上記ページでは特にフォントサイズが変わるということはなかったです。 キーワード(smallとかmediumとか)指定の時は、DOCTYPEスイッチで 変わりますやね。でも相対値指定(%とか)のときに、 その基準サイズが変わることは、WinIE6/MacIE5共にないはずです。
410 :
◆CSS.J95U :02/05/10 08:08 ID:FYqLK/6Y
>>409 やはりそうでしたか…。ここも修正ですな。
ちなみに、408に挙げたページをWinIE6で見ると、標準/互換で
h1要素(背景が橙色)のボックス幅が違って見えます。
マージンに負の値を指定するなどしてbody要素のボックスからはみ出させた
場合、標準モードでは、はみ出た部分が表示されないようです。
これがWinIEのバグ57(
>>344 )の原因でしょうか?
<style type="text/css">
body {
margin: 50px;
border: 2px solid blue;
}
h1 {
margin: -20px;
border: 2px solid red;
font-size: 50px;
text-align: center;
}
</style>
<body>
<h1>ああ</h1>
</body>
保守sage
413 :
Name_Not_Found :02/05/25 20:34 ID:mpsYxtaT
Moz RC3で確認しますた。 width を em 指定した要素を position: fixed した場合。 ブラウザでテキストサイズ変更したとき width も伸縮するが、 これがリロードするまで反映されない。 また、 fixed した要素内の a 要素の letter-spacing を ダイナミック擬似クラスでいじくると、 要素全体がぷるぷると暴れる。
>>413 >fixed した要素内の a 要素の letter-spacing を
>ダイナミック擬似クラスでいじくると、
>要素全体がぷるぷると暴れる。
それは正常な動作では?
>>414 ごめん、width も指定してある。
ちなみに、a 要素以外の場合(li : hover など)は正常。
416 :
Name_Not_Found :02/05/26 22:19 ID:hAR7QKpr
<DT>が2つ並んでるときに<DT>にdisplay : inline; を指定するとネスケ4.7で 2つが重なってしまうんですが、回避方法はありますか?
>>417 なるほど。確認しますた。
検証までしてくださって有難いです。
>>417 MacOSX 版の Moz RC3 だとブルブルしなかったです。
今更IE4.01だけど、<HR>のバグ。 <hr>の右のパディングのサイズがその前で最後にタグに指定した右のパディングの値となってしまいます。 自分で書いててわからんので実例。 <p style="padding-right:100px;">次のHRの右のpaddingが100pxになります。</p> <hr> 回避策はpaddingを使った後でborderを入れること。 わからん日本語より実例。 <p style="padding:50px;">次のHRの右のpaddingが50pxになります。</p> <div style="border:0px;">こうするとバグ回避できます。</div> <hr> ちなみに、何か表示されないとバグったまま。 <p style="padding:200px;">↓ではダメ。</p> <div style="border:0px;"></div> <hr> もしかして、ver1.0でガイシュツ?
421 :
420 :02/06/07 00:21 ID:3avgT1FE
もっとよくしらべたら、<hr>でなくてもどんなタグがあとに来てもなるんだな。 コレ。 きっと、ガイシュツ中のガイシュツなバグなんだろーな。 あと、解決法は、paddingを指定した次のタグに style="border:none"とかテキトーにいれておけばいいみたい。 普通にborderを設定するときはそれでいいとして。
Mozilla 1.0RC3 Win32 パディングとマージンを同時にゼロにするとボックス間に隙間が出来てしまいます。 以下実例 <STYLE type="text/css"> DIV.header{ background:red; padding:0px; margin:0px; } DIV.body{ padding:0px margin:0px; background:orange; } DIV.footer{ padding:0px; margin:0px; background:olive; } </STYLE> <BODY> <DIV class="header">↓隙間が出来ます。</DIV> <DIV class="body"><P>↑隙間がイヤです↓</DIV> <DIV class="footer">↑隙間が出来ます。</DIV> </BODY> div要素の中身に直接(P要素の外に)なんか書いてやると大丈夫なようです。 366氏のサイトにないので書いてみましたが、ガイシュツだったらゴメンナサイ。
あ、そういうもんなんですか? 仕様も読んでない厨なので・・・
425 :
422 :02/06/08 19:39 ID:jKhiESb+
今確認してみましたが、P{margin:0px}でも同じ結果です。 IE6では隙間がないのですがこっちが正しいのではないでしょうか?
426 :
Name_Not_Found :02/06/08 21:20 ID:cDl5kkdn
427 :
426 :02/06/08 21:26 ID:cDl5kkdn
あ、関係ねえ話だった。 Mozilla1.0は問題ないけどなぁ。
>>422 IE6だとdiv.bodyの上だけに隙間、
Mozilla1.0、Opera6.1だと上下に隙間が出来た。
pはmargin、padding共に0。
なんでだろーなんでだろー
430 :
Name_Not_Found :02/06/12 12:04 ID:GdMH++AQ
【Netscape7, Opera6, MacIE5】 ナビゲーション・バーのソースから抽出します。 .navbar {width:100%;/*横スクロール発生防止*/} .navbar td {text-align:right;} .navbar a:link, .navbar a:visited {white-space:nowrap;} <div class="navbar"> <table width="100%" title="navigation bar" summary="navigation bar"> <tr> <th>目次</th> <td> <a href="./index.html">表紙</a>▼<a href="./sitemap.htm">サイトマップ</a>▼<a href="./chap1.htm">第一章</a>▼<a href="./chap2.htm">第二章</a>▼<a […中略…] href="./link1.htm">リンク集</a>▼<a href="./profile.htm">自己紹介</a>▼<a href="./bbs.htm">掲示板</a>▼<a href="mailto:〜" title="電子メール">お便り</a> </td> </tr> </table> </div> これでnowrapの効き目によって、リンク文字列がウィンドウ右端にきても 文字列の途中で折り返されたり横スクロールが発生したりすることなく、 「▼」のところでだけ折返しが生じるはず。 実際、WinIE6やNetscape6では意図通りうまくゆきました。 しかしOperaやMacIEはまともに解釈してくれません。 しかもNetscape6は大丈夫だったのにNetscape7ではなぜか駄目に。 tableがウィンドウ幅の100%以内に納まらず、右へ延長されます。 しかも横スクロールすら出ないので、ウィンドウ幅を狭くして閲覧中だと ナビゲーション・バーの右端の項目が全く見られなくなるわけです。 バージョンが進んだら却ってバグるってのは困り者です。 それとも私のソースの書き方に問題がありますか。 解決法があればどうかご教示下さい。
>>430 まずテーブルでマークアップしてるところが問題なんだけど、
とりあえず、
<a href="">表紙</a> <!--ここにスペース入れたらどうか--> ▼ <!--ここも。又は改行-->
<a href="">〜
これでOperaは解決すると思う。Mac環境はないので未確認。
あと、N7で駄目とのことだけど、Moz1.0では問題なかった。
正式版では直るかも。
432 :
430 :02/06/12 13:22 ID:wLAdmpoX
>>431 テーブルでマークアップしてるのはNN4対策で、仕方ないのです。
Opera対策、有り難う。
でもスペースを入れると少し間が空くのを我慢せねばなりませんね。
当面、下記の通りにしてOperaを廻避。
@media screen,tv {/*=除 MacIE5 & Opera=*/
.navbar a:link, .navbar a:visited {white-space:nowrap}
}
433 :
430 :02/06/12 14:19 ID:wLAdmpoX
434 :
Name_Not_Found :02/06/12 14:44 ID:pw8mmVKW
『『CSSバグ辞典スレッド』の要約』
http://members.tripod.co.jp/cssbug/detail/winie/b044.html >症状
>CSSで縦書き表示を行っている要素内でルビを使用した場合に、
>ルビ文字とその前後の行の文字とが重なってしまう。
↑これ、正確でないよ。
原典である
>>244 には「ルビ文字(RT要素)内でタグづけしてあると」って条件がついてる。
ただのルビだけなら初めから問題無いわけですよ。
>>366 さんがまとめてくれたのは本当に有り難いけれども、
ときどき不正確な要約が見かけられたり
レスでバグではなく誤解とわかったものもそのまま載せてあったりしてるので、
その辺を直してくれると嬉しい。
面倒ならば、原典(このスレッド)の出所のレス番号にリンク張っておくとか。
そしたら利用者が自分の目で見て判断できますやね。
過去ログ読んだ&ググたですが、よくわからんかったノデ。ガイシュツだったらスマソ
ネスケ6+で、letter-spacingを指定すると
長音符のあとの字がかぶってしまう(?)のってバグですか?
→
http://hfo.tripod.co.jp/nn.html (こんなかんじ)
単位(em, etc)とか、ほかにどんなcssを使っているかには関係なく
バグります。Win, Mac両方のNN6.2(XP, OS9)で確認しますた。
436 :
Name_Not_Found :02/06/12 15:56 ID:xYiYtw+c
>>435 それはひどい。
できればその部分の詳しいソースを出してください。
ちなみに類似例として――
NS6にて、text-align:justifyを適用した要素中では、
太字指定(font-weight:bold;、<B>、<STRONG>)した部分が
次の文字と重なって表示される。
437 :
435 :02/06/12 16:05 ID:O3cBGMLk
さっきのtripodのページに、サンプルをつくってみますた。 いいかげんでスマソ。。
438 :
Name_Not_Found :02/06/12 16:18 ID:xYiYtw+c
439 :
435 :02/06/12 16:23 ID:O3cBGMLk
今サンプル作りますた。。遅くてスマソ(汗
>>438 ありがとう。ということは、ヤパーリバグですか? ウチュ、、
440 :
Name_Not_Found :02/06/13 01:30 ID:EF004RGv
マクでNetscape6は、line-height をemで指定してもすごいことになる……
441 :
430 :02/06/15 17:15 ID:ERAx1ae5
>>431 >あと、N7で駄目とのことだけど、Moz1.0では問題なかった。
今日、Mozilla 1.0をインストールして試験してみたら、Netscape 7同様、
Mozilla 1.0でも
>>430 で述べた症状が出ましたが。
442 :
cssビギナー :02/06/16 00:16 ID:1Kk3krHj
こんにちは。こないだは多謝ですた。。また悩みがふえたので、カキコんでみます。
過去ログ&ググしたのですがガイシュツだったらゴメンナサイ;p
Windows IE6 で letter-spacing を設定すると、
改行を二個 <br><br> と入れても
1コぶんしか反映されないんですが、、これってバグですか?(汗
3コだと2コぶん、4コだと3コぶんというふうに、1コどこかに消えてしまうです。。
ひとつだけ <br> とした場合は、ちゃんと改行されるのデスが。
うまくいえないので、またサンプルをつくってみますた。
→
http://hfo.tripod.co.jp/ie.html よろぢくおながいします。。。では、よい週末を:D
かきわすれ、、サンプルのページは、スクリーンショトのせいでチョト重いです。。スマソ
444 :
Name_Not_Found :02/06/16 00:45 ID:7rb6emdW
>>442 おお、新たなバグですね。発見の栄誉は君に。
でも、ふつうCSS上級者は<br>を使用するのをなるべく避けるので、
それでいままで気づかれず、バグ報告が無かったわけではないかと推量されます。
445 :
442 :02/06/16 00:52 ID:lV/e79nn
>>444 まじですか、どうもありがとうデス(w
でも、<br>を使わない、、2連ぐらいもダメですか、コマタな、どうすりば。。。
などと言ってスレちがいですね、逝ってキマス。
>>445 <br>ではなく、<p>か<div>でマークアップすべし。
または1行空けしたいだけならCSSでmargin:1em;でよいのでは。
448 :
442 :02/06/16 01:10 ID:lV/e79nn
>>446 なるほど、どうもありがとうデス。もっとベンキョします。
>>447 ガイシュツごめんなさい。cgiで\n\n を<br><br>に
してたので、すごくうれしいです。どうもありがとうデス。おさわがせしますた。。
449 :
430 :02/06/16 13:53 ID:34nwfA5h
ごめんなさい、
>>430 は間違ってました。
white-spaceプロパティはブロックレベル要素にしか適用できないのでした。
まあそれにしても、a要素に適用させたwはずのhite-space:nowrap;が、
それを包含するtd要素に効いてしまったってのはやはりヘンだけど。
>>449 > white-spaceプロパティはブロックレベル要素にしか適用できない
\|/
/⌒ヽ / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
| ゜Θ゜) < そうでもないよ。
| ∵ つ \___________
| ∵ |
\_/
errataより
> [2001-08-28]
> The 'white-space' property applies to all elements,
> not just block-level elements.
451 :
430 :02/06/16 21:40 ID:hzoswU9c
>>451 これは、tdに効いてると言うより
aに隣接するインライン要素との境界で
改行しなくなってる
<span>あああああ</span>
<a href="#" style="white-space:nowrap">りんく</a>
<span>あああああ<span>
↑が↓こうなる
ああああ
ありんくあ
ああああ
>>452 要するにMozillaは、2バイト文字=東アジア言語の取扱に難があるってことか?
日本語に対応したてのOpera6なんかその点はもっと色々なバグになって現れてたな。
所詮、毛唐の作る物だからな。
アイタタ...
日本語フォントで不具合を起こす
>>186 みたいな例もあることだし、
Mozillaが2バイト文字に弱点を持つのは事実ではないか。
456 :
Name_Not_Found :02/06/23 13:47 ID:Vl3fgrVC
Mozilla 1.0 (Win2K) で
position : fixed; なブロックが
印刷時に丸ごと消え去るっす
--
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml " xml:lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="moztest.css" />
<title>Mozillaの印刷テスト用</title>
</head>
<body>
<div id="fixblock">
<p>Fixedさせたブロック</p>
</div>
<div id="doc">
<dl>
<dt>適用させたmoztest.cssの中身</dt>
<dd><pre>
@charset : 'Shift_JIS';
html {
width : 100%;
height : 100%;
}
html, html * {
margin : 0;
border : 0;
padding : 0;
}
dt {
font-weight : bold;
}
pre {
border : 1px solid green;
padding : 1em;
}
#fixblock {
border : 1px dotted red;
position : fixed;
top : 0;
left : 0;
width : 10em;
height : 100%;
z-index : 2;
}
#doc {
padding-left: 11em;
position : relative;
z-index : 1;
}
</pre></dd>
</dl>
</div>
</body>
</html>
MacのIE5でエンベディングスタイルシートにしたline-heightが効いてない リンキングの方は効いてるようだ
>>458 もう少し状況を詳しく。再現条件がつかめない。
458は逆でした。Macを触る機会があり色々と試したところ
BODY,P,TD,クラス名等でのline-heightについてこの結果が出ました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd ">
指定の標準モードで見た場合の結果です。
・リンキング
<LINK rel="stylesheet" type="text/css" href="ファイル名.css">とした時
MacIE5.0では、px、pt指定のみ有効。130%,1.3em等の相対指定は無効
MacNN4.79では px、pt指定有効。130%,1.3em等の相対指定 共に有効
・エンベディング
<STYLE type="text/css">
<!--
** { line-height: ***; }
-->
</STYLE>
MacIE5.0では、px、pt指定のみ有効。130%,1.3em等の相対指定は無効
MacNN4.79では px、pt指定有効。130%,1.3em等の相対指定 共に有効
なんと、NN(Javaオン、スタイルシートオン)の方が安定した表示が得られてしまいました。
上記の「無効」はサイトによっては効いているところもあるように見え
検証をお願いしたいところです。
463 :
462 :02/06/27 17:45 ID:PcWBRdqL
コピペ間違いしました……エンベディングの方、正しくは MacIE5.0では、px、pt指定、130%,1.3em等の相対指定共に有効 です。
464 :
Name_Not_Found :02/06/27 17:47 ID:Ons7HXMM
>>462 やっぱりMacIEって理不尽なバグが多いのか……。
>>462-464 MacIE5.0 (OS9), 5.1.4 (OS9), 5.2 (OSX) あたりで検証してみたです。
やっぱり、 リンキングだろがエンベッドだろが
%, em 指定の line-height は普通に効いて反映しますヨ。
えーと、Osaka フォント自体が持つ特性なんだか MacIE のデフォスタイルなんだか
わかりませんが(ほかのアプリとかから受ける感覚的印象では前者)
line-height 無指定時と 130% (1.3em) は、ほぼ同じ行間があるように見えます。
だから無効のように見えただけなののでわ?
line-height: 1em とか 100% とかすると、明らかに行間が詰まります。
「理不尽なバグ」の嫌疑は晴れましたか。
あでも、リンキングとエンベッドで line-height: 130% の表示に違いがでるのはヘンか…。 謎。エラソに語ってスマソ
>>466 当方の検証でリンキングとエンベッドに表示の違いが出た、という
イミではありません。
でもって、表示フォントが Osaka の時の line-height 無指定は、
だいたい line-height: 125% くらいになる模様デス。
ヒラギノ系フォントだと、無指定 と line-height:100% が同じになるですよ。
468 :
Name_Not_Found :02/06/28 14:50 ID:Jlw92Hms
もともとOsakaフォントは適度に行間があく。 だから無指定でもそれなりに読めるんだよ、Macは。 ただそれはIEでもNNでも一緒だ。表示フォントをOsakaに指定していれば。 >line-height 無指定時と 130% (1.3em) は、ほぼ同じ行間があるように見えます。 せいぜい105〜110%くらいに見えるんだが……? ポンと隙間が空いているって思うほどには開いていないよ。
469 :
Name_Not_Found :02/06/30 14:01 ID:rONWtj8S
ガイシュツだったらすいせん。 mac OS X, 9.2.2でNN6.2ではどうしてもセルに間があいてしまいます。 スライスした画像をつなげて表示したいのです。 ドリ4を使用しております。以下のようにしていますがどこに問題あり でしょうか?NN4.4, IE5だと問題なしです。 <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="hoge.html"><img src="hoge1.gif" width="150" height="20" alt=""></a></td> </tr> <tr> <td><a href="hoge.html"><img src="hoge2.gif" width="150" height="20" alt=""></a></td> </tr> </table>
>>469 <tr>〜</tr>を改行無しで書いてみるとか。つか、スレ違い。
471 :
権兵衛 :02/06/30 15:19 ID:???
472 :
469 :02/06/30 17:15 ID:rONWtj8S
>470 NN3では</TD>の前で改行すると反映されちゃってましたよね。 すれ違いスマソ。 >471 ドリのDOCTYPEを標準モードに書き換えてました。 CSSでimgにvertical-alignして解決しました。どうもありがとうございました。
473 :
Name_Not_Found :02/07/14 10:45 ID:nd0I0SZz
保守
一周年してるんだ、このスレ。あー、勉強しなきゃ
保守
476 :
Name_Not_Found :02/08/14 22:12 ID:O+o2Ju+M
保守 & 報告 【ブラウザ】 mozilla 1.0 【状況】 <label for="hoge">hoge</label><input id="hoge" /> のようなHTMLで label{display:block} を指定しても、ブロック要素にならない。 DTDはXHTML1.0 transitional。
>テーブルの画像にはスキマが空くのがCSSの仕様。 その行にテキストが一つもなく全部画像なら 「ベースライン=下辺」だ。 mozillaに合わせて勝手に仕様を読みかえるな
>>477 imgはインライン要素だから匿名行ボックスが作られる。
IEに合わせて仕様を捏造するな。
行ボックスじゃなかったインラインボックスだ
「Netscape7.0の評価」より転載します。
http://pc3.2ch.net/test/read.cgi/hp/1022394916/136 136 :Name_Not_Found :02/08/30 19:39 ID:???
CSS使っているんだけどね。
HRにCLASS属性を与えているときにWIDTHを指定しないと表示されない場合があった。
同じページで別の場所では問題なく表示されていた。
<TABLE CLASS="**">
<TR><TD><HR CLASS="abc"></TD></TR>
<TR><TD>aaaaa普通の文書aaaaa</TD></TR>
<TR><TD><HR CLASS="abc"></TD></TR>
</TABLE>
CSS内では、
.abc{HEIGHT:5PX}
こんな感じで上のHRが表示されず。CSS内でWIDTH:**px入れたら上手くいった。
6.0〜7.0b、4.7、Opera、IEでは問題なし。
他のスタイルシートに干渉されたのかどうかはまだ追求していない。
483 :
Name_Not_Found :02/09/16 06:58 ID:uh5MZl2F
【WinIE5〜6】 BODY { border-width:0 4px; border-color:#007; border-style:dotted;/*IEはsolidになる*/ } 適用対称がbody要素だと、border-styleに何を指定してもsolidとして表示されます。
それは要素によって都合よくdottedになったりならなかったりしてもいいって意味なの? なんか違う気がするんだけど
確かに変な実装だけど、バグとはちょっと違う気がする。
仕様で許容されている動作ではあるけれど、不自然だなあ、ということでどうかひとつ。>483
じゃあ仕様違反ではないらしいけど気持ち悪いし不便だから 対応してくれると嬉しいなあ、とこちらも物腰低くお願いしてみよう。 ってスレ違いか
489 :
Name_Not_Found :02/09/17 01:39 ID:QA/Ey7vn
【Netscape 6〜7】 text-align:justifyを適用した要素中で、 太字指定(font-weight:bold;、<B>、<STRONG>)した部分が 次の文字と重なって表示される。
492 :
Name_Not_Found :02/09/21 15:43 ID:cQXCmF5a
fixedを指定しない場合とも挙動が違うのは明らかにバグだろ まったく無視するならバグとはいえないかもしれんが
Opera6 (Win32, Ver6.05日本語版で確認) 左右マージン: autoでブロックレベル要素を センタリング(てか、左右マージンは片方だけでも有効になった)すると、 上下マージンの指定値を無視して一定?のマージンが空く。
497 :
494 :02/09/22 23:24 ID:???
>>495-496 個別に指定すると直ったので確かに一括指定のバグっぽい。
ただ、これはmargin-top/bottomが数値指定でも起こったので
margin一括指定の中に1つでもautoがあるとマズいのではないかと。
498 :
Name_Not_Found :02/09/23 00:21 ID:S8Vs6Y3Z
499 :
Name_Not_Found :02/09/24 17:55 ID:cp+CC8fc
[MacIE5]
DEL {text-decoration:line-through; color:#999; font-weight:400 !important;}
<dt><a href="index.html">
ttp://index.<del datetime="">s</del>html</a></dt>
なぜかdel要素だけでなくa要素全体がcolor:#999;になる罠。
500バグ
>>499 Quirks Mode では確かにそうなりますね。ところが
Standards Mode では正しく解釈する(del の s だけに色がつく)よーです。
よくわからんスイッチだなぁ…。
del, ins だけでなく、 a 要素が内包することができる要素なら ほとんどそうなるっぽい。 [MacIE5] a 要素全体の文字色に内包子要素の文字色が反映する a { color: blue } del, ins, abbr, acronym, bdo, big, cite, code, dfn, em, img, kbd, object, q, ruby, samp, small, span, strong, sub, sup, var,font, b, i, u, s, strike, tt { color: red } <a>A<del>B</del></a> <a>A<ins>B</ins></a> <a>A<abbr>B</abbr></a> : a 要素中に文字色を指定されたインライン要素が内包されている場合、 その文字色が a 要素全体の文字色として反映されてしまう。 ただしこれは、 Quirks Mode となる DOCTYPE を宣言してる場合で、 Standards Mode となる DOCTYPE を宣言している場合は正しく処理される。
MacIEはわかわからんバグが多いよねぇ。 CSSでないけど、rubyタグなんて普通にしてもバグりまくり。 ・昔<RUBY><RB>気質</RB><RP>(</RP><RT>かたぎ</RT><RP>)</RP></RUBY>の ↑これだと、ルビ(RT要素)がRB要素から離れたとんでもない所に表示される。 ・昔<RUBY><RB>気質</RB><RP>(</RP><RT>かたぎ?</RT><RP>)</RP></RUBY>の ↑なぜか一字よけいに足すととちゃんとした位置にルビが振られる。 実はパソコンショップのiMacで見ただけで、MacIE持ってないので追試できないが。 うまいことCSSで制禦する手は……無いか、やっぱり。
<rb> の表示位置が行末とかに来てて、自動折り返しされちゃったり すると、よく <rt> があさっての場所に出たりしますやね。 ま、しょうがないなと生暖かく微笑んでマス。
505 :
Name_Not_Found :02/09/25 04:27 ID:QQBwgMoA
>>498 いや、それはバグが解決したわけじゃないだろ。
実際は、100%継承して小さいサイズを表示しようとしているけど、
「最小フォントサイズ」の指定の方が大きいから
結果的に同じ大きさで表示されているだけだよ。
試しに「通常のドキュメント」の標準フォントサイズと「最小フォントサイズ」を
いろんな組み合わせで設定してみればわかる。
Netscape 4.75 ブロック要素に対して,marginとborderを同時に指定すると, 親要素や,ブラウザのフォント関連のスタイルを無視する. Mac版ではmargin,borderの他にフォント関連のスタイルを明示すれば回避できるが, Linux版では無理っぽい. 困った.
508 :
Name_Not_Found :02/09/25 16:32 ID:K18QS6w1
>>509 いまさらネスケなんぞ相手にしなさんな。
あれはどうやってもバグだらけで何ともならんよ
509 :
Name_Not_Found :02/09/25 17:13 ID:p3jj2gaD
どうやってもだめということもない
ところでMacIE4も、ネットスケープ4並みにCSSバグがひどいね。 画像をセンタリングさせるだけでまともに見られなくなったよ。 ユーザーは早くver5に移行して下さい!
MacIE4ユーザーって、幻に近いような…
>>511 MacIE4.5ならそんな珍しくない。結構来るよ。
4.5も結構バグが多いみたいなんだな、これが。
同じMacIE5.0でもOS9だとバグって、OSXなら大丈夫だったりすることがあった。
トリップキーが1文字欠けてた…
また間違えたし (つД`)
>>513 >こちらでは両端揃えにしただけで長音記号が重なってしまったんです。
でしたら、
>>491 は別のバグとして登録しておいてくれませんか。
518 :
Name_Not_Found :02/09/26 10:23 ID:9Tx8HlGi
リンク文字を A:HOVER{COLOR:色番号; position:relative; top:1px; } てな感じで1px下にひょこっと動かしてるんですけど リンク文字だけでなくて同じページ内のボタンやバナー等もいっしょに へこへこ動いちゃいます! どうしたらよいのですか?これってもしかしてバグですか?
>>518 ちゃんと質問スレに回答があるのにこんなとこに
「バグ?」とか言ってマルチしてんじゃねぇよヴォケが!!
当然の動作だ、アフォ!
520 :
:02/09/26 21:42 ID:???
>517 いいページなんだけどなぜスクロールバーいじりますか…
522 :
Name_Not_Found :02/09/27 08:00 ID:r0QthFZv
【Netscape7】優先シートのdisplay:none;指定が代替シートでも有効になる。 優先シートdefault.cssに“hr {display:none;}”と指定した。 これを、表示>スタイルを使用>で代替シートalternative1.cssに切替。 するとdefault.cssの他の指定は引き継がないのに なぜかdisplay:none;の指定だけは引き継いで、水平線(hr要素)が消えてしまった。 問題はdisplayプロパティだけで、それ以外のプロパティの指定は引き継がれない。 また要素はhrに限らず、全要素への指定でこのバグが生じる様子。 解決法としては―― alternative1.cssに“hr {display:block !important;}”と指定してみたが これもなぜか効かない。いまのところどうにもならない。
DW4でスタイルシートの疑似クラスで リンク表示の設定で link,hover,visitedの3通りの設定をしたんですが、 hoverの設定の効果が全く表れません。 どういう理由が考えられますか? ちなみに、hoverの設定だけをすれば、 マウスを重ねた時、設定したとおりの効果が表れたのですが...
>>523 たぶん、CSS内での記述順の問題
3つの中でhoverが一番最後になってるか?
526 :
523 :02/09/27 11:20 ID:???
>>524 DWに頼ってるので、イマイチよく分かりませんでしたが、
DWの設定で、link,visited,hoverの順に設定すれば、うまくいきました。
サンクス。
Opera 6.05は、backgroundプロパティの一括指定において、background-positionの値を 1つだけ指定した場合、どちらも無効になる(0% 0%として扱われる)ようです。 body{background:white url("back.png") bottom center no-repeat fixed;} だと「back.png」が中央下部に出るが、 body{background:white url("back.png") bottom no-repeat fixed;} では左上に表示されてしまう。(仕様上はこれも中央下部に出るはず) この話、既出ですか?
528 :
Name_Not_Found :02/09/28 23:59 ID:ZPCvx/+I
Opera6.05のバグ追加。
ZSPCの「CSS2対応状況ガイド」をご覧あれ。オペラで見るとバグが発現します。
http://www.zspc.com/documents/css2/index.html H1のあとのページ内リンク「HTMLへの組み込み〜音声」までのうち、
上段の「HTMLへの組み込み〜ボックス」がクリックできなくなってる。
ソースを抽出しておく。
<div id="contents">
<p>
<a href="#associate">HTMLへの組み込み</a>
- <a href="#selector1">セレクタ</a>
- <a href="#colorbg">色と背景</a>
- <a href="#font">フォント</a>
- <a href="#text">テキスト</a>
- <a href="#box1">ボックス</a>
<br>
<span class="divline">
<a href="#display">表示と配置</a>
- <a href="#list">リスト</a>
- <a href="#table">テーブル</a>
- <a href="#content">内容の追加</a>
- <a href="#outline">アウトライン</a>
- <a href="#cursor">カーソル</a>
- <a href="#page">印刷</a>
- <a href="#aural">音声</a>
</span>
</p>
<p>
[<a href="#symbols">○△×-の説明</a>]
[<a href="#browsers">確認に使用したブラウザ</a>]
</p>
</div>
【MacIE5.1】 hr要素にwidthを指定して短くしようとしても、 切り詰めたはずの左右両端が消え切らずに表示される。 hr {width:75%;}ならば、左右それぞれ25%分が消えてくれない。
531 :
529 :02/09/29 07:56 ID:???
>>530 >width:75%; なら、左右それぞれ12.5%分が消えるはずなのですが…。
あ、いけない。それが正しい。25%は単なる間違ひ。
例1)
中心に幅75%で色が濃い灰色の線が引かれるが、さらに左右両端が各12.5%分薄い灰色で表示され、消えてはくれない。
<hr class="thick" id="CentreLine" NOSHADE SIZE="10">
html * {box-sizing:border-box;} /*CSS3の記述。MacIE5で有効。*/
hr.thick {/*NN4無効*/
height:10px;
color:#888;/*IE用*/
background-color:#efefef;/*N6&Opera用。N6はnoshadeで濃くなる*/
clear:both;
}
#CentreLine {width:75%;}
例2)
中心に幅75%で色が#fff(白)の線が引かれるが、左右両端に各12.5%分だけ#666の色がついて、幅は計100%になる。
<hr class="clear">
html * {box-sizing:border-box;} /*CSS3の記述。MacIE5で有効。*/
hr {
height:0px;/*IE向け*/
border:1px solid #666;/*WinIEでhrの色になる*/
width:75%;
color:#fff;
background-color:#fff;/*N6&Operaでhrの色になる*/
}
.clear {clear:both;}
つまり、hr要素にwidthが中途半端にしか効かないってことです。
どうもhrにwidthを指定した場合、100%からwidthを引いた分に背景色が表示される模様。box-sizing:border-box;がhr要素に限って無効なのかな? 私も普段はWinなので、詳しいことは誰かMacの人、追試を頼んます。
ところで◆CSS.J95Uさん、
>>522 はバグに追加しないのですか?
>>530 >
http://members.tripod.co.jp/cssbug/detail/mozilla/b035.html 両端揃え(text-align: justify;)を指定した要素内で、太字の文字列(font-weight: bold;/b要素/strong要素)が重なって表示される。
<p style="text-align:justify; font-weight:bold;">Mozilla 5.0系……あります。</p>
↑「N7.0/Moz1.0.1では標準・互換モードともに不具合の発生が確認されませんでした」とのことですが」……。
例文を
<p style="text-align:justify;><strong>Mozilla 5.0系</strong>……あります。</p>
にしてみて下さい。
“ Mozilla 5.0系”の末尾が“>……あります”と重なって表示されるはず。
strong要素を<span style="font-weight:bold">にしても同樣。
つまり精確には
「両端揃え(text-align: justify;)を指定した要素内で、太字の文字列(font-weight: bold;/b要素/strong要素)が*太字でない文字列に*重なって表示される。」
ってことですな。
>>532 書き換えておきました。
でも、文字が重ならない(スクリーンショット参照)…。
多分、重なる環境では重なって見えるだろうけど(?)
>522 : .../detail/mozilla/b036.html
>527 : .../detail/opera/b018.html
>529 : .../detail/macie/b011.html
に追加しました。
534 :
Name_Not_Found :02/09/30 09:56 ID:ghBmK/4S
/* Opera6.05 */ 相対配置してあるインライン要素にz-indexプロパティは効かない。 ついでにDHTML(JavaScript+CSS)絡みのバグも。 クリックでオブジェクトの浮動(絶対配置の応用)と固定(position:static;)を切換可能にしてある。 しかしOperaでは、JavaScriptでtopやleftの値を変更すると、 position:static;の指定が無視されabsoluteとして動作する。 staticを指定した場合はtop,left,right,bottom等のプロパティは無効になるべきはずなのに……。 Operaのposition対応は挙動不審なことが多い。
/* Opera6 */ インライン要素にbackground-imageを指定しても何も表示されません。 ブロック要素でも、display:inlineを指定してあるものでは背景画像が現れなくなります。
537 :
:02/10/01 16:16 ID:e9DtyR1r
おまえらレベル低すぎ・・・ 何なんだほんと
>>537 んじゃあなた様の高いレベルを証明するカキコをどうぞ
↓ ↓ ↓
539 :
:02/10/01 18:00 ID:4zp7PJye
え。それじゃウルトラ亀レスでも。
>>227 WinIE5.5で「background-repeatプロパティにrepeat以外の値を指定すると、
背景(画像)がまったく印刷されない」件、
width 指定を追加すると背景画像もプリントアウトできました。
って質問スレとかで解決してたらごめんなさいごめんなさい。
バグではないかもしれんが。 外部cssファイルで@importを使ってる場合。 IE6で、ファイル>名前を付けて保存>Webページ、完全> にすると、「このWebページは保存できませんでした」との メッセージが出る。 #但し、なぜかローカルからローカルへの保存では大丈夫。 #外部cssがimportしたそのまた外部の.cssも含めて全て保存されます。 ってことで、@importでNN4除けなどをしてる場合、 ローカルに保存して見て貰ったりするのに不都合を生じさせることになりますね。
【MacIE5.x】 metaタグで文字コードを指定し,スタイルシートでfont-familyにsans-serifを指定すると, 要素が0.2emほど上方へずれる. metaタグで文字コードを指定しなかった場合や, font-familyがserifやmonospaceなら大丈夫というのがまた不思議.
543 :
ふ :02/10/05 07:46 ID:qIG0yfF1
どうでもいいけど、operaってpx単位で指定しているのに、他のブラウザと比較して文字の大きさが違うよな。文字の大きさは同じで字間が違うのかもしれないけど。
「ふ」は放置。
545 :
Name_Not_Found :02/10/07 11:26 ID:JhLCNd0b
546 :
Name_Not_Found :02/10/07 11:36 ID:CmZ0CHe8
>>543 font-size: 105%とかにするとオペラでは100%にされる。
ズームは10%刻みというおばかなブラウザだからね。
まあオペラなんてだれも使ってないんだから、
致命的に崩れない限りどうでもいいんじゃん?
547 :
Name_Not_Found :02/10/07 11:57 ID:W/2wOww0
>>540 これ,@import の前に @charset 指定していれば回避されるよ.
548 :
547 :02/10/07 12:09 ID:???
sageるの忘れてました(^^;
549 :
540 :02/10/07 19:25 ID:???
>>547-548 下記の通りで廻避されてませんが……?
@charset "Shift_JIS";
/*======除 NC4 & WinIE3======*/
@import url(font.css);
当方Win98SE・IE6SP1にて。やはり「Webページ、完全」では保存できず。
【MacIE5.x】 overflowに対し,visible以外を指定すると,要素が消滅してしまう. autoでもだめ.
【MacIE4〜5】(有名だが登録されてないので一応ここに書き込む) 自動折返しされる長さを持った要素にletter-spacingを適用すべからず。 表示が崩れます。 対処法としては、 @media screen,print { p{letter-spacing:0.2em;} } と@mediaで括ってやるとMacIEは認識しない。
552 :
Name_Not_Found :02/10/10 22:34 ID:j/J2X4Sa
【MacIE5.0〜5.1】clearプロパティを継承してしまって、floatが効かなくなる。 仕様書によれば、clearプロパティの継承性は無し(“Inherited: no”)である。 しかるにMacIEでは、clear:both;を指定した要素のみならず 内包する子要素にfloatが指定してあるのまで効かなくなってしまふ。以下に例を。 #row2 {clear:both;} h3 {float:left; width:33%;} #row2 p {margin-left:35%;} <div id="row2"> <h3>見出し</h3> <p>文章……</p> <div> これでWinIE6もNetscape7もOpera6も段組になって、見出しのすぐ右側に文章が来る。 だがMacIE5では、親要素のclear指定を削らないとfloatされない。 (因みにclear指定はこのブロックの前にあるdiv#row1の配置との絡みで要って入れたもの)
【Netscape 7】 属性セレクタはMozillaのみ対応だが、これにより奇妙なバグを生じることがある。 具体例のソースを一部抄出すると―― [lang="en"]{font-size:95%} div, h2, form {margin:0; padding:3px 0; background:red; } li {display:inline; } <div> <h2>Menu</h2> <ul><li>menu1</li><li>menu2</li><li>menu3</li></ul> </div> <form><input type="〜"><form> これで、なぜかN7ではdivとformの間に隙間が空く(IE6ならそんなことはない)。 form{margin-top:-1px;}を追加指定しないとピッタリくっつかない。 また、lang属性などどこにも記してないのに、なぜか上記スタイルより “[lang="en"]{font-size:95%}”を削るとちゃんと隙間は空かなくなる。 Menuが全て半角英字なのと関係あるか? 細かい再現条件は不明だが、一応報告しておく。
554 :
Name_Not_Found :02/10/11 23:54 ID:uFNIXQEt
同じMacIE5でも、OSが異なると同じ表示にならなかったりするんだよな。 OS 9ではバグるのにOS Xでは大丈夫だったり、時にはその逆だったり。 もういやっ。
555 :
Name_Not_Found :02/10/12 00:19 ID:S1TGTK8f
OSXとOS9じゃ、同じMacIE5ではないような…。 MacIE5.1xとMacIE5.2xだったり…
556 :
554 :02/10/12 15:08 ID:???
同じver5.0での話だよん。
>>555 あと、a要素をウッカリ閉ぢ忘れたままアップロードしたら、
h
ttp:// 〜/myweb/index.html
と
h
ttp:// 〜/myweb/
とではなぜか全然違った表示になった。そんなのMacIEだけだった。わけわからん。
>534から>555まで対応。
>>534 Operaはスクリプトによるpositionプロパティの変更に対応していないようです。
値の変更はできても、表示上は変更前の状態が続くようです。
参考:
ttp://www.opera.com/docs/specs/js/ >>539 heightの指定でもいいようです。というか、heightを指定していたせいで
WinIE6ではバグが修正されたと思っていた(;´Д`)
>>540 tripodにアップしたページでは保存できました。なぜ?
ちなみにうちはWinXP+IE6SP1。
>>553 属性セレクタではなく、line-heightとfont-sizeなどが関係ありそうです。
本スレまとめの
http://members.tripod.co.jp/cssbug/ macIEの
[2-541]
同じブロック要素内でspanでfont-familyを指定した場合は,問題がないようです.
以下のソースでは再現を確認することができます.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>
</head>
<body>
<p style="float:left;"><span style="font-family:sans-serif;">サンセリフ</span></p>
<p><span style="font-family:monospace;">モノスペース</span></p>
</body>
</html>
続き [2-550]overflowプロパティにvisible以外の値が指定された要素が表示されない(IE5) は,hx,p,preで確認.width,heightを指定すれば大丈夫な場合もあるし,だめな場合もある. 再現条件が良くわからん...
561 :
Name_Not_Found :02/10/13 20:00 ID:sFwGSIGP
>>561 少なくともCSS2の仕様通りにはサポートしてない。top,leftのある無しに関わらず。
CSS2.1の通りになら大体サポートしてることになるけど。
>>562 CSS2と2.1の差とは?(仕様書邦訳が2しかないみたいなのでわかんないや)
>558から>564まで対応。
>>558 HTML文書とスタイルシートを別々のディレクトリにおくと保存できないようです。
>>559-560 とりあえず修正してみました。Macないから結果が現れているか
自信が持てないけどヽ(´ー`)ノ
>>561 情報ありがとうございます。修正しておきました。
【Mozilla/Netscape 7】
親要素をpositionを指定してあると、overflowを指定した子要素が表示されなくなる。
http://pc3.2ch.net/test/read.cgi/hp/1031773943/828 >私のサイトではNetscape6.1以上対策として
>固定シートにbody{position:relative;z-index:0;}と指定してあります。
>これをしないとz-indexにマイナス値を指定した要素が表示されなくなるからです。
>さて最近、overflowによる擬似フレームに挑戦してみようとして、優先シートに
>body {overflow:hidden;}
>#main {
>position:absolute; top:0; left:0;
>width:100%; height:100%;
>overflow:auto;
>}
>#menu {
>position:absolute;
>bottom:0;
>z-index: 100;
>}
>としました。
><body><div id="main">本文……</div><div id="menu">メニュー</div></body>
>Internet Explorer 6ではこれで意図通りの表示となります。
>しかしNetscape 7では、ウィンドウが真っ白になり、全く何も表示されないのです。
>試行錯誤の末、body{position:static}を追加指定すると、やっとN7でも成功。
>しかしこれではbody内でz-indexを負値に指定した要素が表示されなくなります。
>正直、このあたり理窟がよくわかってないのですが、
>うまい対処法とご解説をいただけると助かります。
>>563 2.0仕様だとrightだけ指定しても右には寄らない。
left:0と設定されるから。
leftかwidthのどちらかも一緒に指定する必要がある。
2.1仕様だとrightだけ指定しても右に寄る。
内容に依存した幅が自動的に決まってleftもそれに応じて自動設定される。
>>562 WinIEは公式にはCSS1対応ですからねえ。
573 :
566 :02/10/15 00:24 ID:???
>>572 >とりあえず修正してみました。Macないから結果が現れているか
>自信が持てないけどヽ(´ー`)ノ
とのことでしたので.必要かなぁーと思ったのであります.
ちなみに,
[1-2]
[2-157]
[2-449]
[2-529]
[2-541]
[2-550]
[2-551]
[2-552]
を確認しました.
>>572-573 Windowsユーザーとしては、
普段目にする機会のないMacIEで確認してくれて、
そのスクリーンショットまでつけてくれるなら
有り難い限りですね。是非是非。
575 :
Name_Not_Found :02/10/15 01:38 ID:dQLpE1QQ
【Opera6.0】 border を指定する際、border-color を指定していない場合は、 color の値が初期値として 使用されるはずだと思うのですが、そうなりません。
【Opera6.05】、:linkでの指定を:visitedの指定が上書きしてくれない
Operaで見ると表示が変なページ ↓
http://www.ne.jp/asahi/anarchy/saluton/links.htm リンク集の一番下を訪問済みにしてOperaで見ると、アンカーの下線が妙に右までよけいに伸ばされて表示されるのが、おわかりになりますか。
スタイルシートから問題点を抽出すると以下の通り。
A:link {font-weight: 600;}
A:visited {font-weight: 200;}
A:hover {font-weight: 900;}
つまり、訪問前は太字で訪問済みは細字になり、hoverの時にさらに太字になる設定です。
特に:hoverでは文字が太った分だけアンカー・テキストの幅も伸びる。その伸びた長さがなぜか:visitedの時でも反映されてるわけです。
これはfont-weightですが、他にも:linkで指定された値がvisitedの状態にも引き継がれる模様。困ったもんです。
うちのIE6ではこれが意図通りに表示されないんですが、IE6のバグと考え定員でしょうか?
<?xml version="1.0" encoding="Shift_JIS"?>
<html xmlns="
http://www.w3.org/1999/xhtml ">
<head>
<title>test</title>
<style type="text/css">
p { border: 1px solid red; }
p:first-letter { font-size: 200%; }
p#p-1:first-letter { vertical-align: 1em; }
p#p-2:first-letter { vertical-align: -1em; }
p#p-3:first-letter { vertical-align: -2em; }
p#p-4:first-letter { vertical-align: sup; }
p#p-5:first-letter { vertical-align: sub; }
</style>
</head>
<body>
<p id="p-1">段落2-1, vertical-align: 1em</p>
<p id="p-2">段落2-2, vertical-align: -1em</p>
<p id="p-3">段落2-3, vertical-align: -2em</p>
<p id="p-4">段落2-4, vertical-align: sup</p>
<p id="p-5">段落2-5, vertical-align: sub</p>
</body>
</html>
579 :
578 :02/10/15 02:08 ID:???
考え定員でしょうか→考えていいんでしょうか
【Opera6】 button要素の背景色には対応しているのに、transparentは無視される。 【Opera6】 widthを指定しないでフロートさせると、無限に回り込んでいく。 (CSS仕様書ではfloatを指定する要素にはwidth必須とする。)
582 :
578 :02/10/15 02:40 ID:???
>>581 がっくし。
position:relativeは(仕様上)使えないし、floatだとフロートにした:first-letterの下辺が切れるしで、どうしたもんだろ。
>>572 >
http://members.tripod.co.jp/cssbug/temp/temp6.html >この例では親要素のheightを省略した場合、高さの算出値は0になるはず。
>(absoluteなボックスは算出から除外される)
>高さが0のボックスにoverflow:hidden;を指定したら消えるのが正しいような。
それはごもっとも。
ですが、
>>567 のoberflow:hidenを指定した要素が消えるって問題は、
子要素のposition:absoluteに関係なく、
親要素にposition:relativeを指定してある場合だと、ってことでした。
実際、検証用のソースで「親要素のheightは省略」を以下のごとく変更すると
N7でも親要素にheightを指定した場合と同様の表示になります。
<div style="/* position:relative; */ overflow:hidden; border:2px solid red;">
<p style="position:absolute; overflow:auto; width:150px; height:50px;">
</p>
</div>
「absoluteなボックスは算出から除外される」のは
親要素が相対配置されようとされまいと変らないはず、ですよね?
だのにナゼ親要素にposition:relative;が指定してあるとN7では消えるのか、ってことです。
>>583 絶対配置要素のコンテナブロックはポジショニングされた最も近い祖先要素か、
それがない場合はルート要素が設置したものになると規定されています。
div要素が相対配置された状態では、p要素のコンテナブロックがdiv要素になるので
div要素に指定されたoverflow:hidden;の影響を受けます。
しかし、div要素を通常配置にするとp要素のコンテナブロックが、ルートである
html要素になります。その結果、div要素のoverflow:hidden;の影響は受けません。
代わりに、html要素のoverflow指定(検証ソースでは何も指定していない→
初期値visible)の影響を受けるため、p要素がすべて見えた状態になります。
従って、N7の実装が正しいと思います。
>>577 >他にも:linkで指定された値がvisitedの状態にも引き継がれる模様。
さすがにオペラと雖もcolorやbackgroundは大丈夫、引き継がないね。
訪問済みにしても上書きされないのは、font-styleやletter-spacingとか。
下記スタイルをオペラで試しました。
a:link {color:blue; font-style:italic;letter-spacing:1em;}
a:visited {color:black; font-style:normal;letter-spacing:0;}
ただし指定を逆にして、
a:link {font-style:normal;}
a:visited {font-style:italic;}
だと、訪問済みの状態ではちゃんと斜体になるけど。
587 :
583 :02/10/15 12:01 ID:???
>>584 なるほど、ルート要素が<html>になるんですね(<body>ではなく)。
やっとわかりました。解説、有り難うございます。
まあoverflowの擬似フレームは止めておけってことですか。
MacIEやOperaでも問題多いみたいですし。
588 :
587 :02/10/15 12:40 ID:???
質問スレッドより転記します。
http://pc3.2ch.net/test/read.cgi/hp/1031773943/939-946 CSSでページ領域の真中表示できた。以下必要部分書いてみます。
html, body { margin:0px; padding:0px; width:100%; height:100%; }
h1 { line-height:1; position:relative; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center; top:50%; }
.header { position:relative; top:-0.5em; }
<body>
<h1><span class="header">まんなか</span></h1>
</body>
これは文字だけどimgとかブロックとかでも.headerのtopをうまく書き換えればいけると思う。
どうでしょ? いちおうMozilla1.0.1とIE6SP1では確認しますた。
【Opera6】
でもOpera6では上の方に配置されるね。垂直方向の中心にはならない。
下の通りに直せば、OperaでもIE6でもN7でも真ん中配置になる。
h1 {
line-height:1; margin:0px; padding:0px; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;/*←変更箇所*/
}
【MacIE】
http://pc3.2ch.net/test/read.cgi/hp/1031773943/966 MacIE5.0/5.1ともに駄目だった。
MacIE は、height の単位を % にすると横幅を基準に値を決めているもよう。
つまり、"height:100%;" なら その要素の縦幅はウィンドウの横幅と同じになり、
横幅 > 縦幅 なウィンドウでは、無駄な縦スクロールバーが出現することになり。
html, body { margin:0; padding:0; width:100%; }
h1 { line-height:1; margin:0; padding:0; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;}
height:100%; を削って、以上の記述にすると、MacIE 5.x でもおおかた意図する表示になるようです。
>>589 結局Operaのposition:relativeでのtop値%指定って
どんな算出方法を取ってるんだ? ようわからん。
Opera7では直るかなあ。
591 :
Name_Not_Found :02/10/16 21:49 ID:IeJA5jOW
[MacIE4.1]
IE4はdisplayプロパティの値inlineやblockには未対応だとされる。
cf.
http://www.zspc.com/documents/css2/display/display.html そこで一計を案じて、IE4で表示が崩れる元となる部分をspanで括って、
IE4では消して、IE5以降でのみ表示させようとした。
#div1 span {display:none;}/*Win&MacIE4向け*/
#div1 span {display:inline;}/*ver5以上向け、Win&MacIE4では無効のはず*/
ところがMacIE4.1で見たら、これが意図に反して表示されてしまった。
スタイル指定の二行目を削るとちゃんと消えるが。
どうもdisplayプロパティが未対応の値を持つ場合、そのブロックを無視しないで
上書きするみたいだ。したがってdisplay:none;が効かなくなるらしい。
それって文法違反です。バグですね。
MacIE4.5やWinIE4ではどうなのか。追試求む。
>575から>590まで対応。
>>589 領域の中央表示でOperaだけが上に寄っている件ですが、調べてみると
top: 50px; を指定したときと同じ位置に表示されています。
そこで数値を変えてみましたが、やはり同じ傾向になります。
(top:75%; → top:75px; の位置、top:300%; → top:300px; の位置など)
おそらく、Operaは相対配置要素に対してtopプロパティを%値で指定すると、
数値はそのままで単位がpxになったかのように扱われてしまうようです。
WinIE4.01 (Win95), MacIE4.51 (MacOS9) で試したところ display: none, inline ともに有効に機能するです。 MacIE4.5 はもう消しちゃって持ってないから不明。 ちうかそれ、「文法違反」ではなくて「実装が不完全」って事ですやね。 言葉尻をあげつらってスマンですが。
あ、いや、display : block なものを inline にすること(またはその逆)は できませんやね。>WinIE4 つまり span の display 初期値 inline がそのまま有効になってる、てなわけで。
>>593-594 するってえと、次の指定にしたら、IE4では消えてくれるのかね?
#div1 span {display:none;}/*Win&MacIE4向け*/
#div1 span {display:block;}/*ver5以上向け上書き、Win&MacIE4では無効のはず*/
IE4ではインライン要素であるspanをblockレベル要素にすることはできない(未実装)、
したがって二行目のスタイル指定は無効であり、
一行目のdisplay:none;が上書きされないで有効になるハズ。
>>589 追記(転載)
【MacIE5】
html, body { margin:0px; padding:0px; width:100%; height:100%; }
h1 { line-height:1; margin:0; padding:0; font-size:100%; font-weight:normal; text-align:center;
position:absolute; top:50%; width:100%;}
.header { position:relative; top:-0.5em; }
>
http://pc3.2ch.net/test/read.cgi/hp/1031773943/966-967 >ありゃ、私のとこと違いますね。
>ウィンドウサイズがどんなでもウィンドウから半文字分上にはみ出ます。(.headerの効果)
>ちょっと実験してみたところ、h1が position:absolute; なせい(だと思う)でbodyが高さ0に
>なってるみたいです。 htmlは自動的にbodyの外側を包括するボックスになってるっぽいかな?
>
>heightでの%指定は親ボックスの高さが基準じゃなかったでしたっけ。
[IE5.5&6.0] で確認。おそらく、それ以前のverも駄目なんでしょうな。 <ul> <li><div style="width:100%">AAAAA BBBBB CCCCC</div></li> </ul> の様にリストアイテムに含んだブロックにwidthを指定すると、 表示が折り返された時、 AAAAA BBBBB ○ CCCCC マーカーが下にいってしまう模様。 Mozilla1.0&1.1、Netscape7.0、及びOpera6.03で同現象は見られず。
599 :
Name_Not_Found :02/10/17 03:46 ID:v6eCYkiV
スミマセン!ちょっと質問なんですが、 スタイルシートで背景画像を横や縦だけに繰り返したりできますよね。 上下で横に繰り返すことも出来るんでしょうか? つまり、画面の上下に飾り罫をつけるようなデザインにしたいんです。 (その場合もしかして、フレームとか使わなきゃできないんでしょうか?) ググルでいろんな単語入れて検索してみたんですが見つからなくて… どなたかどうかおながいします!
600 :
599 :02/10/17 03:47 ID:???
ごめんなさい!あげちゃいました・・ウトゥ あと、微妙にスレ違いだったらスミマセン
微妙どころか、掠るところさえ無いすさまじいスレ違い。
603 :
597 :02/10/17 09:10 ID:???
少し関連して、もう一つ。[IE5.5&6.0]で確認。 <ul> <li><a href="#" style="display:block;">AAAAA BBBBB CCCCC</a> <li><a href="#" style="display:block;">AAAAA BBBBB CCCCC</a> </ul> の様にリストアイテムにブロック化したアンカーを含むと、 ○AAAAA BBBBB CCCCC ○AAAAA BBBBB CCCCC 不自然な改行が空く模様。さらに、アンカーの範囲が親ブロックの 端まで伸びない(NN4.xのブロック解釈似)。 ・改行は<li>または<a>にwidth指定をすることで解決。 ・アンカーの範囲は<a>にwidth指定をすることで解決。 しかしそこで、>597の問題が出てくと。 正直どうかと思うやり方だけど、 <ul> <li><div><a href="#" style="display:block;">AAAAA BBBBB CCCCC</a></div> <li><div><a href="#" style="display:block;">AAAAA BBBBB CCCCC</a></div> </ul> とすることで、両方解決した。 この方法を取る事による他ブラウザでの障害は見うけられず。
604 :
597 :02/10/17 09:12 ID:???
>598 今気づいたけど、ul{width:100%} にするとマーカーが ウインドウの外に飛び出すね。>IE これもバグか…。
【WinIE6標準モード】 <div style="border:1px solid red;"> <ul style="width:50%;margin-left:400px; padding-left:0;border:1px solid red;"> <li style="border:1px solid red;"><p>AAAAA BBBBB CCCCC</p></li> </ul> </div> ulへのージン指定が無視される。互換モードならちゃんと400pxの間が空くのだが。 ただし両モードとも、十分な左パディングを指定しないとリストマーカーが消える。
607 :
606 :02/10/17 09:46 ID:???
訂正。 >ulへのージン指定が無視される。 ulへの左マージン指定が無視される。
ウインドウの外に出るってことは、 IEのマーカーはULで生成されるボックス領域の外側にあるのか? Mozは body{margin:0;padding:0} ul{width:100%;margin:0;padding0} どこまで詰めてもマーカー出てるわけで。 list-style-position:insideの状態なら、IEでもマーカー出現。
>>608 いや、Mozillaでもulだけでなくliも詰めればマーカーが消えるよ。
ul,li {padding:0;margin:0;}
あとMozillaでは、list-style-position:inside;にすると
<ul><li><p>第一に、……</p></li></ul>
が
------------
・
第一に、……
--------------
と、ヘンに改行された表示になるって罠が。(
>>187 参照)
>590から>610まで対応。 リンク切れも修正しました。
【MacIE5】
表を囲む四方の枠線のうち、border-bottomだけ表示されなくなる。
実例は以下で見た。
http://www.geocities.co.jp/CollegeLife-Library/1959/reference/bibliography.htm table.classA {width:100%; border:1px solid;}
<table border="1" cellspacing="0" class="classA">
<thead>
<tr>
<th width="**%">……</th><th width="**%">……</th>以下略
</tr>
</THEAD>
<tbody>
<tr>
<td>……</td><td>……</td><td>……</td>以下略
</tr>
</tbody>
</table>
しかしなぜかHTMLソースで、</tbody>の前、</tr>との間に、一行の空行を空けてあると
テーブルはちゃんとborder-bottomも枠線が引かれる。
他にも、Opera6やMacIEでは、改行するかしないかで
CSSバグが出たり出なかったりする場合がたまにあるんだな。
>>613 white-space:-moz-pre-wrapはNS7の独自拡張だしねえ。
今のところどうにもならないと思います。
overflow:autoで対応するくらいしか。
>>614 >overflow:autoで対応するくらいしか。
auto? overflow:scroll;ではなくて?(もちろんwidthも併せて指定すること)
例を出す。
pre {
border:1px solid red;
overflow:auto;
width:80%;
}
<pre>
長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行・長い長い長ぁい一行
</pre>
上の指定をoverflow:auto;にしても、N7では何の変化も起きない(ボックスからはみ出なくはなるが)。
IE6ではスクロール・autoならばpreに横スクロール・バーが出るものの、
そのバーの下に文字列が隠れて見えなくなるのでheightも指定しないといけない。
しかしOperaではoverfow:autoでもpreのボックスから文字列がはみ出すし、
もっと悪いことにoverflow:scrollにすると(preではなく)ウインドウの横スクロールが出なくなり、
文字列の右端読めなくなって困る。
この場合、overflow:autoでのIE6のN7との表示差はバグになるのかな?
616 :
615 :02/10/20 16:46 ID:???
ごめん、肝心なところで間違った。 pre { border:1px solid red; overflow:scroll; /*ここ、ご訂正下さい*/ width:80%; } 初期値はscrollで試してみてね。
[Netscape 7]
letter-spacingもしくはtext-align:justify;を指定した見出し要素内で、
a要素の前後の字間が詰まり、時に重なる。
e.g.
<h1 style="text-align:justify;">llllllllll<a href="index.html">mmm</a>lllllllll</h1>
<h1 style="letter-spacing:0.1em;">llllllllll<a href="index.html">mmm</a>llllll</h1>
lとmの字間が妙に詰まってるのがご覧いただけようか。
letter-spacingの値や見出しのフォント、文字列次第で重なって見えないこともある。
cf.
「letter-spacingを指定した要素内で「ー」と直後の文字とが重なる」
http://cssbug.tripod.co.jp/detail/mozilla/b030.html
簡略化プロパティについてのバグ? 報告依頼につき、CSS質問スレ12より転載 body { color: #000000; background: #f5f5f5 url(../images/hoge.jpg) repeat } 102 名前:Name_Not_Found メェル:sage 投稿日:02/10/20 17:18 ID:??? >101 Mac版ネスケ7/IE5.1.6に外部.cssを読み込ませて試したけど、簡略化 プロパティを認識しない。Win版IEとOperaは持ってないから分からん。 body { background-color: #f5f5f5; background-image: url(../images/hoge.jpg); background-repeat: repeat;} 103 名前:Name_Not_Found メェル:sage 投稿日:02/10/20 17:22 ID:??? 今度はネスケ4.08が認識しない。 正直わけがわからん。面倒だけどネスケ専用.css設定するしかないみたい
/* MacIE4.1〜4.5 */ margin一括指定が効かない。 margin:0 -5em; 個別指定なら効いた。 margin-left:-5em; margin-right:-5em;
/* MacIE5 */ position:relative;のマイナス値で移動させられない。 例 <div id="main"> <h3>headline</h3> <p>paragraph</p> </div> body {background-color:red;} #main { background-color:#ddd; border-left:2px solid white; margin-left:24px; } #main h3 {float:left;width:40%; background:red; color:white; font-weight:900; border-width:2px 2px 2px 0; border-style:solid; border-color:white; position:relative;left:-2px;/*これが効いてくれない*/ } #main p {margin-left:45%;} つまり、#mainの左ボーダーを<h3>の左側だけ消したい。 そこでposition:relativeの負値で<h3>を上から重ね合せてやった。 WinIE6、N7、Opera6ではうまくいった。 しかしMacIE5ではダメ。floatと併用してる所為? でもpositionでなく、margin-left:2px;にしてみたら、MacIEでも成功した。 ただ、WinIEでは<h3>の上下borderがちょっと左にはみ出た格好になるが……。
623 :
617 :02/10/20 21:31 ID:???
== sample == <p style="line-height:200%;"> <img src="a.gif" alt="test" width="16" height="16"> <a href="a.html">リンクA</a> <br> <img src="b.gif" alt="test" width="16" height="16"> <a href="b.html">リンクB</a> <br> </p> == sample == IE6でline-heightが無視されます。 ネスケ4.75/ネスケ7ではちゃんと一行分あいて見えます。
>>625 IE6で無視って、具体的にどうなるの?
>>626 line-heightが効かず、行間が空かないってことかと。
N7とIEとは、たぶん、baselineの解釈が異なるのではないか。
628 :
Name_Not_Found :02/10/24 13:24 ID:7zLV1YKv
【IE6】
>>625-627 画像(置換インライン要素)を含む行が2行つづいた場合、
その2行の行間指定は無効になる。
以下で実験済み。
<p style="line-height:6.0;">
<img src="a.gif" alt="test" width="16" height="16">画像がある行<br>
画像がある行<img src="a.gif" alt="test" width="16" height="16"><br>
画像の無い行<br>
<img src="a.gif" alt="test" width="16" height="16">画像がある行<br>
画像がある行<img src="a.gif" alt="test" width="16" height="16"><br>
</p>
>612から>629まで対応。
>>623 やはりうまくいきませんでした。(´・ω・`)
9x系とNT系で表示が変わるのか?
質問スレッドより転記。
http://pc3.2ch.net/test/read.cgi/hp/1034922586/160- Mac IE4.5で
<div id="test" style="position:absolute; visibility:hidden; left:213px; top:281px; z-index:1">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#6699CC">
<tr>
<td>
<a href="#" onMouseOver="Swap('1','hoge');showLAYER('test')" onMouseOut="Swap('0','hoge');hydeLAYER('test')">リンク</a>
</td>
</tr>
</table>
</div>
としたところ、
外部ファイルで指定している
A:link{font-size:10px;color:#FFFFFF}
A:visited{font-size:10px;color:#CC0000}
A:hover{font-size:10px;color:#FF3300;text-decoration:underline}
が効きません。
どう効かないかというと、マウスを当てた時の色が変わりません。アンダーラインは効きますが、
マウスを離しても下線が消えない、というもの。
tableごとdivから外したら正常に動作しましたが、外さずに動作する方法はないものでしょうか、、。
http://cssbug.tripod.co.jp/detail/macie/b022.html 「marginプロパティで負の値を一括指定すると無視される」
マイナス値でなくても一括指定にすると効かなくなるみたいですよ。
それからMacIEのバグとして挙げてるけど、WinIE6でも異常が発生する。
テスト・ケースをWinIE6で見ると、N7やOpera6と違って、
marginのマイナス値で左右にはみ出させた分の文字列とborderが隠れて見えなくなる。
下の例で試すと、文字列は234(全角)しか見えない。
<div style="width:4em; margin-left:4em; border:2px solid red;">
<div style="margin:0 -1em; border:2px solid blue;text-align:center">12345</div>
</div>
634 :
Name_Not_Found :02/10/25 05:39 ID:9oGh+e6V
【IE6】標準モード/互換モードで確認 親要素内で、その包含する最後のブロックレベル要素の直後に<br>を挿入すると 上下マージンが効かなくなる。 <div id="a" style="border:1px solid red; margin:1em 5em;"> <p style="border:1px solid;">任意のブロックレベル要素</p> <br><!-- このbrが問題 --> </div> <div id="b" style="border:1px solid blue;margin-top:1em;">ブロック</div> 上記の例で、<br>を削ると指定通りにdiv#aとdiv#bの間にマージンが空く。 但し、<br>があっても全くマージンが効かないわけではなく、値を少なく解釈するらしい。 値を1emではなく5emとか大きめに取るとマージンが空くから。
保全上げ
いや、新出(多分)。
>>636 できれば邦訳が欲しいネ。
638 :
Name_Not_Found :02/10/31 10:38 ID:Y90TDK9K
ここもあるね。
CSS Bugs in IE5.x Mac
http://www.macedition.com/cb/ie5macbugs/ /* Commented backslash hack \*/
selector {style: For all other browsers without MacIE}
/* End hack */
↑これ、MacIE除けに便利みたいだけど、日本語環境ではバックスラッシュは“\”になる。
それでも効くのかな?
よーし、暇なので邦訳しちゃうぞー
640 :
595 :02/10/31 10:52 ID:???
641 :
639 :02/10/31 11:19 ID:???
書き込みサイズ制限ってどれくらいやっけ? ■ CSS Hints for Internet Explorer 5 よく知られているように、IE の Windows 版と Macintosh 版とは異なるレンダリングエンジンを使用しているため、同じ HTML と CSS でもブラウザの反応は異なることがある。 Web 開発者は、両方のブラウザでページをテストしなくてはならないのだろうか? 片方のブラウザでうまく表示されるページは、もう片方でもうまく表示されるかどうかは分からない。 総合的に言って、Win IE が独自のスタイルシートや JScript のメソッドをサポートしているのに対して、Mac IE は標準への準拠に厳格(strict)だ。 そして CSS サポートに関しては、Mac IE はずっと進んでいる。 例えば、position: fixed などの Win IE が未だに実装できていないいくつかのプロパティをサポートしている。 Mac IE は、他の多くのブラウザと同じように、開発者を悩ませるバグや癖がある。 この記事は、よく出くわす 3 つの種類の問題について述べる。 1. position: relative 関係のバグ 不正な継承 表と、絶対配置(absolute)された要素 2. マージン関連のバグ 隠しマージン スクロールバーの下の余白 margin-bottom の逆継承 3. overflow プロパティ関連のバグ あふれた(overflow した)内容が clip されない body 要素の overflow プロパティの継承 overflow した要素の これらの問題はは OS 9 / OS X の Mac IE のすべてのバージョンで起きうる。 # 目次の訳は、まだ全部読んでないから、直訳です。あてにしないで
>>638 文字コードは一緒だから効くだろ。
そんなことも知らんのか?
643 :
639 :02/10/31 11:23 ID:tZz05iMm
意訳・超訳オンパレード。 ■バックスラッシュとコメントによるハック 幸運なことに、開発者にはこれらの問題に対処するための道具がある。 ブラウザを判別して CSS ファイルを分けるようなことおをせずに、特別なスタイルを指定することが出来る。 Mac IE は CSS のコメント中にバックスラッシュがあると、正規表現みたいに、その次の一文字を無視する。 この不正な動作を利用して、コメント終端( */ )を Mac IE に無視させることができ、これにより CSS 宣言を無視させることができるのだ。 element { style: Mac IE 用宣言 } /* このコメントの終端(*/)は Mac IE に無視される。 続く宣言は Mac IE には読まれない。 -- まだ Mac IE はコメントの中だと勘違いしているから。 \*/ element { style: 他のすべてのブラウザ用宣言。Mac IE 用の宣言を上書きする。 } /* 普通のコメントを挿入する。これで Mac IE はコメントの終わりと認識する。 */ これを利用して、まず Mac IE 用の CSS を宣言し、さらに他のブラウザのために宣言を上書きする。 この方法でたくさんの CSS に関連した問題を避けることが出来るだろう。 # つまり \*/ って書くと、 \ の次の * を無視するんで結果『 / 』になってコメント終端にならないってことか
644 :
639 :02/10/31 11:30 ID:???
…さて、このまま次項以降も訳していきたいと思うのですが
図とか入り乱れておりますので、ここに張るのは無理ぽ。
内容を要約して書き込んでみます。
>>640 あー、残念ながら俺は窓使いなので無理です…
Mac IE で確認が出来ないので、せめてMac用ブラクラにならないように、
と気をつけながら日々 CSS を書いております。
どこかで Mac 使える機会があれば実験確認してみる。
645 :
リンクスタッフ募集! :02/10/31 11:58 ID:IiobKTZg
成功報酬型ですが、支払い金額はかなりの高額になっております。
リンクスタッフ登録は無料ですので、ぜひご登録して頂けないでしょうか?
http://jwb.kir.jp/love-affair-c21.html ←こちらのサイトからご登録お願い致し
ます。
以下支払い金額の詳細となります。
総代理店1件につき3万円をキャッシュバックいたします。人気のあるページなら、
当然バナー広告がクリックされる確率も高いでしょうから、月に5〜10件くらいお
申し込みがあるかもしれません。5件なら15万円とかなりの収入になります。件数に制限はありません。当社も儲かり、リンクスタッフ様
も儲かるというシステムです。
只今、リンクスタッフ募集キャンペーンに付き登録をするだけで3,000円キャッシュバック致します。 キャッシュバックの支払いは初回の報酬支払い時に振り込みます。
646 :
639 :02/10/31 12:25 ID:???
■position 関連のバグ position プロパティは static, relative, absolute, fixed のいずれかの値をとる。 static がデフォルト値で、fixed は未だに Win IE ではサポートされていない。 開発者は relative を避けがちである一方、absolute をよく使う。 要素にposition: relative が指定されたとき、要素はまず通常の位置に配置され、その後、top と left で指定された新しい位置に移動する。 例えば、この段落は top: 10px; left: 10px; を指定しているため、ゆがんだ位置にあるように見える。 <p class="position:relative; top: 10px; left: 10px;">その段落。</p> これはとても便利な機能だ。この指定をされた要素は、position: absolute のコンテナとなることができる。例えば element { position: absolute; top: 10px; left: 100px; } 通常、これはブラウザの画面の左上から(10px, 100px)の位置に用事されるが、もしその祖先要素が static 以外の position プロパティの値を持っていたら、要素は、その祖先に対して相対的に配置される。
647 :
639 :02/10/31 12:29 ID:???
◇position: relative の不正な継承
蟲: 『position: related を指定された要素』の中にある要素は position, left, right プロパティの値を親から正しく継承しない。(top, bottom は正しい)
例:
div#container {
position: relative;
border: 1px solid #000000;
top: 50px;
left: 50px;
width: 200px;
}
.testdiv {
position: static;
border: 1px solid #000000;
background-color: #ffffff;
padding: 10px;
margin: 0px;
}
ソース(書いてないけど多分こんな感じ):
<html>...(中略)...<body>
<div id="container">
<div class="testdiv">This is the Test DIV</div>
<div class="testdiv">This is the Test DIV</div>
<div class="testdiv">This is the Test DIV</div>
</div>
</body></html>
図によれば、このようにすると div#container の中の2番目以降の div.testdiv に親の position: relative と left が継承され(topは大丈夫)、おかしくなってしまうらしい。
対策: 対策は不可能。しかし、幸運にもこのような配置をすることは少ないだろう。
http://cssbug.tripod.co.jp/detail/macie/b005.html これですね。
648 :
639 :02/10/31 12:32 ID:???
◇表と絶対配置の要素 蟲: 絶対配置した要素を、position 指定をしないか static を指定しているような table 中に置いた場合、Mac IE は table の position プロパティに relative が指定されたものとして扱ってしまう。 table 中の要素の座標は table の左上隅からの相対座標で、ページの左上からの座標ではなくなる。table に position: static を明示しても無駄である。 # 訳者: table の中にposition: absoluteな要素を入れると、tableのpositionがrelativeになっちゃう。 # それによってCSSの解釈上、中の absolute で配置した要素の座標基点が table の左上になっちゃう。 # tableにstaticを明示的に指定しても無駄無駄ァ。ってことです。多分。訳すの下手でごめんなさい。 例: position: static を指定したtebleの中に、absolute を指定した div を置く <table class="container" border=2> <tr> <td> Blah! <div class="testdiv"> This is the test DIV in the table </div> </td> <td> Blah! </td> </tr> </table> # 行制限くらいました。続く。
649 :
639 :02/10/31 12:33 ID:???
続き。 .container { position: static; margin-top: 50px; border: 1px solid #000000; } .testdiv { position: absolute; top: 50px; left: 50px; border: 1px solid #000000; padding: 10px; } 正しくはページ左上(50px, 50px)に div.testdiv が配置されるはずだが、table.container からの相対座標指定となってしまい、table左上から(50px, 50px)に配置されてしまう。 対策: 不可能。tableの中の要素を絶対配置しないように。
651 :
639 :02/10/31 13:27 ID:???
■余白 ◇hidden margins 蟲: 要素をブラウザのウィンドウの右端か、下端に絶対配置したとき、謎のマージンが出現しスクロールバーを出現させる。 例: div.container { height: 150px; width: 200px; position: absolute; right: 0px; border: 1px solid #000000; background-color: #ffffff; } こうすると、右に余白が現れてしまい、その余白がスクロールバーを出現させて、カコワルイ。 # この後、この問題は、スクロールバーを表示するためにある DIV の余分な 15px の余白にある # …らしいんだけど、その関係は良く分かってない、って書いてあります。 対策: right: 15px; margin-right: -15px; この指定ならば他のブラウザに対しても同じように働くから、ブラウザ間の互換性もある (ただし、Win2000 上の Mozilla は 1px の余白を表示してしまう)。 bottom に対しても同様な対策が行える。
652 :
639 :02/10/31 13:28 ID:???
◇スクロールバーの下の余白 二つ目のマージン関係のバグは、さっきのと違ってスクロールバーとの関係がはっきりしている。 これは、必ずしも再現されるとは限らない。 10〜20%の確率で Mac IE は正しくスタイルシートを解釈するのだが、ページをリロードするとそうでなくなることもある。 蟲: Mac IE はスクロールバーの下の領域を、誤って描画領域の一部として認識してしまう。 ページの内容が垂直スクロールバーの下にあふれ、水平スクロールバーを表示させてしまうことがある。 例: body { margin: 0px; padding: 0px; font: 12px helvetica; } div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; } p { border: 1px solid #000000; } コンテナとして高さ150px, 幅100% の DIV を用意し、スクロールバーが必要なら表示されるように、overflow: auto を指定した。-moz-box-sizingは Mozilla のボックス関係処理を IE にあわせるため。 <div class="container"> <p>Windows XP でこんぴゅう太の世界が広がります。</p> <p>Windows XP でこんぴゅう太の世界が広がります。</p> <p>… </div> 示されている図では、Mozillaは正しく処理をして、縦スクロールバーのみが表示されている一方、 IE はバグのため縦スクロールバーの下に P を描画してしまう。 これにより横スクロールバーが出現し、なんか凄いことになってる…
653 :
639 :02/10/31 13:29 ID:???
対策: 16px の右パディングを DIV に追加する。 div.container { height: 150px; width: 100%; overflow: auto; -moz-box-sizing: border-box; padding-right: 16px; } 他のブラウザからは、この 16px のパディングは隠したい。そこで、先にあげたバックスラッシュ・ハックを使う。 div.container { ...(略)... padding-right: 16px; } /* Commented backslash hack \*/ div.container {padding-right: 0px;} /* End hack */ 一件落着…かと思いきや、これは新たな二つの問題を発生させる。 ・ページ全体に水平スクロールバーが付く ・最初の段落が、それ以降の段落より短くなる。これは padding-right を指定したからである。 画像では確かに最初の段落の幅だけが狭くなっています。
654 :
639 :02/10/31 13:30 ID:???
これを解決するために以下のようにする。
div.container {
height: 150px;
width: 100%;
overflow: auto;
-moz-box-sizing: border-box;
padding-right: 16px;
margin-right: -15px;
}
div.container>:first-child {
margin-right: -16px;
}
/* Commented backslash hack \*/
div.container {padding-right: 0px;}
div.container>:first-child { margin-right: 0px; }
/* End hack */
多分これのことだ。
http://cssbug.tripod.co.jp/detail/macie/b003.html 用事が出来たので今日はこの辺で。
IE6sp1 / HTML4.01,XHTML1.0/1.1 で確認したんですが、 p{ width: 50%; margin-left: auto; margin-right: auto; } 互換モードだとブロックレベルのセンタリングが適用されません。 因みにNN6.2,OPERA6.05では適用されてました。IEの仕様でしょうか? 既出だったらすみません。
664 :
Name_Not_Found :02/11/11 00:20 ID:7RSD3TB/
質問スレッドより転載。 443 :Name_Not_Found :02/11/08 21:58 ID:??? Opera6.05 Win なんですが、ユーザースタイルシートに br+br{display:none;} とやって、2個以上続く<BR>を無効化してやろうと、 つまりフォントいじり野郎の努力を無駄にしてやりたい! と思ったんですが、これだと全部の<BR>が消えちゃって 単なる強制改行無効になってしまいます。 隣接セレクタに関する俺の理解が間違ってますか? まあとりあえず br+br{line-height:0%;} とすることで当初の目的は概ね達成できているんですが 気になって気になって夜は熟睡です。
666 :
Name_Not_Found :02/11/13 16:58 ID:lXEn7VK7
Opera7のベータがリリースされました。 ここで挙がったバグはほとんど修正されている模様。 ただしベータなので(CSS以外の)細かい不具合が結構あり、実用はもう少し先か。
>>664 <style type="text/css">br + br {display: none;}</style>
<p>(・∀・)<br><br>(゚д゚)<br><br>(゚∀゚)</p>
↑これを表示したときにジサクジエンの直後で1回しか改行されないと
いうのなら正しい動作のはず(Op6.05/Moz1.2bで確認)。
p要素内では、匿名ボックスを除けばbr要素が連続して置かれているので
最初のbr以外は消えてしまうことになります。
最初のbrも消えてしまうとか、途中に別の要素があるのに全部のbrが消える
とかいうのならバグになると思いますが…。
>>666 >>667 ついにβがリリースされましたか。
7での状況をサイトに反映させるのは正式版が出てからでもいいかな…。
MacIE5 で確認したバグ。 表(table)に指定した位置揃え(text-align)がセル(th,td)では無視される 報告が激しく亀でスマソ
670 :
Name_Not_Found :02/11/15 14:36 ID:WbCkAuwE
【WinIE6】擬似クラスの子要素への指定が、擬似クラスへの指定が無いと効かない a:hover {color:red;} a:hover img { border:5px solid #f00; background:#ff0; } <a href=""><img src="" width="30" height="30">aaa</a> これを画像オフで見て下さい。 マウス・カーソルを乗せて:hoverの状態にしても、背景色が変化しません。 Netscape 7 ではちゃんと変化します。 一番上のa:hover {color:red;}に background:任意; を追加すると 初めてIEでもa:hober img へのbackground指定が有効になります。
671 :
Name_Not_Found :02/11/15 16:47 ID:1gqa6vmk
【IE6】半角英数字だと、ボックスサイズの“幅”が内容物に合せた大きさへ強制的に調整される
cf.
http://cssbug.tripod.co.jp/detail/winie/b052.html 【Opera 6】半角英数字はwidth指定を無視してブロックの横にはみ出し、折り返さない。
【NN7】半角英数字と全角数字は、width指定を無視してブロックの横にはみ出し、折り返さない。
下記のソースをお試しあれ。IE6、Opera6、NN7で全て表示が異なる。
(0123は半角、456は全角、789はまた半角であることに注意。)
<div style="border:2px dashed #0c0;">
<p style="border:1px solid red; width:1em; float:left;">0123456</p>789
<br style="clear:both;"><!--ここに何か一文字でも入れるとIEでも包含してくれる-->
</div>
但し、テクストの「456」(全角)を「四五六」にすると、
なぜかNN7もOperaと表示が等しくなる。
また「0123456」を「〇一二三四五六」(全て全角)にすれば
IE・NN7・Operaの全てが等しい表示となる――但し下記の問題を覗いて、だが。
【IE6】floatした子要素がある場合、clearしても親ブロックが包含してくれない。
672 :
671 :02/11/15 16:54 ID:???
おっと、p要素のマージンのデフォルト差もあったから、 最後の例(全て全角)でも必ずしも三者の表示は一致しないな。 ま、p {margin:0}追加でも験してみて下さい。
673 :
Name_Not_Found :02/11/16 16:02 ID:WFmbr8H+
【Opera 6.01】float 関連のバグ。なんと表現すればよいか日本語が不自由でうまくかけませんが #BOX1, #BOX3 { border: 2px red solid; float: left; width: 40%; } #BOX2 { border: 2px blue solid; float: right; width: 40%; } <div id="BOX1">#BOX1</div> <div id="BOX2">#BOX2<br>#BOX2<br>#BOX2<br>#BOX2<br>#BOX2</div> <div id="BOX3">#BOX3</div> IE6, Mozilla などは、BOX1 と BOX3 がくっついて表示されますが Opera 6.01 では、BOX3の上端がBOX2の下端にそろえられてしまいます。 慣れないAAで書くと ・IE6, Mozillaなど [#BOX1 (幅40%)] [#BOX2(幅40%)] [#BOX3 (幅40%)] [#BOX2 ] [#BOX2 ] [#BOX2 ] [#BOX2 ] ・Opera 6 [#BOX1 (幅40%)] [#BOX2(幅40%)] [#BOX2 ] [#BOX2 ] [#BOX2 ] [#BOX2 ] [#BOX3 (幅40%)]←ここに来てしまう 試しに#BOX3{ clear: left; } とやってみたら、IE6 などと同じ表示になりましたから ひょっとしたら仕様のあいまいな点とか(?)に引っかかってるのかもしれません。 仕様書読んできます。Opera 7βでは治ってるようです。
>>673 あ、それうちのトップページでもなるよ。leftとrightは逆だけど。
同じく {clear:right; float:right; width:〜;} にして解決した。
参考までに、ソースを抽出しておきます。
#head2{float:right;width:9.7em;}
#column3 {float:left;width:18.3em;}
#column4 { clear:right;/*Opera6に必要*/
float:right; width:14.8em;
}
<div id="#divBody2"><!--横幅34em-->
<h2 id="head2">キャッチコピー</h2>
<div id="column3">
<p>見出しを詳しく説明した文章〜〜</p>
</div>
<div id="column4">
<img><p>キャプション</p>
</div>
〜略〜<!--clear-->
</div>
675 :
Name_Not_Found :02/11/17 14:45 ID:HALsJZLE
WinN6で <div style="position:absolute;">aaa</div> <div style="margin:50px 50px 50px 50px;">bbb</div> とすると、bbbの上マージンだけが無視されるんですが既出ですか?
*{font-size:inherit;} でブラウザ死亡。 Opera 6.05 Build 1140 Windows 2k SP3 既出?
>>678 6.01で試してみたけど氏にはしないよ。字は変な大きさになるけど(font-size: 100%; と同系列のバグかと思われ)
環境: Opera 6.01 Build 1041e Win2k SP3
ひょっとすると 6.05 でエンバグしちゃったのかな。次のソースで試しました。
<html>
<head>
<style type="text/css">
*{font-size:inherit;}
</style>
</head>
<body>
<h1>見出し</h1><p>段落</p>
</body>
</html>
>669〜>679に対応。 >669 → macie/b028.html >670 → winie/b077.html >671 → winie/b078.html N7とO6は、欧文のワードラップ機能の関係で一続きの半角英数文字列が 複数行に分かれないためにはみ出しているのだと思います。ただ、N7で 全角数字もワードラップの対象になっているのが気になりますが。 >673 → opera/b028.html >675 → mozilla/b041.html >678 → opera/b029.html 6.05(1140) WinXP(SP1) でもOperaが落ちました。
>>680 >N7とO6は、欧文のワードラップ機能の関係で
WinIEならそれもword-break:で何とかできるんだけどねえ。
N7やOperaは所詮毛唐のことしか考慮してないんだよな。
【IE6】
http://cssbug.tripod.co.jp/detail/winie/b079.html フロートの後続フロー制御を設定したbr要素が親要素に包含されない
<div style="border:2px solid red;">
<div style="float:left; width:50px; height:50px; background:aqua;">Float</div>
<br style="clear:left;">
</div> ←ソース例にこのdivの閉ぢタグ、脱けてますよ
これへの対処法。
親divに値がauto以外のwidth(heightでなく)を指定してやるとなぜかうまく包含してくれる。
しかも<br style="clear:left;">は要らない。
ちなみにN6の場合、親divにposition:relative;を指定してやると
やはり<br style="clear:left;">無しにfloatさせた子要素まで包含する。
Opera6だけはどうしてもclearさせる要素が後続しないと包含してくれぬ。
>>681 word-breakはWinIE独自拡張のはずだからねぇ。
先にW3Cを動かさないとN7やOperaには搭載されないかも…。
>>682 「……/css/boxm.html」だと思ってますた(つД`)
ということで、直しておきました。
>>683 こちらも修正。</pre>を置く場所を間違えていました。
MacIE使ってるとリンクをマウスが通過する度に下にずれるん。 ┌─ hoge.hrml ─── │お前は<a href=hoge>ウンコ</a><a href=hoge>ウンコ</a><a href=hoge>ウンコ</a><a href=hoge>ウンコ</a>なのです。 │ Aタグが複数の連続の場合でブラウザの横幅が狭い状態で 複数行表示になってる場合 ┌─ ブラウザ ─────────┐ │お前はウンコウンコウンコウンコ │なのです。 こう表示されてるとして、
┌─ ブラウザ ─────────┐ │お前はウンコウンコウンコ │ウンコなのなのです。 ┌─ ブラウザ ─────────┐ │お前はウンコウンコ │ウンコウンコなのです。 ┌─ ブラウザ ─────────┐ │お前はウンコ │ウンコウンコウンコなのです。 ┌─ ブラウザ ─────────┐ │お前はウンコウンコウンコウンコ │なのです。 最終的に元の鞘に収まるんだけど 変だな思って調べてると a:hoverにposition:relativeが含まれている時に限ってなってるのね。 この辺の情報とか対処わかんないですか? 検索しようにも検索キーが思い浮かばないん。 症状名「うねうね病」とかで検索しても出て来ないよ−
>>686-687 それ、position使ってなくてもなりますよ。
a:hoverのスタイルでfont-weightが変更されたりすると覿面です。
リンク・アンカーが横に列んでるサイト・ナビゲーションなんかの上を
マウス・カーソルが通ると、もっさりもっさりとズレ運動を開始する。
だからMacIEはイヤさ。
マウスでポイントした瞬間にずれてリンクがその場になくなって をクリック出来無くなったり、MacIEのCSS対応は糞だなぁ。 でもMacでは他はもっと糞だしなぁ。
>>689 MacのMozillaは結構マトモだと思いますが?
691 :
sage :02/11/27 08:24 ID:UainUSTm
IE6なんですが、 li{display:inline;} li a{text-transform:capitalize;} として、 <ul> <li><a>〜〜</a></li><li><a>〜〜</a></li><li><a>〜〜</a></li><li><a>〜〜</a></li>… </ul> とli要素を改行せずに書くとa要素の部分のtext-transform:capitalize;がうまく効きません。 あと、これもIE6で h1:first-letter {color:#fff;} として、 <h1>2002年10月</h1> <ol> <li>xx日</li> <li>xx日</li> </ol> <h1>2002年11月</h1> <ol> <li>xx日</li> <li>xx日</li> </ol> と書くと、 2つ目の(2002年11月の)リストが左に寄ってしまいます。 これってバグなんでしょうか?
693 :
Name_Not_Found :02/11/29 04:43 ID:sSOoamso
>>692 省略して載せてるから
適当に答える。
しょっぱなからティガウよ
何故LIタグをわざわざinlineに?
{display: list-item}
よく見かけるんだけど
ブロックをブロックとして無駄な指定をしてみたり、
リストしか使い道の無いタグをインラインと無茶な指定をしてみたり、
cssで自由自在にタグの性格を変える事が出来るけど
性格付ける様な事せんでも元々持ってる性格がある訳で
>>692 の場合も典型的な一例かと。
本来持ってる性格を変えなくて良いならdiplayは不要。
狙って性格変えしてるんなら特に言う事は無いけど。
>>693 ナビゲーションに使うんちゃう?> inline
695 :
692 :02/11/29 07:28 ID:???
前者の方、自己解決。
改行させてないから、text-transform:capitalizeが
スペースやハイフンの後ろでしか効いていないみたいで
バグではなかったようです。
でも後者がIEだけの現象のようで・・・やっぱバグなのかな。
>>693 display:inlineは
>>694 の言う通りです。
696 :
Name_Not_Found :02/11/29 22:25 ID:HNHpP4h2
697 :
696 :02/11/29 22:26 ID:HNHpP4h2
699 :
Name_Not_Found :02/12/03 09:25 ID:4vUgLf00
>685から>698まで対応。
>>685 そうでしたか(;´Д`) CSS3までは見ていなかったな…
>>686-688 → macie029
>>692 の下の方 → winie080
>>691 「確認済み」のほうに移しました。確認ありがとうございます。
>>696-698 指摘ありがとうございます。修正&追記しておきました。
>>699 800×600で最大化した状態で動きます。
確かに、窓サイズによっては動かないですね…
CCSバグリストのページ
http://members.tripod.co.jp/cssbug/detail/macie.html [1-18]閲覧領域からはみ出す要素がない状態でもスクロールバーが表示されることがある
って
「Mac版 Internet Explorer 5 の CSS バグと回避方法」の「隠れたマージン」
http://cgi2.html.ne.jp/~n_1_2_3/ie5cssbugsj.html#margin-hiddenmargins のことだよね.
[1-67][2-113]相対配置した要素の子孫要素が親要素の位置指定を継承する(IE5)
確認しました.黄色いdivが,期待される位置より100px右に配置され,親要素の青divは,70pxの高さとなっています.
[2-596]heightの%値指定時に親要素の高さを反映しない(IE5)
確認しました.htmlとbodyのボーダーが重なり,青赤のボーダーとなってます.でもこれはこれで面白いかも
[2-650]ルビつき文字がページ右端にあるとルビが正しい位置に表示されない(IE5)
確認しました.ウィンドウの幅を狭めると,「□」の下に「しかく」と表示されました.一行下の行の上にルビを書いてるのかなぁ.
[2-686]:hoverへの設定が適用されるたびにa要素がずれてゆく
確認しました.aにカーソルを重ねるたびに,aがずれてゆくよ.気持ち悪い.最終的には全体が一行下にずれたところで落ち着きます.
バグだろ
MacIEの「文字列流れ込みのバグ」は
/* CSS、スタイルシート質問スレッド【6】 */
http://pc.2ch.net/hp/kako/1011/10113/1011358982.html の839-862に既出だね。
>WinIE6だけど、ガクガク動いたよ。
>ただ、2行目にまでは波及しなかったけど。
とか
>MacIEだと、2行が3行になったり、また2行になったりして、
>その間、右寄せになったり左寄せになったりもして、
>もうホント、動画にして見せたい位にヘンな動きだったんですよ。
との声もある。
対処法としては、@mediaでMacIE除けをするか、または
position:relative;
top:0;
left:0;
と指定するとよいらしい。
MacIE よけならバックスラッシュハック。これ最強。
age
707 :
Name_Not_Found :02/12/18 23:11 ID:utV1t1ob
>>707 報告の際はブラウザ名(とヴァージョン)を明記してください。
ソースも出していただけると検討しやすくなります。
>>710 俺もやってみたが、出来なかった。IEだろーが、NNだろーが反映されないから
仕様…なのか?しかし、そんなの聞いたことないぞ。
UTF-8 だけってのがな。
IE6 SP1,mozilla0.9.8,Opera6.05 で確認。 文字コード UTF-8 指定フォント sans-selif 結果:反映されず Century Gothic や Osaka はもっていないので未確認。 Impact,Verdana,Arial,MS系は反映。
【Opera6.x】 [main.css] @import url("sub.css"); [sub.css] p{color:red} sub.cssが、ローカル環境下ではimportされない。 サーバー上に置くと有効になるのを確認済み。 こちらではどう記述しても再現されるが、こんなすぐバレそうなのが 出てないところを見ると、他の環境が関係するのか?といっても 出せる情報なんてOS:Win98くらいしかないわけだが。
Opera 6.05 <link rel="stylesheet" type="text/css" media="screen,print" href="hoge.css"> で N4 回避しながら読み込んでる CSS が [F11] でフルスクリーン化したら無効になる…のは仕様なのだろうか…
715 :
714 :02/12/24 01:57 ID:???
716 :
713 :02/12/25 22:16 ID:???
別の環境で、同じコードを使って試してみたら上の症状は起きなかった。 やっぱ何か俺のPCで影響を及ぼすものがあるのか。もうちょい探ってみるよ。
>>709 Moz042に反映。
>>707 など
Moz1.0.1/1.2.1、IE6、Opera6.05(WinXP)ではCentury GothicやOsakaを含めて
表示フォントが指定どおりになりました。
>>713 うちのO6.05/WinXPではローカルでもCSSが反映されています。
707と713はUAの問題だけではないかもしれない…
>>718 CSSバグリストのページは好意で纏めてくれてるに
すぎないんだから、そういう言葉遣いはどうかと思うよ。
721 :
718 :02/12/28 14:36 ID:???
なんで
>>720 みたいに責められるのか正直よくわからないが、
もし気に障ったとしたらごめんなさい。
>>717
722 :
Name_Not_Found :02/12/29 20:28 ID:hFR0HEfy
>>719 こんなの見つけた。
background-attachment: fixed テスト
http://is.vis.ne.jp/lab/tests/background/test_1.html Windows版IE6
固定した場合、背景画像の配置は viewport を基準にするべきところを、していない。 (body または html を除く。)
body (または html) を除いたエレメントでは固定されない。
Mozilla1.2
問題無い。
Opera6
固定した場合、背景画像の配置は viewport を基準にするべきところを、していない。 (body または html を除く。)
固定された背景画像は、ページのレンダリングが完了した時点で viewport内に表示されている物しか表示されない。 (よって、body (または html) を除いたエレメントの固定背景画像はスクロールさせると見えなくなる。)
Opera7
問題無い。
あまりうまくまとめられていないのですが、 【Opera6.x】 スタイルに div.moo > a.foo:before, div.moo > span.foo:before { content: "["; } div.moo > a.foo:after, div.moo > span.foo:after { content: "]"; } HTMLで <div class="moo"><a class="foo" href="hoge.html">1<./a><span class="foo">2</span></div> としたときに、contentが反映されません。 [1][2] 正しければ、このように表示されます。 Opera7,Mozilla1.2.1では問題ありませんでした。 ,を使わないで、a, spanをそれぞれ単独で指定すると正常に反映されました。
724 :
Name_Not_Found :03/01/04 03:45 ID:6jM/sOJL
【IE5.5】 <style type="text/css"> body{font-size:20px;line-height:20px;} div{position:absolute;} </style> <div style="top:50px;left:50px"> あ ̄い ̄う ̄え ̄お </div> ↑こうすると" ̄"が表示されなくなる。
718〜725を反映させました。
701〜704 → 確認済みに変更、修正
719 → WinIE081
722 → WinIE081、Opera030, 031
723 → Opera032
725 → WinIE082
>>718 見落としてました。スマソ
NN7で、DOCTYPEをstrictにすると、<link rel=〜>でCSSファイルが うまく呼び出せないことがあるのは既出かな。
>>728-729 多分それはMIMEタイプに text/css が指定されてない時に
CSS が反映されないという話だと思うので、
外出&仕様。
732 :
730 :03/01/08 14:51 ID:???
>>730 そう。もじら組にも似た様な事 (和ジオを名指しで挙げていた) が書いてあったが、
探すのが面倒なので、勝手に探してくれ。
733 :
730 :03/01/08 14:56 ID:???
734 :
Name_Not_Found :03/01/11 00:41 ID:0KguHnzB
Opera って id に対するスタイル指定が効かない気がするんですが、 これはバグですか?
>>734 こっちで試した限り効くけど…
Win版Opera6.05、7.0β2 で確認。
〜別件〜
バグなのか使用通りなのか分からないのですが。
IE6SP1及びMozilla1.2で複数外部CSSを読み込んでいる場合で"text-indent"が反映されない。
ただし、style要素または属性でhtmlファイル内に記述した場合は反映。
Opera6.05、7.0βは外部CSSからでも反映。
前略
<link type="text/css" rel="stylesheet" href="../css/base.css">
<link type="text/css" rel="stylesheet" href="../css/home.css">
後略
base.cssではp要素への指定なし。home.cssでp {text-indent:2em;}を指定。
base.cssにもp {text-indent:2em;}を指定している場合は反映される。
>>735 > <link type="text/css" rel="stylesheet" href="../css/base.css">
> <link type="text/css" rel="stylesheet" href="../css/home.css">
同じ形式で試しましたが、こちらではその症状は出ていません。
IE6 SP1 & Mozilla 1.0 にて確認。
…壊れたとしか思えない挙動ですが?(; ´Д`)
737 :
Name_Not_Found :03/01/11 02:30 ID:0KguHnzB
>>735 Opera version 6.05 build 1140 Win32
ですが、以下のHTMLファイルだと上の div にスタイルが適用されないんです。
もしかすると文法的に間違ったことしてるんでしょうか?
一応 IE と Mozilla ではスタイルが適用されるのを確認しました。
<html><head><title>Test</title></head>
<style><!--
#TEST1 { width: 50%; border: solid medium black; }
TEST2 { width: 50%; border: solid medium black; }
--></style>
<body>
<div id="test1"><br><br><br>ID 指定<br><br><br><br></div>
<div class="test2"><br><br><br>CLASS 指定<br><br><br><br></div>
</body></html>
738 :
737 :03/01/11 02:32 ID:???
あれ?TEST2 の前のドットが消えてる..... .TEST2 { width: 50%; border: solid medium black; } です。
#TEST1 を #test1 に変えると適用された。 idの大文字小文字を区別してるっぽいね。
id の大文字小文字は、 ・HTML なら区別 *しない* のが正しい ・XHTML なら区別 *する* のが正しい class の大文字小文字は、 ・HTML でも XHTML でも区別 *する* のが正しい です。
なるほど、まさに仕様通りの動作というわけか。
742 :
740 :03/01/11 05:23 ID:???
>>741 いやいや。
>>737 はどう見ても XHTML じゃないし、
文面からすると class は有効っぽいから、どっちも仕様と逆。
id は適用されて class は適用されないのが正しい。
743 :
735 :03/01/11 11:04 ID:???
>>736 壊れたとしか思えない挙動ですか…
会社のPC(Win2k+IE6SP1)だと確かに反映されますね(汗
自宅PCが原因か…ありがとうございました。
>>737 同じく社のPC(Win2k+Opera7.0β)でそのソースで試しましたが
id・classとも適用されますね。
744 :
Name_Not_Found :03/01/11 22:27 ID:wv1H+3l1
バグなのか仕様なのか分からないのですが。 borderを適当に指定した<DIV>内で<P>を使った場合の マージンの取られ方がMozilla 1.0とIE5で異なるのですが、 どっちが正しいですか? Mozilla1.0 ---------------------------------------------------- <P>Mozillaだと<P>の上下に1em空いているのが、</P> ---------------------------------------------------- IE5 ---------------------------------------------------- <P>IEで見るとマージンが相殺されています。</P> ----------------------------------------------------
745 :
737 :03/01/11 22:49 ID:???
>>744 うちでも現象が出たことがあるので、何が言いたいのかはわかる
んだけど、そういうのって「相殺」じゃなくて単に値が無視されてる
だけでしょう。
「相殺」自体はmarginとかpadding関係なら必ずあるものなので。
IEも5.5以降ならちゃんと出ます。おかしいのはIE5。
>>744 p { margin-top: 1em; margin-bottom: 1em; }
と指定してやると、Mozillaと同じになるかも。
748 :
744 :03/01/11 23:07 ID:???
>746 > そういうのって「相殺」じゃなくて単に値が無視されてるだけでしょう。 書き込んでから気付きました。相殺はおかしいですね。 直前にネットで調べてたらmarginの相殺のことが出てきてたので、 頭の中がそのままになっていたようです。 > IEも5.5以降ならちゃんと出ます。おかしいのはIE5。 ありがとうございます。 IE5のほうに合わせてサイトのCSSをいじろうかと思ってましたが、 見栄え以外に影響はないところなのでそのままにしておきます。 IE5だとぺっちゃんこになってかっこ悪いですが。 >747 駄目みたいです。完璧に無視されてます…。 ありがとう。
岡田克彦ファンクラブからのご案内です。ご高承のとおり、岡田克彦氏の卒業した早稲田大学政治経済学部
と、ひろゆきの卒業した中央大学文学部は比較にならないほど差があります。中央大学文学部のような
ヘボい大学に共通しているのは、文化水準が低いという事です。18歳から22歳をヘボい大学で過ごすという
ことは、感受性において致命傷と言えます。2ちゃんねらーの大半は岡田克彦氏に比べて、著しい低学歴で
頭が悪いだけでなく、感受性も愚鈍で腐っているという、取り返しのつかない状態なのです。
せめて、
http://www.geocities.co.jp/MusicHall-Horn/1091/で 、岡田氏の作品に触れましょう。
first-letterを設定した要素にアンカーも設定し、それをhoverすると first-letterが効かなくなります。 <h1><a href="2ch.net">2ちゃんねる</a></h1> h1:first-letter{font-size : ○em;} Win版Moz1.0.1で発生。Opera60.5、IE5.5では大丈夫な模様。 Macとかでも検証してみて下さい。
h1:first-letter:hover{font-size : ○em;} ってしないと駄目じゃなかったっけ?
>>753 それを言うなら
h1:first-letter a:hover{font-size : ○em;}
>>753 それでやってもダメでした。
試しにh1:first-letter a:hover{}とかやってみましたがダメでした。
h1:first-child:first-letter ですよ。 他は効かないのが正解。
757 :
756 :03/01/19 19:27 ID:???
…と思ったら確かに hover 後に指定が無効になりますね。
>>756 first-childは最初の子要素への指定っす。
あともう一つ。ガイシュツだったらすいません。
positionで基準となるボックスからの計算ってボーダー領域は含まないですよね?
bodyにボーダー設定してると子要素のポジショニングが狂います。
Moz、Operaで確認。IEが正しいのかな?
<body style="border-top : 30px solid gray; border-left : 30px solid green;">
<div style="position:absolute; top:0px; left:0px; width:500px; height:300px; border:30px solid red; padding:0;">
<p style="position:absolute; top:0px; left:0px; background-color:blue; padding:0; margin:0;">
てすとてすとてすとてすと
</p>
</div>
Opera7ってDOCTYPEスイッチがあるんだね 互換モードだとWinIEと似た傾向の表示になってしまう
↓
>>634 と関係あるか?
http://pc3.2ch.net/test/read.cgi/hp/1041641395/239 239 :Name_Not_Found :03/01/21 04:32 ID:???
<div class="abc"></div>で囲んだら下側のマージンだけが無視されます。
cssには
.abc{margin:5% 5% 10% 180px;}
としか書いてません。
最初はこれでちゃんと表示されてたんです、なのにソースいじってたら…。
ブラウザはIE5.5です。NN7で見たらちゃんと下に余白ができてました。
なんとかしようと頑張ってたらいつの間にかこんな時間だしもうダメポ(;´Д`)
>>763 >>751 の問題はOpera6.05ではちゃんと効いているみたいです。
正式版に期待ですね。
765 :
Name_Not_Found :03/01/23 20:28 ID:8jm8EWij
WinXPのIE6です。 p{ text-indent: 1em;} と指定した長い段落がページをまたいだとき、 段落の途中にもかかわらずページ最初の行が 1文字分インデントされるのですが、既出ですか?
766 :
765 :03/01/23 20:28 ID:8jm8EWij
印刷した場合です。言葉足らずですみません。
>>765 Mozillaとか、Operaで試したらそんなこと起こらないね。
IEのCSSのバグっぽい。
Windows Internet Explorer 6(モード問わず) 幅を指定していないブロック要素以下に、form>textareaを配置し、 textareaの幅を80%など相対指定すると、 そのHTMLファイルを開いた時は、 ブラウザにより自動的にリサイズされたブロック要素の幅を基準に、 textareaの幅が決定されており、正常なのだが、 textareaになにか文字を入力すると、textareaの幅が拡大する。 <html> <head> <title>文字を入力すると拡大するtexarea</title> <style type="text/css"> form { margin:auto 256px auto 64px; } textarea { width:80%; } </style> </head> <body> <form><p><textarea cols="40" rows="12"></textarea></p></form> </body> </html> うまく説明できてないのでソース付き。
770 :
Name_Not_Found :03/01/25 19:29 ID:nSk+UYFp
bodyにtext-align:center;設定した場合にテーブル配置したら、 IEだとテーブルがセンタリングされるけどNN7だとされないのはどっちが正しいの?
773 :
スタイル30 :03/01/26 11:27 ID:smGK9BRm
styleタグですが、IEの場合は、30種類の<style></style>しか 認識できないのでしょうか? IEのバグですか?(ネスケなら問題ないみたい) どこかに公表ってされてます?
>>773 の言わんとしている事が、さっぱりわからないのは俺だけですか?
(=゚ω゚)ノオレモ(=゚ω゚)ノオレモ(=゚ω゚)ノオレモ-
俺漏れも
IEの方が圧倒的大多数なんだよIEに合わせろってんだまったく
>>777 の言わんとしている事が、さっぱりわからないのも俺だけですか?
俺もだから大丈夫
オレは分かるなー、>777の言ってる事。
まー実装がばらばらであるからこそ、 俺らの飯の種になるわけですよ。
784 :
スタイル31 :03/01/27 14:56 ID:j07Vo/rC
773の件、説明不足でした。 IEだと31個までしかスタイルを認識してくれないです。 <HTML> <BODY> <STYLE type="text/css">.tes1 {font-size:20pt;}</STYLE> <STYLE type="text/css">.tes2 {font-size:20pt;}</STYLE> <STYLE type="text/css">.tes3 {font-size:20pt;}</STYLE> 〜〜 中略 〜〜 <STYLE type="text/css">.tes30 {font-size:20pt;}</STYLE> <STYLE type="text/css">.tes31 {font-size:20pt;}</STYLE> <STYLE type="text/css">.tes32 {font-size:20pt;}</STYLE> <STYLE type="text/css">.tes33 {font-size:20pt;}</STYLE> <A class="tes1">1 番目</A><BR> <A class="tes2">2 番目</A><BR> <A class="tes30">30 番目</A><BR> <A class="tes31">31 番目</A><BR> <A class="tes32">32 番目</A><BR> <A class="tes33">33 番目</A><BR> <A class="tes1">1 番目</A><BR> </BODY> </HTML> 長さ制限に引っ掛かるので、「中略」とさせていただいてます。
ネタだよ・・・な・・・?
ネタじゃないにしてもまともにCSS使ってる奴らには関係無いなw
style要素の数に制限は無い筈だから、ブラウザ側の仕様かバグだろうね。
>>784 の労力を讃えてage
ところで…もちろんバグの回避方法は分かってるんだよね?
分かってて単なる好奇心から試してみたんだよね?
790 :
スタイル31 :03/01/27 19:39 ID:j07Vo/rC
コメントありがとうございます。 作ってたら、あるときからスタイル読まなくなって、 で、解析のために作ったソースが784です。 バグの回避方法は・・・ 「そんなに<style>タグを使わないように見直す」 です。 ありきたりで、叩かれそうですが・・・。 787の言われるとおり、IEの仕様かバグのような。 MSのIEのページは調べたけど探しきれなかったです。 誰か知ってますか?
>>790 <STYLE type="text/css">.tes1 {font-size:20pt;}
.tes2 {font-size:20pt;}
.tes3 {font-size:20pt;}
〜〜 中略 〜〜
.tes30 {font-size:20pt;}
.tes31 {font-size:20pt;}
.tes32 {font-size:20pt;}
.tes33 {font-size:20pt;}</STYLE>
>>790 >作ってたら、あるときからスタイル読まなくなって、
マジダッタノネ…(´Д`;)
というかStyleが二回以上出てくるHTMLドキュメントなんて見たことね-よ(w
>>790 悪いことは言わんから、もうちょい基本から勉強し直してみ。
Opera7.0b2 fieldset{border : none;}が効かない。6.05では効く。 回避方法は{border-width : 0px; border-style : 何か適当;"} どうも、widthとstyleを決めてやらないとダメっぽ。
× 何か適当;"} ○ 何か適当;} typoです。スマソ(´Д`;)
ふつーにやっていたらまず発見できなかったバグを発見した
>>790 はある意味神.
title要素3つ書いて、反映されないって騒ぐのに似ている・・・。 あれも、仕様上では幾つ書いても良かった気がする<HTML4.01
>>799 title (と base)を2個以上書くのはinvalid。
<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->
<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
とされている。