CSS/DHTMLバグ辞典スレッド 第４版

【Netscape7.1/Win】
type属性がfileのinput要素（ファイル名入力フィールド）にはborder-styleとborder-widthとが無効。
例）
.abc {border: 10px double #00f;}
<input type="file" class="abc">←無効 <br>
<input type="text" class="abc">←有効

xhtmlで<textarea>...</textarea>って
<textarea />だけでいいんだっけ？

IE6標準モードは</textarea>必要だったけど、
gecko標準モードはおｋだったので聞いてみました。

誤爆です。。

>>550
ttp://altba.com/yuu/blog/archives/000678.html

トラックバックとか追いかけてみ。

新年の更新に期待してage

Opera 7.53

form.mukankei input:before {
content :"-";
color: #0000ff;
}
input.test1 , input.test2 {
color: #ff0000;
background-color: #000000;
border: 1px #999999 solid;
}
input.test1:hover {
color: #00ff00;
}

<form action="test.cgi" method="post">
<p>
<input type="submit" value="push" class="test1" />
<input type="submit" value="push" class="test2" />
</p>
</form>

---------------
標準のボタンオブジェクトが描画され、
:hoverのスタイル指定した前者のinputオブジェクトにいたっては
押せなくなります(押しても送信に行かない)。
form.mukankeiのところの指定をコメントアウトすると
きちんと動くようになります。

置換要素に:before,:afterは効かぬのが標準仕様らしい。
CSS2には明記されてないのでCSS3で明記されるとさ。
(置換要素で:before使いたいときは::outside::beforeになる予定。)

あと、operaはデフォルトでフォームオブジェクトにスタイル適用しない設定
になってた気がする。

<tr>
<td height="50" colspan="3" valign="top"><IFRAME
name="header" marginWidth=0 marginHeight=0
src="Headnews.htm" frameBorder="0" width="100%" scrolling=no
height=100% leftmargin="0" topmargin="0"></IFRAME> </td>
<td colspan="2" valign="top"><img src="BOTTOMDRAGON.jpg" width="275" height="50"></td>
<td></td>
</tr>

上記のようにありますが、NETSCAPEで見るとIFRAMEの下に２０ｐｘスペースができて
全体が崩れてしまいます。お願いします。誰かこの直し方教えてください！！
ありがとうございます。

>>556
スレ違い

>>555
おおっ、置換要素に:before :after効かないのは初めて知りました。
ありがとうございます。

ただ、気になるのは>>554の例だと
「form.mukankei input:before」の部分を
「li *.test0:before」にするとちゃんとスタイルシート効いて表示されますが、
「li *:before」だとやっぱりダメだったりするあたり。
liの中にinputなんて書いてないって・・・。

テストページとか作成した方がわかりやすい希ガス

Mozillaでテーブルの上下マージンがつぶされないのはバグ？

無料鯖のIDとパス公開してみんなでテストページにうｐしたら・・・
えらいことになるだろな。

性善説がまかりとおる世界に行きたい。

>>561
CGIで数個のファイルを一塊として20KB程度の制限つきで置けるアップローダでも作ればいいんじゃないかね？

フロートを含むボックスのマージンが無視される(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b149.html
「例示」のソースに不備があります。
<div style="margin:1em; background:aqua;">
<div style="float:right; width:50%;">float</div>
<div style="clear:right;">clear</div>
</div>　←この終了タグが脱けてます。

【Internet Explorer 6（標準モード）】

左マージンをem単位で指定したブロック要素に対し、
そのブロック要素に対するfirst-letter擬似要素でフォントサイズを変更すると、
そのブロック要素の左マージンがfirst-letter擬似要素適用後のフォントサイズを
基準に計算されてしまう。

p { margin-left: 3em; border-left: 1px solid #000; }
p:first-letter { font-size: 50%; }

<p>この場合、フォントが小さくなるのでborderより左に文字がはみでる。</p>

当方Opera7.53 Windows2000です。

<div style="position:absolute; text-indent:-100px;">あいうえお</div>

↑これやるとすごいことになります。

すごいかどうか、はこのスレの範疇じゃないだろ。
ちゃんと症状検証して報告しろよ。

font-size : 5000px;のほうが凄いがな

position: abosolute;
のときにtext-indentをマイナスの大きめに設定すると
横スクロールバーがすごいです

display : none;でいいじゃん。

>>569
それじゃdivごと消えちまうｗ
例えばdivの背景に画像を表示させて、テキスト部分のみを非表示にしたいからでしょ。

じゃあテキストだけdisplay : none;でいいじゃん。

<div id="foo;">
<p>あいうえお</p>
</div>

div.foo{
　　position:absolute;
　　width:xx;
　　height:xx;}
.foo　p{
　　display:none;
}

>>571
そのためだけにマークアップするのかと（ｒｙ

マークアップがいやなら

<div style="〜">
<p style="〜">あいうえお</p>
</div>

釣られないぞ釣られないぞ釣られないぞ

じゃぁheight : 0;でオーバーフロー。IEは別に用意する必要があるけど

>>573はマークアップの意味が良くわかっていないようなので訂正

そのためだけにタグを付加するのかと（ｒｙ

スレ違いだからやめよーよ

更新に期待してage

Firefox1.0で、
a:hover{text-decoration:none;}が効いたり効かなかったりするのですが
バグでしょうか？

効かない場合のソースかサンプル出されないと何とも言えん。

borderやらfloatやらごちゃごちゃ使ってないかい

CSSはa:hover{text-decoration:none;}だけ
htmlはアンカー多分全部
<a href="http://www.google.co.jp/">link</a>
<a href="http://www.google.co.jp/">link</a>
<a href="http://www.google.co.jp/">link</a>
↑全部効かない

<a href="http://www.google.co.jp/">link</a><br>
<a href="http://www.google.co.jp/">link</a><br>
<a href="http://www.google.co.jp/">link</a><br>
↑これを連続させると2,3,2,3の順番で効かない（？）

<ul>
  <li><a href="http://www.google.co.jp/">link</a></li>
　　　：
　　　：
</ul>
↑効いたり効かなかったり

>>583
ツール/編集 → オプション/設定 → 全般 → フォントと色 → リンクに下線を付ける
これにチェックを付けていると再現された。チェックを外せば大丈夫。バグだね。

Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:1.7.5) Gecko/20041108 Firefox/1.0
で確認

回避方法。
a {text-decoration:underline;} を事前に明示しておく。すると
a:hover {text-decoration:none;} がちゃんと全てのアンカーでちゃんと反映される。

チェック外しても先に明示しても変わりありませんでした
ちがうところといえばWindows NT 5.1というところだけですが・・・

解像度とか拡大縮小とかでないよね？

>>582
<ul><li><a　href="http://www.google.co.jp/">link</a></li><li><a　href="http://www.google.co.jp/">link</a></li></ul>
とした方がいいよ。

<p><img src="****.jpg">テキスト</p>
floatを左右どちらに指定しても、画像とテキストの上端が揃わないことがあります。
Mac IE 5.2

ガイシュツだったらすいません。

floatを何に指定するのか、標準モードなのか互換モードなのか。

MSIE6.0
backgroundプロパティ
background-colorプロパティを
*に適用すると空のテーブルのセルが表示されてしまう。
(empty-cells以外のプロパティで空セルのボーダーの操作ができてしまうのは問題。)

>>590
意味不明

>>591
* は全称セレクタだってこと位は知ってるよね？　
で、空のセルがあるテーブルがある場合に不具合が、ってことだろ。

>>588
当たり前だろうが。
初期設定のスタイルシートがどうなってるか分かってんのか。
pには上下マージンがある。
imgにはない。
揃うわけがないだろ。
合わせたけりゃてめーで合わせろ。

>>593　まあWinIEにはこんなバグがあるけどね。
　p要素などをフロートにすると上マージンが消える(5.x/6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b169.html

というか593のレスだと全くもって適切でないことは本人にはわからんのだろうか。
初期設定でpにマージンがありimgにマージンがないと決まっているのだったら、
588のソースでは（もちろんこれも不備だらけだが）結果は一定になるはずだ。
揃わないことがある、なら、揃うこともある、んじゃないのか？

そこんとこをはっきりさせてバグの有無と原因を究明するスレではなかったのか。

NN6ってform要素がinline化できない？
form要素とinput要素両方ともdisplay:inlineの指定してるのに
改行されちゃうから対処にこまってまつ。対策ないですか？

>>596
http://pc5.2ch.net/test/read.cgi/hp/1104596224/

もう二ヶ月以上、更新されてない。心配だ。↓
http://cssbug.at.infoseek.co.jp/index.html

もともと月一くらいの更新ペースだったしキニスンナ
年度末は何かと忙しいだろ

600ｹﾞﾄｰ(n@｀･ω･´@)n

いや、こんな間を空けたのはいままでで一番だよ。>>599
前から更新ペースも落ちてきてたし。彼一人に負担をかけっぱなしだから気に懸かる。

いやだから、負担かけるのがマズイって思ってんなら催促するような書き込み控えれ。

IE6.0

.base{width:80%;}
.main{background-image:url('bg.gif');filter:Alpha(opacity=50);}
<div class=base>
<div class=main>内容</div>
</div>

.mainの方にもwidth指定しないと、なぜかfilter適用されなかったので報告
ｶﾞｲｼｭﾂだったらごめん

>>602　
もし管理人がもう更新できなくなってきてるなら、その旨明言して貰って、
有志が分担するか交替するかした方がいいのかもよ。

>>604
だからそんなこと言い出すこと自体時期尚早だ、っつってんのに。
せかすようなこと言うんだったら不在時分だけまとめてどこかにアップすれば？
そこから確認できた分だけピックアップして反映してもらえば無駄にならないし、
ここで更新催促めいた発言するよりいくらか建設的でしょ。
何をそんなに焦ってるのかよくわからんけど。仮定前提に話進めるなよ。

>>603
バグでもなんでもないね。そもそも標準の仕様が存在しないし。
MSの仕様によればfilterはhasLayoutがtrueを返す
オブジェクトにしか適用されない。よって仕様通りとしか言いようが無い。

>>606
指摘ｻﾝｸｽ

「俺新管理人やりたい！」とかいうのがいるのか？

俺新管理人やりたい！でも、面倒です！

以下のソースで、id3にボーダーと背景色が適用されません。
#1 {
border:3px #000 solid;
position: relative;
width:90%;
}
#3 {
border:3px #F00 solid;
background-color:#FF0;
}

<div id="1"><div id="2">
　<h1 id="3">Hallo World.</h1>
</div></div>
・id1の方のスタイルで三つのうちどれか一つでも省けば発生しない。
・positionはrelative以外のときは発生しない。
・id2のあとに空白以外のものを入れると発生しない。
・id3の要素はブロック要素なら多分どれでも発生する（div,h1〜h6,pは検証済み）。
・IDでなくdiv要素にスタイルを指定すると発生しない。h1〜h6では同様にしても発生する。クラス指定はID指定と同じ挙動。
・borderは適用されて背景色は適用されない瞬間があったけど、記録し忘れた。（幻覚かもしれない）
・インライン要素でも発生した瞬間があったけど、記録し忘れた。（幻覚かもしれない）

ここまで限定された条件下でのバグも珍しいような・・・。
もっと絞れそうな気もするんですが、今日はもう寝ます。

>>610
IE6.0でWindowsXPです。

どうでもいいがIDは数字で始まっちゃダメだぞ★

------------------------------------------------------------------------
<div style="border:1px solid red;">
<div style="float:left; background-color: blue; margin:0px 10px;">■</div>
<div style="float:left; background-color: green;">■</div>
あいうえお
</div>
------------------------------------------------------------------------
既出だったらごめんなさい

margin:0px 10px;
で左右のマージンの幅が違う、左が右の倍くらい空きます。

XPでIE6.0です
FireFoxやOperaではちゃんと表示されます

>>613-614
既出。調べてから書き込んでね。
http://cssbug.at.infoseek.co.jp/detail/winie/b107.html

調べるのめんどくさかったんだ
ご苦労

あ、ごめん
調べたんだけど書き忘れてた、既出でしたね。

もー！　(ﾟдﾟ )sageたら偽者が出るだろー！

IE6.0
first-letterを与えたブロック要素の2回目の出現以降、後続に続く要素のmarginが
無視され、first-letterを与えた要素のmarginが適用される（ように見える？）
borderは通常あるべき位置に描画される。
ってか口で表すのは難しい…下のソースコピペして誰か解析してくれ

<html>
<head>
<style>
h1 {margin: 0 5%;}
h1:first-letter {font-size: 150%;}
p {
margin: 1em 10%;
padding: 1em 3%;
border: 1px solid #000000;
}
</style>
</head>
<body>

<h1>AAA</h1>
<p>hoge</p>

<h1>BBB</h1>
<p>hoge</p>

<h1>CCC</h1>
<p>hoge</p>

</body>
</html>

>>619
http://cssbug.at.infoseek.co.jp/detail/winie/b099.html
これじゃない？

>>620
あったのですね…お手数かけました

何故しらべないで書き込むのか。よく読め。↓
http://cssbug.at.infoseek.co.jp/index.html

<head>
span{ font-size:35pt;font-weight:bold;color:navy;position:absolute;filter:shadow(color=#ffff00,direction=125)}
</head>
<body>
<table border=1>
<tr><td width="220" height="50" align="left"><span>何を言う</span></td><td>早見優</td></tr>
<tr><td>上裕</td><td>北天裕</td></tr>
</table>
</body>

すいません、上記のようにCSSでFilterかけてtable内に表示させようとしたのですが「何を言う」が
枠からはみ出してどうにもなりません。
何か間違ってるのでしょうか？

スレ違い

>>624
すいません。質問スレ行くべきでしたね。忘れてください。

WinIE5.5,6.0などのCSSのバグと同様の事象が、Firefox1.0(日本語版)でも見受けられました。

select要素ではz-indexやborderなどのプロパティを無視する
ttp://cssbug.at.infoseek.co.jp/detail/winie/b112.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
--略--
<form>
<select style="border-style:solid; border-width:10px; border-color:black; width:300px;">
--略--
<input type="text" style="border-style:solid; border-width:10px; border-color:black; width:300px;">
</form>

でSelectの色、太さ、線種の設定がIE6.0とFireFox1.0(日本語版)で反映されません。widthは反映されています。
ipuntに関しては問題なく色、太さ、線種が反映されています。

Opera7.53、Mozilla5.0(rv1.8b2)ではselectもinputも問題なくすべて反映されました。
これは、Firefoxのバグと考えていいんでしょうか？
firefoxのバグならば、もじら組にでも報告しようと思うのですが。

わざとWindowsの標準から離れないように（IEと同じに）
してるんじゃなかったっけ？
昔のMozillaは自由すぎて、それこそ四角いラジオボタンとか何でもアリだったから。

Operaみたいに「フォーム部品にスタイル適用しない」っていう設定を
作るべきとは思うが。

どうでもいいようなバグな上に既出かもしれないけど
WinIE6.0でdottedまたはdashedの一部を重ねると表示がおかしくなる。

<body style="line-height:130%;">
<div style="border:1px dashed;margin:0;padding:5px;
border-bottom:none;margin-bottom:-0.5em;">
ああ
</div>
<div style="border:1px dashed;margin:0;padding:5px;
border-top:none">
ああ</div>
</body>

XP SP2 + IE6。おそらく既知外。
p#nullpoの上パディングが通常の倍になる。

<style type="text/css">
#hoge {
float: left;
line-height: 112.5%
}
#foo {margin: 0}
#nullpo {
margin: 0;
padding: 1em;
border-style: solid;
clear: left;
}
</style>
<p id="hoge">hoge</p>
<p id="foo">foo</p>
<p id="nullpo">nullpo</p>

・#hogeのline-heightが112.5%以上、floatはleftかright
・#fooと#nullpoのマージンが0
・#nullpoでfloatをclear。

以上の条件を満たすと発生するみたい

>>629
>>527

でも>>527ではline-heightは条件に入ってなかったが。どうなの？

なんで基地のバグに余計なもの付け足したら新しいバグになると思ってんの？

新しいバグだなんて言ってないな。
line-heightは条件に入るのか入らないかって訊いてるんだろ。

Firefoxで<table>の他要素のマージンが重ならないのは仕様ですか？
一応調べたのですが対策等はないのでしょうか。

<html>
<head>
<style type="text/css">
<!--
p, div, h1, table{margin:1em;}
-->
</style>
<title>margin test</title>
</head>
<body>
<p>test</p>
<div>test</div>
<table border="1"><tr><td>aaa</td><td>bbb</td></tr></table>
<p>test</p>
<table border="1"><tr><td>aaa</td><td>bbb</td></tr></table>
<h1>test</h1>
<table border="1"><tr><td>aaa</td><td>bbb</td></tr></table>
<p>test</p>
</body>
</html>

「他要素のマージンが重ならない」って意味不明。
他要素とは何で、重ならないとは何と重ならないのか、そしてどう重ならせたいのか。

>>635
たとえば上のソースでは<table>と<p>の間などに2emの隙間ができてしまいます。
IEでは1emなのですが、これはどうなのでしょうか。

それは「マージンの相殺」と呼ぶ。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#collapsing-margins

>>637
すいません、普通なら行われるはずのそれが行われていないのですが、これはバグですよね？

>>634
それでやってみたら、IE6でもtableとh1とのマージンは相殺されなかったが。

ごめん>>639は取り消し。margin:1em;だからfont-sizeに合せられるのね。

＞tableのマージンが他の要素のマージンと相殺されない
Netscape7.1でも再現するね。
Opera7.54では大丈夫だった。

【Netscape7.1/Win98SE】
等幅フォントで表示させたとき、太字の行末文字の端がちぎれる。

body {font-family:"ＭＳ 明朝", monospace;}
strong {font-weight:900;}
<strong>壱弐参肆伍陸漆捌玖拾壱弐参肆伍陸漆捌玖拾</strong>

字数が少ないと再現しないことがある。

cf.
ボールド体の文字列が前後の文字列と重なる(N6.x/N7.x)
　http://cssbug.at.infoseek.co.jp/detail/mozilla/b035.html
等幅ボールド文字が欠ける
　http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=395　

Safari 1.2.4(v125.12)　標準／互換両方
colorに不正なtransparentを指定すると透明になってしまう。

<html>
<head>
<style type="text/css">
<!--
p { background-color: #aaa; }
p#hoge { color: transparent; }
-->
</style>
<title>hoge</title>
</head>
<body>
<p>hogehogehogehogehogehogehogehoge</p>
<p id="hoge">Safariでは透明になります。</p>
</ul>
</body>
</html>

>>643
ただのcss3先行実装

transparent = rgba(0, 0, 0, 0)
ね。

すみません、バグ辞典を見ても判らないので…教えてください。

Win/IE6の場合は、その１・２両方とも内側のDIVのmarginが効くのですが、
Win/NN7だと、その１は内側のmargin-topが、外側のDIVに効いているようなのです。
これの回避方法はありますでしょうか？

その１
<div style="width:500px; height:100px; background-color:#ff8888;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

その２
<div style="width:500px; height:100px; background-color:#ff8888; border:1px solid #000000;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

>>646
ttp://cssbug.at.infoseek.co.jp/detail/winie/b172.html
と症状は同じだけどフロートに隣接してなくてもおこるのね。
どうもIEはheightを指定すると子要素との間でマージンを相殺しなくなるっぽいな。

正しいのはNNのほう。IEにあわせたいのなら1pxのパディングをとるとかかな。

>>647
それとは違うでしょ。
確かに外側のdivに内側のdivのmarginが適用されるっぽい。
俺なら外側のdivにpadding-topとかで逃げるかな。

>どうもIEはheightを指定すると子要素との間でマージンを相殺しなくなるっぽいな。
width か height が指定されていると、発生する模様。
他にも width と height で挙動が変化することがあるけど、
M$ はどうしてこういう訳の分からん実装を平気でするかね。

>>647さん
>>648さん
>>649さん
レス有難う御座います。

NNの方が正しいのですか。
borderの有無だけで中のDIVのmargin-topが変わるのはおかしいので、
NNの方が間違っているのかと思いました。

解決法ですが、paddingを使用するとIEとNNで縦幅が変わってしまいますよね。
最終的にはborderは無しにしたいのですが…

その３（IEだと縦100px、NNだと縦102pxになります）
<div style="width:500px; height:100px; padding:1px; background-color:#ff8888;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

>>650
上下だけ外側のボックスのpaddingで指定して左右は内側のボックスのmarginで指定すればいいじゃん。

>>651さん
いえ、paddingを使用すると縦が長くなってしまいますので、ダメなんですよー。
下記のサンプルの場合、外のDIVをpadding-top:20pxとするなら、
それにあわせてheightを80pxにしないと縦が延びてしまうのですが、
そうすると今度はIEで縦が短くなってしまうのです。

その４
<div style="width:500px; height:100px; padding-top:20px; background-color:#ff8888;">
<div style="margin:0px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>

形が崩れないようにするのに、こんなのはどう？

<div style="width:500px; height:100px; background-color:#ff8888;">
<div style="position:relative; left:400px; top:20px; width:90px; background-color:#8888ff;">
test
</div>
</div>

>>653さん
おお！そういう方法もあるのですね...勉強になります。
今回はこれを使わせていただきます！
ありがとうございます〜。

>borderの有無だけで中のDIVのmargin-topが変わるのはおかしいので、NNの方が間違っているのかと思いました。

藻前がマージンの相殺(Collapsing margins)について理解不足なだけ。

バグ辞典になかったので、一応報告です。Opera7.23で確認しました。
擬似要素のfirst-letterが表には効かない。


<html>
<head>
<title>test</title>
</head>
<style type="text/css">
<!--
h1:first-letter{
color:red;
}
td:first-letter{
color:red;
}
-->
</style>
<body>
<h1>1234</h1>
<table>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
</html>

>>656
blockにしか効かないのがCSS2仕様ですが

>>657
う、仕様でしたか。
IE、ネスケ、火狐だと効いたので、Operaが変なのだと思ってました。
どもです。

>>657-658
http://www.w3.org/TR/CSS21/selector.html#x53
> The :first-letter pseudo-element applies to
> block, list-item, table-cell, table-caption and inline-block elements.

>>657
Opera7(CSS2.1)に対してCSS2の話は不適切だが、一応。
(つうか、お前のような初心者こそが調べなきゃならんわけだが。)

http://www.w3.org/TR/CSS2/selector.html#x52
> The :first-letter pseudo-element matches parts of block-level elements only.

http://www.w3.org/TR/CSS2/visuren.html#block-level
> Block-level elements are those elements of the source document
> that are formatted visually as blocks (e.g., paragraphs).
> Several values of the 'display' property make an element block-level:
> 'block', 'list-item', 'compact' and 'run-in' (part of the time; see compact and run-in boxes), and 'table'.

初心者つうかにわか知識の自称中級者くさい

更新されないね。
http://cssbug.at.infoseek.co.jp/index.html

まだぎゃあぎゃあ騒いでんのか鬱陶しいな。

報告です。
絶対既出だろうと思ったんだけど見つけられなかった…。

Win/IE5で画像にリンクを設定してa:hover{color:;}とかで
ボーダーの色が変えられない。Macではちゃんと変えられる。
さっきまでhttp://pc5.2ch.net/test/read.cgi/hp/1110236393/292-で
質問してたんですが、対処法は↓のリンクにある
JavaScriptを使う方法しかないんでしょうか？

参考URL:
GAC HTML�[3542] オンマウスで変化する画像の枠線
ttp://www.gac.jp/article/index.php?stats=question&command=msg&category=3&id=3542

a:hover img{color: ;} とかじゃダメですか?

>>664-665
わかってないのに質問したり回答したり。
a:hover img {border:1px solid #f00;} で、出来る。
できないのは単にIE5なんて古いヴァージョン使ってるからだろ。
borderプロパティーがインライン要素にも適用可能になるのはWinIE5.5からだよ。

>>666
CSS対応状況表
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/box.html#border
>border
>Win版 MSIE 4〜5
>非置換インライン要素に対して指定しても効果がない。

imgは置換インラインだが……。

http://game10.2ch.net/test/read.cgi/ff/1110811488/
の330からしたが表示がなんかおかしい
改行に幅ができるし

>>668
確かにそれもIEのバグだけどなー。
でも、今更指摘されてもという感じもしなくもない。

たぶん、これ。

シリア語ブラクラ【しりあごぶらくら】[名]
WindowsXPでInternet Explorerの機能を使った
２ちゃんねるブラウザを使用した際に
突然行間が開いて表示されるために
AAが見にくくなるというブラクラの一種。
フォント"Estrangelo Edessa"に含まれるシリア語の文字
(Unicodeの1792番から1871番)を表示する際に起こる不具合を
利用しているのでこう呼ばれる。
対処としては上記フォントを削除するか、
＆＃１７９と＆＃１８を半角にしたものを表示しない(あぼ〜ん)設定にすればよい

【WinIE6準拠モード】

<!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>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>test</title>
<style type="text/css">
<!--
#outer{zoom:150%;}
#relative{position:relative;}
#static{position:static;}
-->
</style>
</head>
<body>
<div id="outer">
<p id="static">foo</p>
<p id="relative">bar</p>
</div>
</body>
</html>

fooは拡大されるがbarは拡大されない。
これってバグ？仕様？漏れのミス？

zoomなんてプロパティーは、マイクロソフトの独自拡張だっての。

更新されざること既に四箇月。
http://cssbug.at.infoseek.co.jp/index.html
勝手にミラー作って引き継いだら駄目かな？

いいんじゃね？

二の舞にならないようにwikiでやるとか

http://pc8.2ch.net/test/read.cgi/hp/1110236393/241-
268 ：Name_Not_Found：05/03/16 17:05:36 ID:???
>253
body {height:100%; overflow:auto;}
を入れると、position:absolute 指定がｆｉｘed指定と同じになる。
もちろん、fixedでも同じ。
274 ：268：05/03/16 18:56:17 ID:???
>270
１．標準モードにする
２．body {height:100%; overflow:auto;}
３．fixしたいブロックを position: absolute; で指定

おそらくIE6のバグなんだろう（ラッキーなバグだ）。
他のブラウザーは position: fixed; にしないとダメみたいだね。

>>241を見ると↓でハックさせてるみたい。

/* 全ブラウザー */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

276 ：Name_Not_Found：05/03/16 20:02:38 ID:???
* html
WinIEだとこんなものが通用するのか。

cf. http://www.stunicholls.myby.co.uk/menu/background2.html

既出だったらスミマセン。

IE6(非互換モード)だと、テーブルの一部の列の高さを固定にして、残りを可変にしようとすると
全部の列の高さが同じになっちゃうと思うんですが、コレってバグっすか？

あと、回避方法があるなら教えてください。イロイロ試したんですが撃沈。

ソースで書くとこんな感じです↓。

<table>
<tr style="height: 50px">
<td>hoge</td>
</tr>
<tr>
<td>hoge</td>
</tr>
<tr style="height: 50px">
<td>hoge</td>
</tr>
</table>

非互換モードって標準モードのことか？なら試したがそんな挙動はしない。以上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
html,body {margin: 0px;padding: 0px;width 100%;height: 100%;background-color: #000000;}
#outline {margin: auto;padding: 0px;height: 100%;width: 800px;background-color: #FFFFFF;}
#content {margin: 0px;padding: 0px;width: 100%;height: 100%;}
#header {margin: 0px;padding: 0px;width: 100%;height: 50px;background-color: #FF0000;}
#footer {margin: 0px;padding: 0px;width: 100%;height: 50px;background-color: #00FF00;}
#body {margin: 0px;padding: 0px;width: 100%;background-color: #0000FF;overflow: auto;}
//-->
</style>
</head>
<body><div id="outline">
<table id="content">
<tr id="header"><td>hoge</td></tr>
<tr id="body"><td>hoge</td></tr>
<tr id="footer"><td>hoge</td></tr>
</table>
</div></body></html>

そもそもpositionがちゃんと動作してくれればdivで出来るのでテーブルレイアウトなんてなくてすむのですが…

すみません、改行をデリートする際にメッセージの一部まで消してました。

標準モードで試していただいたとの事ですが、上のコードでもう一度試していだたけますでしょうか？

>>677
なんというか、lint掛けて勉強汁とか基本仕様嫁としか…
一言だけ申し上げれば、CSSってIDとかCLASSだけに掛かる訳じゃないから。

とりあえず擦れ違いかと。

とにかくバグって言えば良いと思ってるんだな

http://pc8.2ch.net/test/read.cgi/hp/1113106800/157
157 ：Name_Not_Found：2005/04/19(火) 14:31:08 ID:???
リンクのhover時にのみ下線を出すようにCSSを指定したのですが、sfari、Mac版IEだと
下線を表してくれません。Netscape6では下線を表示するので、書き方自体間違ってるわけでないと
思うのですが…。Mac版のsafari、IEの固有の癖のような物なのでしょうか?

a:link {
color: 003399;
text-decoration: none;
}
a:visited {
color: 333333;
text-decoration: none;
}
a:hover {
color: 660000;
text-decoration: underline;
}
a:active {
color: 336633;
text-decoration: none;
}

Internet Explorer 7 beta 1の片鱗が明らかに〜公式ブログで公表
http://internet.watch.impress.co.jp/cda/news/2005/04/25/7418.html

PNG画像におけるアルファチャンネルのサポート
改善点の一例として既に、CSSの通称「peekaboo」バグと「guillotine」バグが修正されているという

peekaboo
ttp://www.positioniseverything.net/explorer/peekaboo.html

guillotine
ttp://www.positioniseverything.net/explorer/guillotine.html

それぞれ、このスレのバグリストの何番に該当するのかは未調査だけど。

http://pc8.2ch.net/test/read.cgi/hp/1113106800/250-
250 ：Name_Not_Found：2005/04/25(月) 01:07:06 ID:???
WinXPSP2 / Firefox1 / HTML,CSS共にUTF-8で記述

font-family;monospace;

で文字が一回り小さくなるのは仕様ですか？
IEでは100%のフォントサイズで表示されるんですが・・・。

>>685
ギロチンは、これか？
http://cssbug.at.infoseek.co.jp/detail/winie/b103.html
http://cssbug.at.infoseek.co.jp/detail/winie/b102.html

いないないばあ、は未登録かも。意外だ。

でも、もっと大きなバグがあるよな、WinＩＥには。
そっちをちゃんと直してくれっての。

ｶﾞｲｼｭﾂかもしれないのですが、書かせていただきます。

外部CSSでテーブルのセルにpaddingを設定し、似たような設定にしたくてそれをコピーして違う名前のクラスを作り、別のセルに設定したら、Mac IE5.2で効かないという現象がありました。
例えて言うなら

.pad1{padding:5px 10px 10px 10px; font-size:12px;}
.pad2{padding:5px 10px 10px 10px; font-size:10px;}

のような感じです。
すると、Win IEやSafariではきちんと反映されるのに、なぜかMac IEでは効きません。
仕方なく、内部CSSとして設定するとちゃんと反映されます。
これってバグでしょうか？
以前にも、コピーした設定でクラスを作り直すとMac IEで効かないという同じような現象が起きており、原因が知りたいのです。
どなたかご存知ありませんか？

ただ単にキャッシュされているだけという落ちじゃないだろな？

超ｶﾞｲｼｭﾂなのかもしれませんが、書かさせていただきマンモス。

背景色を設定している div のブロックの最後について、
　・コメント、もしくは、display:none 指定された要素で終っている
　・表示される最後の要素に padding-bottom が指定されている
という条件を満たしたとき、
div ブロックに後続する次の要素の１行目にまで背景色が適用されてしまう、
という現象が発生しました。
なお、IE6で発生、FireFoxでは発生しませんでした。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hoge</title>
</head>

<body>
<div style="background-color: #CCC; margin:0; padding:0;">
<p style="padding-bottom: 1px; margin:0">foo</p>
<!-- -->
</div>

<p>ここの背景色まで #CCC になっている。</p>

</body>
</html>

フォントサイズの指定が表要素に継承されない(5.x)
http://cssbug.at.infoseek.co.jp/detail/winie/b023.html

このバグはWinIE互換モードで起こる筈だが、バグ回避法である
body, th, td {font-size:85%;}
を施すと、html4.01 TransitionalならNN・IE共に表示は同等で問題はないのだが、
xhtml1.0のtransitional（xml宣言あり）の場合には
なぜかNN7.1ではセル内のフォントが表外より小さくなり、IEは同じ大きさ。
なぜNNはxhtmlとhtmlとで挙動が変るのか。どちらが正しいのか？
http://pc8.2ch.net/test/read.cgi/hp/1113106800/472
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body, th, td {font-size:85%;} </style>
</head>
<body>
<table border="2"><tr><td>AAA</td><td>BBB</td></tr></table>
<p>BBB</p>
</body>
</html>

>>690
へ〜、面白いね。
<!-- -->がいけないんだね。
なんでコメントアウトでひっかかるんだろ・・・

>>691
<html> が 2 つあるのがそもそもおかしい。
XHTML の場合、<tr> 要素を <table> 要素の直下に書けるけど、
XHTML を解さないブラウザは <tbody> を省略しているとみなすかも
しれないので <tbody> を必ず書いた方がいい。

Netscape の res\quirk.css の 98 行目に font-size: -moz-initial;
という記述があるので、Quirk モードだと table 要素内部は初期サイズに
リセットされる。
XHTML だと Standards Compliant モードになるので、特に指定がない限り
仕様通りに親要素の計算値を継承する。

font-size に % を指定した場合、親要素の計算値に対する百分率を指定
したことになるので、
Quirk モードの場合、初期サイズの 85%
Standards Compliant モードの場合、初期サイズの 85% の 85% になる

正しいのは、初期サイズの 85% の 85% になる Standards Compliant
モードの方。

>>688
自分も正にそんな現象で悩んでます。
一つのcssファイルの中で効いているものと効かないものがある。
MacIEだけダメ、他はOK。
いろいろ試しながら修正してみた結果、効いているクラスのところをコピペして
クラス名などをひとつひとつ書き換える方法で今のところは凌いでます。
（効かなかったところは目には見えない情報か何かが壊れているとか？全くわからん）

cssレイアウトを始めてからますますIEが嫌いになりますた。
早くFirefoxあたりシェア50%程度まで普及しねーかな。

>>688
CSSの記述は
＞.pad1{padding:5px 10px 10px 10px; font-size:12px;}
ではなくて
.pad1 {padding:5px 10px 10px 10px; font-size:12px;}
のように半角スペースを入れたほうが良いよ。

今またいろいろ試していたら、とりあえずの原因？が解明。
効かなかったクラスの直前のコメントアウトを取ると、効くようになりました。

/*---文字サイズ---*/　←こういうやつ

あった方がわかりやすく有り難いけど、必要にせまられてるので
効かない部分のコメントは全部とっぱらってやった。

しかし効いている部分は直前にコメントがあっても全く問題なし。
もう訳がわからないのですが、一応ご報告まで。

>>696
ていうか charset指定してなかったんじゃないの

ここらへんか？
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2002/05b.html#d12n01
ttp://members.at.infoseek.co.jp/cssbug/detail/macie/b009.html

>>697
してます。Shift-JISっす

>>698
うぉぉぅ！正にそれだ。
コメントに「表示」と書いてしまっているところがありました。
無知でお恥ずかしい。勉強になりました。

688ﾀﾝは原因特定できたのだろうか。

>>699
Shift_JISだよ

>>700
わかってるよ！
cssの頭のやつは全部小文字で設定してるんだけど、不都合とかないよな？
@charset "shift_jis";

>>701
ここはバグ辞典スレだ。不具合があるかないかは自分で調べてあったら報告しろ。

>>702
おｋ。何かあったら書き込みます。

@charsetじゃなくてhttpレスポンスヘッダで指定すれ！このバカチンどもが

OS10.3.9 MacIE5.2.3

div要素に対してheightプロパティを%で指定すると
同要素にbackground: url(○○○.gif)と背景画像を指定しても表示されなくなった。
ｶﾞｲｼｭﾂっすか？

>>554-558(>>436も関連?)に追加ですが、Opera 7.54/WinXPにて

>>554はCSSを以下のように削っても再現しました。

input:hover { color: #00ff00 }
input:after { content: "hoge" }

また、以下のようにしても同様にボタンがフォーカスを得られなくなります。

input { vertical-align: hoge }
input:after { content: "hoge" }

OperaはINPUT要素やIMG要素にも :before や :after が効くわけですが、
なんかおかしくなるということだと思います。普通はやらないと思いますが一応。

最近の Safari（Web Kit）、<a name="anchor"></a> に飛ばないみたい。

で、それがＣＳＳのバグだとでも？

float および clearプロパティの使用例
http://hp.vector.co.jp/authors/VA022006/css/samples/floats.html
>【例３】：直前に匿名テキストがある左フロートを配置
>フロート直前の匿名テキストは元の場所を取り消されて，フロートの右側へ新たに
>流し込み直される筈です。匿名テキストが右側に流し込まれずに，一行分下の位置
>にフロートが整形されている場合，その実装は正しくありません。

……って、WinIEはおろか、Netscape7.1でもそんな風に表示されないが。
Mozillaですら実装が正しくないとは。
既出ですか？

Netscape7.1なんて古すぎだろ。
かなり前に修正されてる。mozilla1.7でもfirefoxでも無問題。

そもそも>>709の引用先は、仕様書のどこによって、そんなことを言ってるわけなの？
floatが始まる前の部位のテキストまで流し込むのは不自然でしょ。

>>709　
Opera7.5ではちゃんと表示される。

>>710　
古すぎってことはない。つい最近、先週になってNetscape 8.0がリリースされたんだから。
7.2だって出たのは去年の夏だ。日本語版ではいまだ7.1が最新だし。

これか？
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_3
>先行するインライン要素(または匿名インライン)の最後の行(インラインボックス)
>の上端とfloatした要素の上端(マージン辺)が一致するように配置しなくてはいけません。

でも何で、仕様書の浮動規則からそんな風に配置しなくてはいけないことになるのか、よくわからんなあ。

>>713
それ仕様書からの引用が適切じゃないね。

ttp://www.w3.org/TR/CSS21/visuren.html#floats
Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.

つかそのあと、
if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space
の意味が取れない。
2つのbe動詞の主語と目的語は？thatは何にかかってるんだ？

でもMozillaの中の人いわくすでに位置が確定している
フロート前のテキストを移動させるのは効率が悪いと。

be 動詞の目的語？？？

>>714　なら、これか？
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats
浮動ボックス直前の行に含まれる内容は、浮動体の側面に現れる最初の行へ新たに流し込みなおす。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#floats
浮動ボックスの前の現在の行にある内容はいずれも，浮動体の他(後)の辺の利用可能な最初の行に再び流し込まれる。

でも、既に位置が確定してるfloatが始まる前のテクストを何故移動せにゃならんのか、
確かに不審だ。わかってる人、誰かご教示下され。

WinXPsp2/Opera8です。

・外部スタイルシートを読み込み
・font-familyで複数のフォントを指定

としたとき、プロポーショナルフォントを指定しても等幅フォントになる。
自分の勘違いであってほしいのだけど、どうだろ。
Opera7.54以前でも同様だったかは失念。

>>717　もそっと具体的にソースを。フォント名も出してみて頂戴。

あい。

CSS
body, td, p, li{
font-size: 12px;
line-height: 160%;
color: #242424;
font-family: "Verdana", "Helvetica", sans-serif;
}
---
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（省略）
<link rel="stylesheet" href="hoge.css" type="text/css">
（省略）
<p>text</p>

こんな感じ。
ちなみに、font-family: "ＭＳ Ｐゴシック", sans-serif;　としても起きた。
外部スタイルシートを指定してても、
<p style="font-family:'ＭＳ Ｐゴシック',sans-serif;">
とした場合は無問題。

Operaスレにて解答いただけました。
バグリストにも記載済みの内容で、こちらの確認不足。
スレ汚し申し訳ない。
http://cssbug.at.infoseek.co.jp/detail/opera/b002.html

>>720　なんだ、古いバグだなあ。Operaは8.0になってもまだ修正してないのかよ。

>>715
補語だったっけ？まあそこら辺あまり覚えてないんでスマソ

IEでホイールクリックが効かなくなる原因を教えてください。

激しくスレ違いです

>>699
あー、俺もやったなー
/* ○○表 */

>>725
それは「表」の後に1文字空白が入ってるから問題ないんでないの?
というわけでコメントを閉じるときは必ず空白を入れること推奨

バグを把握することが大事

「Opera：フォントファミリ指定で1フォントしか認識しない(6.0/7.0)」
http://cssbug.at.infoseek.co.jp/detail/opera/b002.html

このバグは8.01で解消された模様。

【WinIE6】
テーブルに入れたtextarea要素に、paddingとwidth（乃至height）とを
共に%単位で指定すると、横幅（乃至縦高さ）が異常に長く伸びる。
textarea {
background:red;
padding:1% 1%;
width:10%;
height:1%;
}
<form method="post">
<table><tbody>
<tr><td><textarea cols="30" rows="3"></textarea></td></tr>
</tbody></table>
</form>

単位をemにしたり、padding指定を削ると、このバグは生じなくなった。
またNN7.1やOpera8.01では、このバグは全く起らない。

>>729は、http://cssbug.at.infoseek.co.jp/detail/winie/b085.html と似るが、別なのね。

Win IE 6
では、imgに、
width=""
と、指定すると画像が表示されないのだけど、それって
W3Cの仕様書には準拠してないでつか？

画像が表示されていないのは、pngのアルファどうたらのせいかねぇ、
とか思ってたのに。
数値を指定しろ、と言われればそれまでだけど、それとは別にバグとしての話。

CSSでもDHTMLでもないが、

width="" を指定した場合の挙動は書かれていない。
UA毎に勝手に判断して構わないはず

http://www.w3.org/TR/html4/types.html#type-length

>>731
数値を指定しろ

>>732
わかりました。
ありがとうございまつ。

922 ：Name_Not_Found：2005/06/23(木) 02:45:07 ID:???
body { background-color: white; }
body { background: url(bg.png) no-repeat fixed 0% 100%; }

↑って書いたときブラウザによって挙動が違うんだけど、これ、CSSの仕様的にはbackgroundColorは"white"になるのが正しいの？　それとも"transparent"？

923 ：Name_Not_Found：2005/06/23(木) 02:52:24 ID:???
transparent

936 ：Name_Not_Found：2005/06/23(木) 17:29:45 ID:vRm6+JtM
MacIEだけ、overflow: hidden;が無視されるってバグある？

937 ：Name_Not_Found：2005/06/23(木) 18:16:43 ID:vRm6+JtM
自己レス。
overflow: hidden;とfloatを同一セレクタに設定すると、無視される模様

>736
それ背景画像の設定ではまったことがある。
IE6・5・4、FF、NN7・6、Opera7、SafariでもOKだったが、MacIE5で発症。

<div class="hoge">hogehagehogehage</div>

↓でhage.gihは高さ幅10px。
.hoge {
width: 10px;
height: 0px;
float: right;
overflow: hidden;
background: url(../hage.gif) 0 0 no-repeat;
padding-top:10px
}

これ、まだ出てなかったよね？
【WinIE4〜】スター・ハック
Star html Selector Bug
http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html
http://kazu1107.ameblo.jp/day-20050530.html

普通に常識だと思われ

識別子の先頭にある「_」を無視する(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html
>プロパティ名の先頭にアンダーバーを付加したものを指定すると、
アンダーバーではなくアンダースコアでは？

また、
>余談ですが、なぜかアンスコハックはWinIEだけが読むとか思われがちなのですが、
>実はというかMacIE4.5もMacIE5.0も読みます。
>なので /*\*/ _property:value; /**/ などとする必要があります。
――とのこと。
http://slashdot.jp/articles/05/04/25/2135227.shtml?topic=41
cf.http://cssbug.at.infoseek.co.jp/detail/macie/b009.html

>>739
まあ未出なら登録しておけばよいでしょ。
といっても、サイトの方はもう半年以上更新されてないけど。
http://cssbug.at.infoseek.co.jp/
誰か引き継がないか？

【IE6互換】
既出だと思うけど、border-colorにinherit指定しても親要素のborder-colorじゃなくて該当要素のcolorを引っ張ってくる。
border-color:inherit;じゃあ明示したことにはならんのかな?

>>742
バグではなく、WinIEはborderに限らずすべてinherit値に未対応なだけだが。

cf. http://cssbug.at.infoseek.co.jp/detail/winie/b095.html

>>743
すべてじゃないな
directionと、unicode-bidiと、あと何か忘れたけど1つか2つは対応してる。

何故かというと、共通の値inheritが出来る前から
directionとかの草案には固有の値としてinheritがあって、
その時代に実装したから。

http://pc8.2ch.net/test/read.cgi/software/1119185749/674-
674 ：名無しさん＠お腹いっぱい。：2005/06/28(火) 22:05:31 ID:OdYe2R2+0
<table>タグの中で

<tr style="vertical-align: top;">
<td><img src="hoge.1jpg"></td>
<td><img src="hoge.2jpg"></td>
<td><img src="hoge.3jpg"></td>
</tr>

サイズの違う3つのjpgファイルを横に並べ、vertical-align: topで
上側を全て同じ位置に指定しようとしてみた。
結果IE、FireFoxではうまく表示されたものの、Opera8.01だけは
位置がバラバラになってしまった。
Operaにはなにか落とし穴やテクニックでもあるの？

vertical-alignは継承しない仕様。
IEは頭おかしいので継承する。
Firefoxはtrがmiddleでtdのデフォルトがinherit
operaはmiddleとかじゃないの？

td{vertical-align:top;}
でいけそうな気がするけど

>>746
いやvertical-alignはブロック要素に適用できませんから。
でもimg要素に適用させても同じらしいけどね。
http://pc8.2ch.net/test/read.cgi/software/1119185749/675-

>>747
適用対象はインラインとテーブルセル
trに指定した場合trでは無視されるが
tdでinheritとすれば当然継承される。

http://pc8.2ch.net/test/read.cgi/hp/1119682328/120
120 ：Name_Not_Found：2005/06/29(水) 14:29:22 ID:tO+jx5wS
liアイテムに対してtext-indentが効かないのは一般的でしょか？
ブロックレベル要素に含まれる文章の1行目に対して...といった説明からは微妙なのですが、
Safari 1.3(MacOS X 10.3.9)では効くものの、IE5.2.7(MacOS X 10.3.9)では無視されます。
ulに対して指定しても、liに対して指定しても同じです。

DT DDと違ってLIは便利だなあ。

いや、使い方間違ってるし。

IE 5.2.7 ってなんだよ。

IE5.1.7とごちゃまぜになったのでせう（哀）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Untitled</title>
<style type="text/css">
#foo.bar {color:#f00}
#foo.baz {color:#00f}
</style>
</head>
<body>
<p id="foo" class="baz">
Hello World!
</p>
</body>
</html>

同一IDの別クラスに対する宣言が複数あった場合、IE6（互換、標準とも）では最初の宣言しか
有効にならないようです。この例だと#foo.barのみ有効になりました。

#hoge.hage
なんて指定の仕方があったのか・・・

なんか違う希ガス

お前ら・・・

p#hoge.hoge[foo="bar"].hage:hover:link:visited#hohe.hee
だって文法的にはokだ。
異なるidとか、:link:visitedなんて絶対にマッチしないが。
あとは、疑似要素（疑似クラスじゃないぞ）は末尾に1つだけ付けないと
CSS2の段階ではそのセレクタは無視されるという点を気をつけないといけない。
（::first-line:hoverとか::first-letter::afterってのはCSS2ではありえない事になってる。:hover::first-lineならアリ。）

http://www.w3.org/TR/2005/WD-CSS21-20050613/grammar.html

そっちが違うんじゃなくってさ

>>754　class="bar"が存在しないが。

Opera8.01…

>>759
失礼、class="baz" を class="bar" にしたらスタイルが有効になった、という意味でした。

で、その後いくらか試してみたんですが、
class="bar baz"
とすると.bazのスタイルが有効（青）になり、
class="baz bar"
とすると.barのスタイルが有効（赤）になりました。
Firefoxではいずれのケースも.bazのスタイルが適用されています。

<p id="foo" class="baz">
の指定って
#foo.baz {color:#00f}
でいいの？

>762

「でいいの？」の意味がイマイチ不明だけど
id="foo" 「かつ」 class="baz" の要素に対する指定なら こう書く
ということではなく？

>>763
そうそう

＞id="foo" 「かつ」 class="baz" の要素に対する指定なら こう書く

の？

いや、なんでもない
今気がついた

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テスト</title>
<style type="text/css">
<!--
*{ margin:0px; border:0px; padding:0px; }
#container{ width:400px; }
#left{ float:left; width:200px; background-color:red; }
#right{ float:right; width:200px; background-color:blue; }
-->
</style>
</head>
<body>
<div id="container">
<div id="left"></div><!--コメント -->
<div id="right"></div>
</div>
</body>
</html>

これをIE6で見ると、
・左右のdivの縦位置が揃わない
・リロードすると右側のdivが消える
・更に数回リロードするとAccess violationでIEが死ぬことがある
こんな現象に心当たりのある方いますか？

ちなみに右側divの中に何か書くとちゃんと表示される。
右側divの直前のコメント消してもちゃんと表示される。
Firefoxだとちゃんと表示される。

age

膀胱がん転移

mac IEの@mediaが効かない件
http://cssbug.at.infoseek.co.jp/detail/macie/b030.html
なんですが、
＞MacIEでバグを持つスタイル指定を@mediaで括ることによって、バグを回避することができます。
とありますが、くくってるのがダメなわけで、ちょっと意味が分からないんですが、これはどういう意味なんでしょうか？

日本語読めないなら諦めなさい

>>770
@media print {
ここにスタイル指定
}
こんな風にしてるんだけど。
media指定するために囲ってるのに・・・これでダメだから。
さらに括るって？

頭の悪いお前に親切でスタイルのいい俺が教えてやる。

MacIEでバグを持つスタイル指定（主語）、を、@mediaで括ること（方法）、によって、
（MacIEでバグを持つスタイル指定による）バグを回避することができます。

@mediaの中にはMacIEに読み込ませたくないスタイル指定を書けってことだハゲ。
アンダースコアハックのような、特定のUA（あるいは以外）にスタイル指定を読み込ませないハック。

>スタイル指定を読み込ませないハック。

ハックじゃねえな。テクニックか。テクニックでもねえな。実運営上の小技。
頭の悪い俺を殴れよ。

>>766
既出>>172・>>221
コメントがフロートの位置をずらす(6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b166.html

>>772
漏れもやっと今わかったとこです。
要するに、@mediaが効かないことに対しての回避方法じゃないってことですね。
このバグをイカして、こんなことが出来ます、と。ググッてもこればっかし。
バグ辞典に出てんのは回避法じゃないじゃん。

Mac IEで@media内の指定を効かせる方法を知りたいんですが、それは不可能ってことでFA？

実際、そこまで頭悪いとは思わなんだ。

>>774
位置ずれはそれと同件だろうと察しはついてましたが
・リロードすると右側のdivが消える
・更に数回リロードするとAccess violationでIEが死ぬことがある
の方を主に聞きたかったわけですが。

で、Mac IEで@media printを有効にする方法ってないの？

ずっとググッてるけど、IEで@media printを生かす方法はみつからない。
このバグを利用してMac IEだけ無視させるってネタばかりだ。

何が言いたいのかわからない
@media を使わずにやればいいのでは

>>777
では最初からその旨書いて下さいな。
たぶんdiv#rightが空であるって条件が附加されたことによる新バグでしょ。
まあ空divなんて宜しくないわけだし、766のソースがclearをしてないのもよくないから、
普通は発現しないバグってことでそんな問題にはならなかったと。

>>778　
無い。バグにはすべて回避法があるとでも思ってるの？　理不尽だからこそバグなんだよ。

オナニーしてたら、マンコの悪臭が鼻についた（ヾ）クンクン
おえっ！！
くっせ―――！！

CSSハック
http://www.naturalfactory.net/blog/archives/2005/06/css.html
"通"御用達、CSSハック
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm
CSS ハック
http://su.que.jp/by_topics.html#css-hack

#container {
background-image:url('hoge.png');
background-repeat:repeat-y;
}
#main {
float:left;
width:500px;
}
#side {
float:left;
width:200px;
}

<div id="container">
<div id="main"></div>
<div id="side"></div>
</div>
みたいなCSSを書いているんだけど、
sideの方が長い場合にFireFoxだけ背景がうまくリピートしてくれません。
これってMozilla系のみのバグでしょうか。

http://www.akatsukinishisu.net/itazuragaki/css/i20050614.html

これのことか？「長い」が何を示しているのか詳しく。

>>784
IEとかオペラのバグ(しかも既出)の予感。
ttp://www.mozilla.gr.jp/standards/webtips0021.html
ttp://cssbug.at.infoseek.co.jp/detail/winie/b053.html

Opera 8.01 for Windows の DHTML なんですが、検証お願いします。

ブロック要素の配置位置が非常に下の方になると、その子孫にある
インライン要素の offsetTop の値が 65536 の倍数だけ加算した値に
なるようです。

ブロック要素の入れ子では発生しません。
インライン要素が offsetParent の直下である場合も発生しません。

以下は問題が発生する簡単なソースです。
TEST の部分をクリックすると span と div の offsetTop を表示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title></title></head><body>
<div style="height: 40000px;"></div>
<div onclick="alert(this.offsetTop);"><span onclick="alert(this.offsetTop);">TEST</span></div>
</body></html>

Opera 8.01 での実行結果　　105544 40008
Opera 7.02 での実行結果　　40008 40008
Firefox 1.0.6 での実行結果　 40010 40008
MSIE 6.0 SP1 での実行結果 40000 40000

>>785
>>786
ビンゴです。
なるほど、floatが指定されているときの高さの算出がどうこうと…。
本当にありがとうございます。

質問です。
コンボの色をフォーカス時と、それ以外で切り替えたいと思ってます。
が、コントロールの方は変わるんですが、
Option部分の色が上手く変わってくれません。
これって仕様かバグですか？

以下サンプル ---------------------------------------------
<select onFocus=this.style.backgroundColor='#8888FF'; onBlur=this.style.backgroundColor=''>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
</select>

試用です

firefoxとかnetscapeで文字が上にずれるのはブラウザのバグですよね？
上にパディング当てるとか変な事はしたくないんだけど、あまりに見苦しいけど、みなさんどうされていますか？

input とかの disabled についての決まりなんてのは無いんですか？
フォームのアクションに対し、IEだとdisabledの値も送り、Mozillaだと値を送らないような感じになってるんですが

>>792
いまちょうど調べているところだから言うけど

disabled="disabled"　は値を送信しない
readonly="readonly"　は値を送信する

と書いてあった。簡単に調べてみたけど、
IEもMozillaもOperaも同じ動作してるみたいだけど？

>>793
ありがとう。
フォームから渡った値に依存するページを作ってしまったようで、IEだとエラー起こらずMozillaだとエラーが起こっていたので気になって。
送信しないほうが正常ということで、それにあわせて作り直します。

【Opera7,Opera8/Windows】
vertical-align: middle;の扱いがおかしい。
Opera7.54u2,Opera8.01/WindowsXPで再現。

[ソースコード]
<span>
<span style="vertical-align: middle; border: 1px solid #000;">あ</span>
<input type="radio" style="vertical-align: middle; border: 1px solid #000;">
<span style="vertical-align: middle; font-size: 10em; border: 1px solid #000;">あ</span>
</span>

文字とラジオボタンを中央揃えにしたいのだけれど、
Opera7,Opera8だとそろわない。
(どういう基準で配置されているのかもよくわからない)

IE6,NN7,Opera6では期待通り中央揃えになる。
いずれのブラウザについても標準モードと互換モードの両方で
確認。

<td class="--"> と <span class="---"> で同じフォントのスタイルを
指定しているのに、Win で文字間が同じにならないのって、バグでしょうか・・。

いいえ

質問です。
IEMac5.2だけリストが横並びにならないです。

↓html↓

<div id="header_m">
<ul class="navi">
<li class="menu"><a href="○○○"><img src="○○○" alt="○○○"></a></li>
以下liが４つほど
</ul>
</div>

↓css↓

#header_m { clear: both; width: 780; height: 30px; margin: 0px 0px 10px 0px; padding: 0px; }

.navi { margin: 0px; padding: 0px; list-style: none; }

.menu { float: left; background-color: #ffffff; border: none; font-size: 12px; }

以上IE6やネスケ7.1では正常にみえるのですがMac5.2では
横に並ばずそのままリストとして表示されます。（リストマークは消えてます。）

#header_m { clear: both;　はこの上でfloatを使って段組をしているためです。
バグのサイトも見てみたのですがイマイチだったので
どうかご教授宜しくお願い致します。

>>798
.menu に　display:inlineを追加する

>798です。
早速のご返答ありがとうございます。

しかし、それも試してはいるのですが
なぜかMacのIE5.2だけは横に並ばないのです。
手元に5.2しかないので他の5.×なども表示できてないのでは？
となやんでます。

>>800
MacのIE5.2だと、ファイル：環境設定からキャッシュファイルを空にするボタンを押さないと
なんどリロードしても前のファイルを読んじゃうでしょ。そのせいではないの？

>>798
MacIEでは、floatさせる要素にwidth指定が必須だったはず。
http://www.remus.dti.ne.jp/%7Ea-satomi/nikki/tmp/floattest/float_not-specified-width.html
http://deztec.sakura.ne.jp/x/01/tips/page/p0044.html
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#float

>>798>>800です
アドバイスありがとうございました。

なるほどそういう事だったんですね。
横幅をきちんと指定してもだめだったのですが
一応キャッシュも空にして見た所
大成功です。

自分ではだいぶcssも分かったつもりでいましたけど
まだまだのようです。

どうもありがとうございました。

.sample {
border: 1px black solid;
margin: 20px;
}

<div class="sample">
<div class="sample">
通常のdiv要素
</div>
<div class="sample" style="width: 100%">
width:100%にしたdiv要素
</div>
</div>

div要素にwidth:100%を設定してFirefox1.0.6で表示させると、
親要素の幅を超えて表示されてしまう。
IE6ではwidth:100%を設定したdiv要素の上下のmarginが無視される模様

http://www.k2.dion.ne.jp/~spag/cssbug.html
http://www.k2.dion.ne.jp/~spag/img/cssbug.png

>>804
あれw？【簡単】取っ付き易いWebページ講座Part3【正確】スレでも
同じの見たぞ。

おお、見つかってしまったw
あっちでやるのはスレ違いかなと思って、ここで聞くことにした。

widthプロパティを設定すると別の不具合があるみたい

>>804,806
IEのは既出。　http://cssbug.at.infoseek.co.jp/detail/winie/b134.html
Firefoxの方は…、冗談はやめること。

ちょっと変わった相談なのですが、教えてください。もうさんざん既出ですが、、
div.container {
border: 1px solid #000000;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
これだと、containerのディビジョンには思い通りに（right、leftを囲む
ように）枠線がつきませんよね。
そこで、解決案として、まず clear;both を指定した空のディビジョンを下方に
置くというのがありますが、空というのはあまりイクナイ。
そこで漏れはホリーハックを使用していました。
ところが、最近いろいろ調べたら、
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
とすればあっさり解決することに最近知りました。
今まであの長いハックを記述していたのは何だったんだろうと思いましたが、
overflow: hidden; を使う方法だと何か別の問題は考えられるでしょうか？
空の<div>を入れる解決方法を紹介しているサイトはかなり見つかるのですが、
この方法はあまり見かけないので、何か問題でもあるのかと・・・
heightを指定していないので、実際隠れることは無いと思うのですが・・・
アホな質問でｽﾏｿ

>>808
overflow: hidden;のエリア内で
マウスの真ん中のボタン（ころころまわすやつ）の
押しっぱなしのやつが効かなくなるバグがなかったっけ？

あと、URLのような横に長い文字列があった場合に途中で切れるよね。
それから、下記のようなやり方のほうがたぶん一般的だと思います。

div.container {
border: 1px solid #000000;
}
div.left {
width: 45%;
float: left;
}
div.right {
margin-left: 55%;
}

>>809、>>810
ありがとうございます。
やはりあるんですね。。

この際、下方に置く clear:left; のdivを、空ではなくてコピーライト、
メールアドレス等のフッターにしようかなと思っています。

div.right {
margin-left: 55%;
}
なるほど。。どうも左に右に回し込みという方法に慣れてしまいまして。。


よく考えてみれば、バグではなくて仕様なので微妙にスレ違いですね。
ｽﾏｿ

間違えた。。
clear:left;ではなくて clear:both;　　orz

>>807
冗談扱いされるほど有名なバグなんですね。
はやく修正してほしいものです。

しょうもない釣りはやめときなさい

お前の頭がバグだ

>>815
Internal Server Error(ぷ

WinIE6です。

「HTMLファイル」

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<p>TEST</p>
</body>
</html>

「CSSファイル」（test.css）

body {
text-align:center;color:green;
}
*/
p {
text-align:right;color:blue;
}

コメントを閉じる「*/」だけを書くと、
その書いた場所の次のセレクタへの指定が効きません。
この場合、右揃えの青字になりません。

半ばエラーファイルを読み込ませてどういう挙動になるか、ていうのは、
CSS/HTMLバグというかハックな気がする。

　
　

>>818
なるほど。

Gecko
tableのマージンが相殺されない。
ttps://bugzilla.mozilla.org/show_bug.cgi?id=87277

コメントを閉じていると言うより、全称セレクタ指定のエラーなんじゃないかね？

うん、
この場合書き方自体が間違っているのだから、バグでもハックでもないような。

ハックにも誤った書き方によるものがあるが。

Opera8.50とIE6で、
body{
　　font-weight:normal;
　　font-style:normal;
}
としても、この状態で emとかstrong要素でマークアップすると斜体になったり太字になったりする。
継承自体はしてて、font-weightにboldとかいれると、ちゃんと太字になったりはする。
UAのデフォルトスタイルを上書きできてないみたい。

Operaの場合は、
*{
　　font-weight:inherit;
　　font-style:inherit;
}
で、継承を明示してやると解消できるけどIEはどうしようもないみたい。

つ、釣られないお

 ◯
\吊/
 人

既出

>>826
？、もしかして私に言ってます？

>>827
既出でしたか。早く修正してほしいものです。

>>828
ごめw>>826は誤爆。
どっちにしても既出だよん。自分で調べれ！

仕様

<ul>
<li><a href="iii.html">いいい</a></li>
</ul>

#main_design ul{list-style:inside url(../images/ooo.gif);}

IE6だと、クリックした時に出現する四角の点線がきっちりリンク文字を囲わずにずれてしまいます。
ooo.gifの画像が縦長だからかもしれません。

Firefoxだとずれないんですが。
ずれない方法か、或いは四角の点線を表示させない方法ってありますか?

ありません

これがIE6のバグってやつなんですね。。。初バグです。諦めます。

ちがいます

<div id="親枠">
<div id="子枠左側"></div>
<div id="子枠右側"></div>
</div>

このの場合、親枠でボーダー引くには br でクリアするしかないと思ってたら、
親divに overflow:auto を指定したら、
難なくIEもどきに子要素が親要素の中に収まってくれるじゃん。
ああ、おいら知らなかったよ。
ネットで調べてもみんな br でクリアしろと書いているんだもん。
これでソースを汚さなくてすむ。うれしいなうれしいな。

>>834
Firefoxではうまく表示されるのに、IE6ではうまく表示しない、
というのは、バグではないとしたら、なんなんでしょう?

仕様

バグは>>836の頭の中にある

背景色が指定された要素内にフロートがあるときに要素内の文字が消える
http://cssbug.at.infoseek.co.jp/detail/winie/b032.html
の対処法は
・幅指定
と書いてあるけど、
http://desperadoes.biz/style/dan/1-f.html
のような左固定&右autoの段組の場合そうもいきません。
で、考えた結果の対処法は
・背景色指定を無くす
または
・背景画像を右にかぶらない様にする
の2つにたどり着きますた。他に定石ともいえる対処法はありまっせんか？

>>839
positionでやったら？？

どちらにしてもコンテンツ部分が短いと不具合が出るみたいなので
対処法にはならないような気がします。
ttp://desperadoes.biz/style/dan/2-a.html

rightプロパティが親要素のボックスを基準にした配置を行わない(IE5.5)
http://cssbug.at.infoseek.co.jp/detail/winie/b062.html

bottomプロパティーでも同様、とか。

>>842追記
　閲覧領域のサイズを初期コンテナブロックのサイズとして扱う
　http://cssbug.at.infoseek.co.jp/detail/winie/b130.html
このバグでも、バグが発現するのはbottom（とright）を指定した時。
どちらも親ブロックに関する同系のバグで、その親ブロックがルート要素である場合がこれだ
と見るべきなのかな。

>>842
いやbottomの場合は、標準モードと互換モードとで基準点が別になる。
<div style="position:relative; border:2px solid red;">
あ<br>あ<br>あ<br>あ<br>あ<br>
<div style="position:absolute; right:30px; bottom:10px; background:yellow;">い</div>
</div>

このスレ的にFirefox1.5はどうなん？ バグ皆無？

まだ出て間もないからなぁ。
検証中。

Geckoのバージョン見ればある程度バグはわかるよ。
Acid2にまだ程遠いからバグはかなりあるはず。

IE7はもっと酷いらしいけどな・・・＞Acid2

IE7はACID2パスは目指さないというが
匙投げたんだろうなあ…実際のところは。

Acid2なんてCSSマニアックスは放っておいていいから
基本的なプロパティのサポートを強化する方が重要だ

CSS1すら悲惨だもんな・・・
HTMLでさえサポートできてないもんな・・・

Fieldsetに背景画像を右下に置きたい時、
Opera8だと表示がおかしくないですか？

Opera7だとちゃんと表示されるのだが…。

もっと詳しく事例を出せよ・・・

>>853
すまんかった。

ttp://www.cybergarden.net/about/contact.html
このようなフォームを作りたいのだが、

fieldset{
border:1px solid red;
background:url('画像URL') no-repeat 100% 100%;
}

と指定すると、Opera8だと画像が下にずれてしまっていて、
全部表示できていない。（上記URLでも同様の現象。）
Opera7なら問題がないので、何か仕様が変わったのだろうか？

right bottom

right bottomでも100%の時と同じなのです。

ページ晒せ。余分な要素絡んでるだろ。

>>857
上記サイトを見てもらえば分かると思う。

余分な要素分かった。legendを取ると正常に表示された。
でもfieldsetにlegend使うよね、普通。

>>858
それ見たことあるなあ。
とりあえず詳しい人いるかもしれないから、上げとくね。

>>858
お前は854のサイトの管理人か？854に書いたように訂正したがってるのか？
全く同じHTMLソースで全く同じCSSファイル使ってる、っていうなら納得するが。

>>860=857
自サイト晒しは勘弁してよ。
始めからこうしなかったのは悪かった。

<html>
<body>
<form>
<fieldset style="background:url('test.gif') no-repeat 100% 100%;">
<legend>test</legend>
<p>test</p>
<p>test</p>
<p>test</p>
</fieldset>
</form>
</body>
</html>

誰も自サイト晒せなんて言ってないだろうに。サンプルページでも捨て垢に上げれば？

【バグ発見レポート】
WinIEバグ172と類似のバグを、
MacOS X10.3.9/Safari1.3.1とMacOS X10.3.9/IE5.2.7で発見しました。
フロート化したブロック要素と内包するブロック要素とでマージンが相殺されない現象です。
以下のソースで確認できます（あまりきれいでないですが）。
<div style="float: left; margin: 10px;">
<h3 style="margin-top: 10px; border: solid 1px #cccccc;">見出し</h3>
</div>
上部のマージンが10pxとなるべきところ、20pxとなってしまいます。
フロート化しない場合はいずれのブラウザでもきちんと相殺されて10pxになります。
また、WinIEバグ172についても、前述のSafari1.3.1では問題ありませんが、
IE5.2.7ではWinIEと同じく、相殺されないという現象が発生します。

>>863
同じくMacOS X10.3.9上で、Firefox1.5, Opera8.0.1, NN7.1でも同様の現象を確認しました。
フロート化していなければ相殺され、フロート化すると相殺されません。
うーむ、これは何かそういう仕様なんでしょうかね？

>>864
細切れですいません。補足ですが、WinIEバグ172は、
Firefox1.5, Opera8.0.1, NN7.1では問題ありませんでした（きちんと相殺される）。

WinIEバグ172ってこれか。参照してくれよ。

フロートに隣接する要素は親要素との間で上下マージンが相殺されない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b172.html

フロート化されてるブロック要素のマージンは相殺されないんじゃなかったっけ?

>>866
すいません。それです。
>>867
なんかそんな感じですが、そうすべき論理的根拠がわからないような。

>>863
いろいろ調べたら、この「フロート化すると相殺されない」という現象、理由は分かりませんが仕様のようですね。
それで対策を考えているのですが、
floatをやめてなんとかしようと試行錯誤していたところ、
ブロック要素（div）にheightを指定すると、それに内包されるブロック要素（h3）との間で、
MacOS X 10.3.9/IE5.2.7においてマージン（margin-top）が相殺されない現象が確認されました。
まだ単純化しての確認はしていませんが、類似の現象はまだ報告されていないようです。
http://cssbug.at.infoseek.co.jp/detail/macie.html
なお、Safari1.3.1ではきちんと相殺されます。

【Opera8.5/Win XP】（XML宣言ありのXHTML1.0Strict）
負のマージンによって重なり合っている2つのフロートの重なり合いの順序をz-indexで制御できない。

<div id="container">
　<div id="menu">
　メニュー
　</div>
　<div id="content">
　本文
　</div>
</div>

#menu {
width:200px;
float:left;
margin-right:-200px;
position:relative;
z-index:2;
background:#ddd;
}
#content {
width:100%;
float:left;
position:relative;
z-index:1;
background:#ccc;
}
#content>* {
margin-left:200px;
}

#contentが#menuを隠してしまうのでz-indexで#menuのほうを上にしたいのです。Firefox1.07/1.5、IE6ではうまくいきました。

>>870
CSS2仕様通り。
floatにz-indexは本来効いてはならない。
IEとかが余計な気を利かせてるだけ。

>>871
ありがとうございます。仕様どおりなんですか。
そのことについて、仕様書のどこに書いてあるかわかりますか？

>>872
z-indexの定義
　Applies to:
　positioned elements

"positioned"の説明
An element is said to be positioned if its 'position' property has a value other than 'static'.

>>873
position:relativeも同時に指定してるんですけど、floatと同時指定は駄目でしたっけ？

絶対配置は駄目だが、相対配置なら可であるはず。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q24

バグなのかどうかわかりませんが
このスレでの意見をあおいだほうがいいと判断したので書き込みます。
FireFox1.5(Win)に関するものが二点です。

一点目、
<input type="submit"〜にtext-decorationが反映されない
一点目の詳細（というか関連レス？）
http://pc8.2ch.net/test/read.cgi/hp/1137310503/304,335-338,341

二点目、
olにlist-style: inside;またはlist-style: outside;のみを指定したら
リストマーカーの種類がdecimalではなくdiscになる
二点目の詳細
http://pc8.2ch.net/test/read.cgi/hp/1137310503/369,375,384-387

アゲなきゃ見てくれないよ。>>876
あと、前者は互換モードでは反映されるんでしょ？

>>876
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
　User[important] > Author[important] > Author > User > UA ( > Default)
Gecko は UA の important を優先順位に入れている。
　User[important] > Author[important] > UA[important] > Author > User > UA ( > Default)
Gecko は、特に理由があったり、不具合があったりすれば、一時凌ぎの対策方法として、この important を利用する場合があるように見えるが、正確な理由は知らない。

1.
Firefox1.5 でこのスレを表示して、次の2つを順番に試せば判る。
javascript:document.forms[0].elements[0].style.setProperty('text-decoration', 'line-through', '')
javascript:document.forms[0].elements[0].style.setProperty('text-decoration', 'line-through', 'important')
というか、Gecko 系は UA の CSS を読めば判るだろ。

2.
(Default : list-style-type: disc; list-style-image: none; list-style-position: outside;)
UA : list-style-type: decimal; list-style-image: none; list-style-position: outside;
Author : list-style: inside; ==> list-style-type: disc; list-style-image: none; list-style-position: inside;

誤 Default
正 initial

簡略プロパティで省略された値は初期値となる。
つまりdiscになるのが正常。

すみません、スレ違いだと思うのですが：


Windows付属の「ペイント」で作成した画像を「.bmp」で保存し
後でGIMPで編集して「.png」で保存しました（圧縮レベル: ０）
MSIE6だと、その画像を表示しません。

これは既出のバグですか？

自己解決しました。

GIMPで問題の画像を開き、そのスクリーンショットをとって
png形式で保存したらイケました。

・・・・CSSやDHTMLという意味すら分かってないで書き込んでいるのだろうか・・・

こういう奴が数百KBの画像を平気で置くんですね

鯖管の中の人も大変だな

スレ違いなのは分かってました。
てかうぜーよｗ

>>885
　　　　　　　　　　　　　　自宅サーバですが…



　　　　　　　　　　な　　　　　　　　　に　　　　　　　　　か

初心者乙

騙りにしても本人にしてもつまらない人ですね

IEで、
<img src="hoge.jpg" alt="hoge" width="" height="">
（width属性とheight属性の値を空白にする）

こうすると表示しないのは仕様かな？
スレ違いだけど、チラシの裏ソマソ。

ここは　notepad.exe　ですか？

自慢は他板で...

notepad.exe

IE7のベータが一般公開されましたね

あげるな馬鹿

誰に向かって言ってるんだ馬鹿

さげるな馬鹿

あげさげ

IE7Beta2Preview
http://www.microsoft.com/windows/ie/ie7/

IEBlog
http://blogs.msdn.com/ie/

フィードバックよろしく。

Cascading Style Sheet Compatibility in Internet Explorer 7
http://msdn.microsoft.com/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp

Acid2 Test on Internet Explorer 6
http://www4.axfc.net/uploader/90/so/No_2945.png.html

Acid2 Test on Internet Explorer 7
http://www4.axfc.net/uploader/90/so/No_2944.png.html

ちなみに、ここにあるバグは現状の7では1割ぐらいしか直ってない
http://cssbug.at.infoseek.co.jp/detail/winie.html

血の海ですな。
6も7も顔だとはわからないレベルの肉塊。

でも
6 = 身元すらわからないレベル
7 = なんとか身元が分かる手がかりが残ってそうなレベル
だな。

7はむしろクマ

IE7入れた。
CPU使用率が100%になった。
即効削除した。

バグの検証もくそもねー。

まぁ、βだし…

完成度的にはα版レベルだよね。
CSSがまともになってるのを期待してたのに…

っつか未だにＭＳに期待してるやつとかいるんだ

アナウンスさえ出なければ俺だって期待しなかったよ

ココログでブログつけてるのですが、
IEで表示されていた背景画像(1280×1024)が
FIREFOXで表示されなくなってしまいました。。

<style type="text/css">
<!--
body {
background-image: url()}url;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat
}
-->
</style>

一枚の大きい画像を背景に表示させたいだけなんですが。。
調べてもなかなかできませんので手助け願えませんでしょうか<(_ _)>

>background-image: url()}url;

？？

>>907
余計な } が挟まってる。
そんなくだらないミスは自分で防ぐように努力してください。

>>908-909
ご指摘ありがとうございます。
2箇所とも治してみたのですが表示されませんでした。。
書籍で１から勉強しなおそうと思います。
ありがとうございました。

>>905
だって一番シェアが高いブラウザだし…。
見捨てるわけにいかないし…、それでもMSは諦める？

>>911
MSがまともなブラウザを作るだろうと期待するのは、あきらめる。

MS技術力低いよ、金儲けは上手いけど。

>>912
世界標準のMSがまともなブラウザを作らないからこそ、注目しなければならないんだろ。
合わせてやるために。

くそっ！MSめ♪まーたこんな変態的なものを！こうか！ここをこうすればいいのか？ええのんか？？
・・・と、征服欲がくすぐられるのです

素直なのがいい

だってIEはWindowsに付属しているんだもん。
自然と普及していくわけよ。

そもそもMSを潰した方がいいな。期待できるOSはLinuxかな。

> 期待できるOSはLinuxかな。
そして頂点を目指して壮絶な兄弟争いが始まる。

というかPCメーカ各社がそれぞればらばらなディストロを選んだら
サポートの多様化煩雑化によりコストがかかるし
ディストロの選択ミスによる孤立化や衰退が懸念されるから
Linuxは大手PCメーカには受けが悪いと思う。
一部の製品に導入、とか実験的なことはあったとしても。
オンラインダイレクト系やショップブランドではもうちょっと採用枠はあるかもしれないけど。
でも今後PCが普及しきって初心者が減りBTOや自作が主流になれば
Linuxの割合も増えるかもしれない。
とWindowsユーザでなおかつPC初心者が適当なことを言ってみたり・・・・

仮にWindowsが主流から外れても、しつこくNC4.x以上の苦悩を与えそう。
「IEなんて使ってるやつ、まだこんなにもいるのー！？少なくともIE5.x、6はもう捨ててくれ・・・・」
みたいな。

Windowsが普及する＝IEのシェア率が上がる

1.ハードウェアを買うとWindowsがプレインストールされている
2.WindowsにはあらかじめIEが付属している
3.とりあえずブラウザを乗り換える気はない

えー、ぃぬは骨の髄までGPLに汚染されてんじゃん

『CSSバグ辞典スレッド』の要約
http://cssbug.at.infoseek.co.jp/index.html

ここも更新が止まってしまって久しいが、誰か引き継がないか？

こういうのはWikiがいいのかねえ

報告いたします。
macOSX Safari1.3.2
<a name>にa:visitedを指定しても反映されません。

<a name>に:visited？反映されるわけないじゃん。

終点にvisitedしてどうするよ

終端だってページロードで既読になんなきゃおかしいような。

visited以外のプロパティをどうやって反映しますか？
ページロードしたら常にvisitedでそれ以外ありえないでしょうが。

すいません、書き方が悪かったです。
webサイト制作初心者質問スレで誘導されました。
既出でしたら申し訳ないのですが、一応ソースも書いておきます。
・Safari1.3.2　a nameでリンク先を指定すると、a:visitedが反映されない
[CSS]
li a:link{color:#000;}
li a:hover{color:#fff;}
li a:visited{color:#ccc;}
[HTML]
<ul>
<li><a href="#a">aaa</a></li>
<li><a href="#b">bbb</a></li>
<li><a href="#c">ccc</a></li>
<li><a href="#d">ddd</a></li>
</ul>
<h3><a name="a">aaa</a></h3>
<p>文章1</p>
<h3><a name="b">bbb</a></h3>
<p>文章2</p>
〜

えっ？

でっ？

Safariがないからわからんが、もしかして反映されないのは<li><a href="#a">aaa</a></li>の方か？
それならバグだな。

>>930のいうとおりだとしてそれはバグでなく仕様でないか？
Firefoxでも反映されないような気がするぞ。

>>930
はい。ページ内ナビをliにして、a:visitedを指定しました。
>>931
仕様と言ってしまえばそれまでです。
でもa:hoverは反映されるのです。
また、全てmac用ですがOpera8.5、FireFox1.5、iCab3.0、IE5.2.3では、
a:visited指定通りcolor:#ccc;になりました。

>>931
ん？Win2kのFxではvisitedのみになる動きだぞ？

サンプルページうｐすれ

>>934
ご検証ください。
ttp://www.geocities.jp/nobody02102000/test.html


他の環境、例えば自分の場合winIE6の挙動を今すぐには確認出来ません。
でもバグ辞典を見ることで、何がダメなのか、ある程度知る事が出来ます。
仕様かバグかは紙一重だと思いますし、私に判断など出来ませんが、
同ページ内リンクはナビゲーションに使われる事が多く、
:visitedが指定出来ない事は、訪問者の利便性を損なうわけで、バグではないかと思うのです。

>>935
Win2000SP4
・Firefox1.5.0.1○
・IE6○
・N7.1同ページ内移動×別ページに移動して戻ってくると同ページリンクも全て既読
・Opera8.5同ページ移動×別ページに移動して戻ってきても同ページは未読
・影鷹○（但し色は現在の仕様上指定したものではない）

Mac持ってないから確かめられないけどSafariだとページ内リンクをたどった後でも
visited状態にならないってこと？だったらSafariのバグっぽいな。

（931でいいたかったのはIEだとページ読み込み時点でページ内リンクが
visited状態になるけどFirefoxだと実際にリンクをたどらない限り
visited状態にならないってことね。）

>>937
ていうかSafariだけでなく>>936のN7.1とOpera8.5もバグ？

>>937
はい、そうです。

■NS 7.1のバグらしき動作

a要素を display: block; として、

background-position: 8px center;

などとすると背景の位置指定が無視される


■IE 6のバグらしき動作

position: rerativeの子要素に、

position: absolute;
top: 0px;

と指定すると、親要素をはみ出して表示される


なんとかなりませんかね・・・

>>940

あ、両方ともWinです

>>940
前半はきしゅつ？バグであるとは言い切れない。

何でも バグ って決めつけるなや！

両方とも既出ではないような気がします

バグだと思うんですが。

バグじゃありません、仕様です ＞＜

どう見てもバグですｗ

>>946
精子ネタ禁止です＞＜

検証画像でもうｐしてみれば？
それか仕様書読む

>>940

実装しきれてないIEとNSのバグっぽいね

rerativeを指定した要素の子にabsoluteを指定した場合
親要素を起点として子要素の配置が決まるはず

NSのはCSSのパース処理のバグだろう

すまん釣られた　
relativeだぞｗ

>>940
上のやつはCSS2の仕様

ttp://www.y-adagio.com/public/standards/tr_css2/colors.html#propdef-background-position
キーワードを, パーセント値又は長さの値と組み合わせることはできない

CSS2.1で削除された

>>951

なにー orz
NS7.1だけが正しい解釈をしてるってことですか

FireFox と　IE　と Operaのほうが2.1に対応してないのか orz

２番目の方はバグですよね
IEだけが対応してないだけなのか

間違えました

正しいのはNS7.1だけなんですね
2.1で見直されたんですね

２つ目のほうがわかれば教えてください
とりあえずその場しのぎで外側にもういっこボックス要素を作ってます。

>>953
CSS2.1ではこうね

'background-position'において, 文法は
"キーワードはパーセント値もしくは長さと組み合わせることができない
(上記の組み合わせが可能な組み合わせの全てである)"
という部分が削除された. つまり, 'top 25%'といった値も許可される.
ttp://www.d-toybox.com/spec/CSS2.1/appendixC/#q16

NS7.1はCSS2に対して正しい、他はCSS2.1に対して正しい、ってことだから
どちらも間違いではない

2つ目のは>>950が言ってるが単なるスペルミス([誤]rerative→[正]relative)じゃないか？
IE6でもちゃんとはみださずにいけるぞ

>>954

確認したらそういうことだったようです
キーワードだけにしたらうまくいきました
ありがとうございまつ

http://www.amazon.co.jp/exec/obidos/ASIN/4798010928/250-7825514-9197852

これ注文して、今日届いたのでじっくり読んでみます
かなり期待できそうな本です


２つ目はソースはスペルミスはないです。

<div>

あ、途中で書き込んでしまった orz

２つめは

<div id="container">
　<div id="main">
　 <p>内容</p>
　</div>
　<div id="menu">
　 <p>内容</p>
　</div>
</div>

#container {

</div>

気になるので閉じておきました。

ああ、また、Janeが悪さを・・・
ごめんなさい O...rz

<div id="container">
　<div id="header">
　 　<p>ヘッダー</p>
</div>
　<div id="main">
　 　<p>内容</p>
　</div>
　<div id="menu">
　 　<p>内容</p>
　</div>
</div>

#container {
　position: relative;
}
#main {
　position: relative;
　margin-left: 196px;
}
#menu {
　position: absolute;
　top: 0px;
}

>>958

あ、これだとcontainerを基準にしてmenuの配置が決まるから
はみだしてしまうのですね orz
mainとmenuを、relativeなボックスで囲んだら正しくいきました。

ただ、IE6意外では>>958の方法でもmenuがmainと同じ高さに揃ってました
ってことはIE6だけが正しい動作ということなのでしょうか・・・

わけわからなくなってきた orz

>>959
「はみだす」はdiv#menuがdiv#mainに対してってことか？
だとしたらその認識は変。div#mainがdiv#menuの包含ブロックじゃない

div#headerがあるからrelativeでオフセット指定(topとか)が特にない
div#mainはdiv#headerの下に配置されるし
absoluteでtop:0のdiv#mainはdiv#containerに対して上辺が揃った形で配置される

>ただ、IE6意外では>>958の方法でもmenuがmainと同じ高さに揃ってました
ほんとか？こっちじゃ揃わないぞ
div#headerをdisplay:noneで消せばIE6でもFx1.5.0.1でもOpera8.51でも揃うけどね

>absoluteでtop:0のdiv#mainはdiv#containerに対して上辺が揃った形で配置される

そうですよね(汗
mainとmenuを、 relativeを指定したボックスでラッピングしたらうまくいきました

>>959の状態でやるなら
header を height: 96px; とかして、menuを top: 96px; とかにしないとだめですね

たぶんいじくってるうちになんか勘違いしてたのかもしれません orz
ありがとうございまつ

920 ：Name_Not_Found：2006/02/06(月) 16:48:46 ID:zl/9sW4N
『CSSバグ辞典スレッド』の要約
http://cssbug.at.infoseek.co.jp/index.html

ここも更新が止まってしまって久しいが、誰か引き継がないか？

921 ：Name_Not_Found：2006/02/07(火) 12:58:11 ID:???
こういうのはWikiがいいのかねえ

質問させてください。
レイヤーを作ろうと思ったんですが
DIVでID指定したものが

IEの場合
内部CSSに書いてあると表示されるんですが
外部CSSに書くと表示されません


firefoxはどちらも問題なかったんですが
これはいったいどういうことなんでしょうか？

>>963
> IEの場合
> 内部CSSに書いてあると表示されるんですが
> 外部CSSに書くと表示されません

そんなこととはありません。
以降はCSS質問スレへ逝って下さい

min-height, max-height, min-width, max-widthが効かないというIEの有名なバグですが、
テンプレサイトにそれらしい項目が見当たらないのですが、
http://cssbug.at.infoseek.co.jp/detail/winie.html
何か違う事項としてまぎれているのでしょうか。

一切実装していないものはそこでいう「バグ」には含まれない。
contentプロパティ然り。

がーん。そうなのですか。どうりで無いわけだ。サンクスです。
ちなみにMac版IE（5.2.7で確認）でも同様に効きません。
スターハックで両IE用にheightを指定してしのごうとすると
Safari（1.3.1で確認）でもそれが有効になってしまい役立たず。

<a>要素にfloatとtext-indentの両方を指定すると、Win IE6.0では、その弟<a>にもtext-indentがかかってしまうのはバグでしょうか？
ソースは以下の通りです。
<div style="width:760px; background-color:#CCC;">
<a href="#" style="text-indent:20px; float:left;">ひとつめのa（text-indentあり,float="left"）</a>
<a href="#">ふたつめのa（text-indentなし）</a>
</div>

<div style="width:760px; background-color:#CCC;">
<a href="#" style="text-indent:20px; float:right;">ひとつめのa（text-indentあり,float="right"）</a>
<a href="#">ふたつめのa（text-indentなし）</a>

よろしくお願いします。

td とかは例外的にmin-heightとか効くんじゃなかったっけ？IEでも

互換モードのみね。
しかも、標準非準拠。

標準仕様ではテーブルセルではheightが最小高の指定。
min-height,max-heightは無視されねばならない。

CSSに関するGeckoのバグらしきものを見つけたようなので、報告します
http://pc8.2ch.net/test/read.cgi/hp/1141783690/74-77,80-85,88-92,103

ine-heightの値によってはマージンが指定どおりの値にならない(N7)
http://cssbug.at.infoseek.co.jp/detail/mozilla/b037.html
これじゃね？

line-height関係あったっけ？
小数点のまるめ誤差の問題で、結構前にfixedされた気がス。

/* CSS・スタイルシート質問スレッド【53nd】 にも投稿したのですが、こちらのほうが良いかと思い参りました。

これはバグでしょうか。防ぐ方法があれば教えてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>検証</title>
<style type="text/css">
<!--
p {background: #dfc;}
img {float: left;}
-->
</style>
</head>
<body>
<p><img src="test.png" width="250" height="200" alt="画像">
WinIE6.0でこの文字が消えます。
<br style="clear:both;">「フロートの後続フロー制御を設定したbr要素が親要素に包含されない」回避の文字列。</p>
</body>
</html>

>>974
背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b032.html

見落としていました。ありがとうございました。

floatって問題多すぎて使えなくない？

>>977
スレ違い

問題が多いのはWinIE

WinXP Firefox1.0.7
連続するふたつのフロートの後ろのフロート内にiframeがあって、
a:hover時にborderやpaddingが増減するような指定があるとき、
a:hover時にiframe内の要素がちらつく。
Firefox1.5では大丈夫だった