DHTMLってなんですか?
それくらいググって調べない子はお仕置き
>>6 「HTMLの拡張仕様」ってそんな馬鹿な用語解説があるか!
DHTML っての腰は,HTML や JavaScript,CSS などの技術を複合的に組み合わせて,
動的なウェブコンテンツを実現しよう,っていうベンダのマーケティング上の抽象概念。
DHTML という仕様が存在するわけじゃないし,ベンダ間で互換性がある訳でもない。
ただし現在では,W3C により DOM という中立の API が勧告になったおかげで,
環境に依存せずに HTML や XML の各要素をオブジェクトとして扱えるようになった。
実際は,マイクロソフトの実装がいい加減な所為で仕様が台無しになっているけど。
>>7 ハァ?
信者は出来るだけハードな布施して寝ろ。
>>8 ハァ? 事実を書いただけだろうがヴォケ。何の信者じゃアフォ。
DOM が所謂 DHTML として通用している技術を完全に補完する訳ではないが,
かなりの部分で互換性を持たせた動的コンテンツを実現できるだろうが。
厨房はいつまでたっても document.all や document.layers とかで遊んでろ。
>>10 まったくもって,本気なのだが。
事実を誤認しているのはお前らだろう。
col要素およびcolgroup要素にはtext-alignなんて指定できない(指定しても何も起こらない)
指定できるのは次の4つのプロパティのみ
- border
- background
- width
- visibility
col要素にもcolgroup要素にもalign属性はあるのにtext-alignは指定できない。
なんでだろ。
17 :
Name_Not_Found:04/03/07 15:36 ID:ad2PHeYZ
>>17 それ以前にWinIEはempty-cellsに対応してない。
IE5.1:mac でのバグ報告。ある要素に border: none; を宣言して、
後に “色の値を省略して” borderプロパティを上書き指定すると、
「none」が上書きされない。つまり、ボーダーが描画されない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
p, ol { margin: 0 0 0 40px; padding: 0; }
li { border: none; color: gray; }
li.test1 { border: solid !important; }
li.test2 { border: solid thick !important; }
li.test3 { border: solid red !important; }
li.test4 { border: solid thick blue !important; }
li.test5 { border: solid 5em transparent !important; }
</style>
<title>テスト</title>
<p style="border: solid 1px black">style=border: solid 1px black;</p>
<ol>
<li class="test1">border: solid !important;</li>
<li class="test2">border: solid thick !important;</li>
<li class="test3">border: solid red !important;</li>
<li class="test4">border: solid thick blue !important;</li>
<li class="test5">border: solid 5em transparent !important;</li>
</ol>
<p style="border: solid 1px black">style=border: solid 1px black;</p>
この例の場合、1項目と2項目のボーダーが描画されない。
1項目は border: solid medium gray; として解釈される筈。
2項目は border: solid thick gray; として解釈される筈。
色の値を明示している3〜5項目は正常に解釈される。
23 :
Name_Not_Found:04/03/09 12:48 ID:WFdxfLmq
ガイシュツかと思いつつ発見できませんでしたので投げさせていただきます。
詳細をご存じでしたら教えてください。
【ブラウザ】Windows InternetExplorer5.5、6.0
【症状】
「floatを設定した要素」の直後に「clear(none以外)を設定しfloatしない要素」があり、かつ、
「floatを設定した要素」の中に2つ以上の要素や折り返しが発生する長文テキストがあるとき、
「floatを設定した要素」の親要素の右と下のmarginを無視する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>test</title>
<style type="text/css">
<!--
.body{margin : 50px; color : #000; background : #eee; padding : 50px;}
.float{width : 200px; float : right;}
.clear{clear : both;}
-->
</style>
</head>
<body>
<div class="body">
<div class="float">
<p>float : right;</p>
<p>test</p>
</div>
<p class="clear">clear:both</p>
</div>
</body></html>
24 :
23:04/03/09 15:55 ID:???
>>23 訂正。
親要素の<del>右</del>じゃなくて<ins>左</ins>と下のmarginを無視する。
茶碗と箸持って逝ってきまつ…
WinOpera 7.23
font-size、em指定と%指定とで倍率が違う。
1em(100%)から1.5em(150%)までしか確認していませんが、
1.1と110%、1.3emと130%が顕著です。
%指定の方が小さくなります。
>>23-24 親要素の左と下のmarginを無視する――つまり、div.bodyのmarginってことだよね?
>>23のhtmlソースで</body>の前に要素を追加して試したら、下マージンは無視されてなかったよ。
無視されるのは左マージンだけ。
但し、.bodyのpadding指定を削ると、なぜか上マージン(と左マージン)が無視される。
あと、ソースのfloat : righ;をfloat:left;にして試すと、左右マージンは正常になった。
yはりdiv.bodyにpadding指定があるとmargin-topだけ無効になる。
float:left;の場合、.bodyのpadding指定を削らなければ上下左右ともmarginは正常。
padding指定によるバグ回避はpadding-topが0以外の値を持つとき有効。
そこは下記のバグと同じ。
clearを指定したフロートの上下に空行ができる(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b147.html だから
>>23のソースでもclear指定を削除すると、バグは起きない。
空行が空くのとmarginが無視されるのとでは症状は異なるが、
何か同一原因によるバグなのかも。
28 :
26:04/03/10 18:22 ID:???
>>23-24 追記。
フロートの親要素に対し、widthにauto以外の値を明示してやればバグは回避できる。
以上、IE6SP1にて確認。
29 :
Name_Not_Found:04/03/10 19:43 ID:8mrMRFJm
http://cssbug.at.infoseek.co.jp/detail/winie/b054.html >2004-03-07修正。[3-914]の内容を追加。
>……
>この不具合のために幅が短縮された要素の内部にあるフロートでは、
>その要素の外部にあるフロートに対してclearプロパティが効きません。
「この不具合」(幅が短縮される)と「clearプロパティが効きません」の因果関係
がつかめません。clearが効かないのはこれと無関係なバグなのでは?
――と思って例示ソースを改変して実験してたら、下記のバグを発見。
【Netscape7.1/Windows98】
float:left(right)した要素の後続要素でmargin-left(right)を浮動要素の幅以上に取ると、フロートのclearが効かなくなる。
例示ソースからフロートに後続する要素の幅・高さ指定を除き、margin-leftを指定して横並びにする。
<div style="float:left; width:3em; height:3em; background:blue;">A</div>
<div style="margin-left:3em; border:2px solid red;">
<div style="clear:left; float:left; width:5em; background:aqua;">フロートB</div>
回り込む
</div>
背景が空色のフロートBはclearしたので青色のフロートAより下に置かれるはずだが、
NS7ではAの右に回り込んで、赤色ボーダーのボックスの内容領域の左上端に配置される。
margin-left:3em;を3.0em未満にすると、当然これは起らない。
WinIE6・Opera7.23では、フロートBはAより下に置かれた。
(もしかしてMozillaが正しいのか?)
30 :
29:04/03/10 20:12 ID:???
【IE6標準/互換 Win98】
子要素に対するclear指定が親要素まで回り込みを解除させることがある。
ソースは
>>29とほぼ同じだが、二番目のdivのborder指定を削った。
代りに、見てわかりやすくするためbackground:red;を指定。
<div style="float:left; width:3em; height:3em; background:blue;">A</div>
<div style="margin-left:3em; background:red;">
<div style="clear:left; float:left; width:5em; background:aqua;">フロートB</div>
回り込む
</div>
Opera7.23では赤色のボックスはAの真横に配置される。しかしIEでは、
フロートBに対するclear指定がその親要素まで効くのか、赤色のボックスがAの横に回り込まないで
フロートBの右に配置される。(float:right;とmargin-rightの組合せでも同様)
但し、
>>29みたいにborderを設定してあると、IEでも赤ボックスはAの横に並ぶ。
また、二番目のdivとその子要素のdiv(フロートB)の間に何か文字を入れると、
IE6でもOperaでも表示は同じになる。
<div style="float:left; width:3em; height:3em; background:blue;">A</div>
<div style="margin-left:3em; background:red;">#ここに文字を入れる#
<div style="clear:left; float:left; width:5em; background:aqua;">フロートB</div>
回り込む
</div>
猶、marginの設定はこのバグには影響しない。
<div style="float:right; width:3em; height:3em; background:blue;">A</div>
<div style="border:0px solid red;background:red;"><!-- -->
<div style="clear:both; float:right; width:5em; background:aqua;">フロート</div>
回り込む
</div>
31 :
23:04/03/11 16:59 ID:???
>>31 礼よりも、左と下のmarginを無視ってのは左だけの誤りだったと認めるのかどうか。
838 :Name_Not_Found :04/03/15 12:32 ID:???
// css
DIV.menu{float:left; width:200px; border:1px solid #0f0; background:#efe;}
DIV.body{ margin-left:210px; padding:0px; border:1px solid #00f; background:#eef;}
// html
<DIV class="menu">HOME<BR>BBS<BR></DIV>
<DIV class="body">MONA<BR>MONA<BR>MONA<BR>MONA<BR>MONA<BR></DIV>
これをWin2000・IE6で表示すると「MONA」の上3つ(class="menu"ブロックの右側)がズレるんです。
Opera7.23の「Operaとして認識させる」「Mozilla(5.0 4.78 3.0)として〜」「MSIE6.0として〜」では問題なく表示されました。
標準モード・互換モードでborderの有り・無しを試しましたが、すべて同じ結果でした。
>>4の
CSSバグリスト@CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/index.html の
http://cssbug.at.infoseek.co.jp/detail/winie/b010.html かもしれませんが、未確認のようです。
何かソースの誤りとか対策とかありますでしょうか?
839 :Name_Not_Found :04/03/15 13:15 ID:???
>>838 二個目のボックス要素のWIDTHを明記(100%でも)してやれば取りあえず回避できる。
【Mozilla】と【Safari】
列幅が%指定された固定レイアウトの表で、列幅合計が
100%を超える場合に、列が指定幅にならない。
table {
width: 300px;
table-layout: fixed;
}
td {
background: red;
}
<table>
<col style="width: 420px"><col style="width: 180px">
<tr><td>x</td><td>y</td></tr>
</table>
<table>
<col style="width: 140%"><col style="width: 60%">
<tr><td>x</td><td>y</td></tr>
</table>
<table>
<col style="width: 70%"><col style="width: 30%">
<tr><td>x</td><td>y</td></tr>
</table>
つづく。
CSS仕様書には、固定レイアウトの表では、表の幅は、
列幅合計と表のwidth指定のうち大きい方を採用すると
あります。
>>36 のソースでは、<table>のwidthは300pxだから、
1つ目2つ目の表は同じ列幅を表しています。そして、
列幅合計が共に300pxを超えるので、結果両方とも
600pxほどの幅の表になるべきですよね。
ところが、MozillaとSafariは、1つ目の表は正しく表示
しますが、2つ目の表は3つ目と同じ表示になります。
つまり、140%, 60% と指定すると、これを合計100%
に変換して 70%, 30% の幅で表示してしまうようです。
しかし、この動作は仕様書には合わないと思います。
なお、自動レイアウトの場合は、最終的にアルゴリズムは
自由とあるので、この動作でも仕様書に違反するとは言え
ないと思います。
【MacIE5】
列幅合計が表のwidthを超える場合に、列が指定幅にならない。
>>36 のソースを表示すると、全て300px幅の表になって
しまいます。列幅合計が表のwidthより大きくても、表の
widthの方が優先されるようです。
39 :
Name_Not_Found:04/03/15 21:05 ID:rp1OgY7l
実体参照で表記した文字が正しく表示されない(6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b127.html(前スレッド570・784)
これはバグ033「font-familyを指定した要素で文字化けする」に統合されましたが、やはり別のバグみたいです。font-family指定が無くても、或るスタイルでは文字化けする実体参照がありますから。
下記をWinp98SE・1024×768px・96dpiで見ると、18pxの行だけ左の2文字が黒長方形に化けます。
<html lang="ja">
<title>テスト</title>
<body>
<p style="font-size:15px">▶▷► 15px</p>
<p style="font-size:16px">▶▷► 16px</p>
<p style="font-size:17px">▶▷► 17px</p>
<p style="font-size:18px">▶▷► 18px</p>
<p style="font-size:19px">▶▷► 19px</p>
<p style="font-size:20px">▶▷► 20px</p>
</body>
</html>
単位をptにすると、13.5ptで文字化けする。
%単位で相対指定してみても、18px相当の大きさで表示されるとき化けた。
(これはIEの文字サイズ「最小」〜「最大」の設定次第で一定しない)
htmlタグのlang="ja"を削除するかpにlang="en"と指定すると化けなくなったが、それだと参照文字の大きさも変化する。
以上はIE6標準/互換で確認。Netscape7.1ではどれも全く文字化けしない。
他にも特定サイズ時だけ文字化けする文字があるかもしれない。
>>36-38 に追加
【IE6】と【Opera7】
列幅が%指定された固定レイアウトの表で、列幅合計が
100%を超える場合に、列が指定幅にならない。
どちらも 140%, 60% と指定すると、100%, 0% として
表示するようですね。2列目に何が書いてあるかも見えない。
という訳で、この件は主要ブラウザで仕様書通りに表示
するブラウザが存在しないという結果に。
良スレage
それはギャグのつもりなのか?のAAをここに入れる
【IE6】
発生条件:
1.2つの同一のリスト要素(ul,ol)がpやdivなどのブロック要素を挟んでいる。
2.挟まれているブロック要素の全てでfirst-letter擬似クラスに対して
margin(padding,border)が指定されている。
3.全てのブロック要素の内容物は折り返しをしない。
発生現象:2番目のリストの表示がズレる。
<html><head>
<title>CSSのばぐ</title>
<style>
p:first-letter { margin-left: 1em; }
div:first-letter { border: 1px solid #000; }
</style>
</head>
<body>
<ul><li>上のリスト</li></ul>
<p>first-letterにmargin</p>
<div>first-letterにborder</div>
<ul><li>下のリスト</li></ul>
</body></html>
Mac-IEだとz-index無視してインラインフレームが上に来ちゃうのか・・・
困ったな
いや、iframeなんか使ってる俺が厨なのか・・・
でもまぁ学校の課題だしいいか・・
いいのか?
>>50 用途に適っていればいいんじゃないか。
iframe の中身には代替内容が記述できるし。
>>22 はどうなったのでしょうか?
だれか検証してください。
>>43 これ、%指定じゃなくても発生しますね。
【IE6】と【Opera7】
固定レイアウトの表で、列幅合計が表幅を超えると、超えた
部分が全く表示されない。
td { background: red }
<table style="width: 50%; table-layout: fixed">
<col style="width: 25em"><col>
<tr><td>x</td><td>y</td></tr>
</table>
これで一列目の幅は 25em、二列目は残り幅になるはずです。
でも、表全体の幅が 25emより大きい場合は問題ないですが、
25emより小さい場合は、入りきれなかった二列目が全く表示
されなくなります。でも、overflow: visible; が標準なので、
たとえ表幅からはみ出してでも内容だけは表示すべきですね。
要は、広いウィンドウで小さなフォントの時は問題ないですが、
狭いウィンドウで大きなフォントにすると全く見えない部分が
出てきます。
57 :
56:04/03/20 09:46 ID:???
フロートを含むボックスのマージンが無視される(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b149.html >(複数の子要素または多くの内容物を含む)右フロート
右フロートだけでない、左フロートでもなります。
但し左フロートの場合は上のマージンだけ無視され、左のマージンは無視されない。
以上
>>26既出。
例)
<div style="margin:5em; background:aqua;">
<div style="float:left; width:50%;">float</div>
<div style="clear:both;">clear</div>
</div>
バグ回避法は
>>58に同じ。
>>60 というかサイト全体がおかしいかったみたい。
ページによってつながったりつながらなかったり。
昨日はSafariのページの半分くらいがつながらなかった。
infoseekの所為なのか。困ったものだ。
結局
>>29ってMozillaのバグだったんだべか。それとも、IE・Operaの……?
64 :
Name_Not_Found:04/03/21 15:01 ID:zWXiySAl
機種名
Sony Ericsson A5404S
ブラウザ名
Openwave Mobile Browser 6.2.0.5
使用した文書型
XHTML Mobile Profile 1.0
WML2.0
CSSの水準
WCSS(Wireless profile Cascading Style Sheet)
症状
●-wap-input-formatプロパティが属性値でしか反映されない
●-wap-marquee-dirプロパティの初期値は「rtl」なのに、何故か逆の「ltr」の挙動を示す。
●background-attachment: fixed;を適用すると、画像が画面外にはみ出る。
>>65 ulのpadding-topが0以外の値を指定され、且つliにheightが指定されてるときのみ、
IE6.0標準/互換でバグが発現した。
さらに、ulをolにしてみたら――
上paddingが指定してあると一番上のリストマーカーが消えるのは同じだが、
なんとpadding指定の有無に関係なく、リスト番号がすべて「1.」になってしまった。
ol.a{padding:50px 0 0 0;}
ol.b{/*padding:50px;*/}
li {
height:15px;
/*list-style-image: url(sold.gif);*/
}
<ol class="a">
<li>商品1</li>
<li>商品2</li>
</ol>
<ol class="b">
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
</ol>
liにheightを指定しなければバグは起きなかった。
68 :
65:04/03/22 16:11 ID:???
>>66-67 検証乙です、未出なのかな?
上paddingにゼロ以外を当てるときはliにwidthあるいはheightを指定しない。
もしくは上marginで代替するが解消法かな。
>>68 >上paddingにゼロ以外を当てるときは
だから ol の場合、paddingに関係なく、liにwidthあるいはheightを指定するだけで
リストマーカーが“1.”になるバグがあるんだって。
>>66 >>69 さらに、ulであっても list-style-type:decimal; が指定されてあれば
olと同じバグが起る。
但し、li要素でないp要素などをdisplay:list-item;にして
list-style-type:decimal;とwidth/heightを指定しても、これは起らなかった。
71 :
Name_Not_Found:04/03/23 08:28 ID:t9KN9Sv7
【WinIE6】
display:list-item;とlist-style-type:decimal;を指定した要素の連番が、途中から振られる。
例1)
.list {display:list-item; list-style-type:decimal; margin-left:5em;}
<h1>見出し</h1> <hr>
<p class="list">リスト1</p> <p class="list">リスト2</p>
例2)
<ul>
<li>li要素1</li> <li>li要素2</li> <li>li要素3</li>
</ul>
改行<br>改行
<p class="list">リスト1</p> <p class="list">リスト2</p>
<div>ブロック</div>
<p>リスト3</p>
どちらも「リスト1」「リスト2」のリストマーカーが「3.」「4.」になる。
つまり、display:list-item; list-style-type:decimal; を指定した要素の前にあるブロックレベル要素(br要素も)の数だけ、連番の最初に加算されるわけ。
ただし、その前にあるブロックレベル要素の子孫要素にブロック要素があっても勘定に入らない(例2)。
バグを回避するには問題の指定した要素をdivなどで括って、その前に何もブロック要素を入れない。
回避例1)
.list {display:list-item; list-style-type:decimal; margin-left:5em;}
<h1>見出し</h1> <hr>
<div>
<p class="list">リスト1</p> <p class="list">リスト2</p>
</div>
回避例2)
.list p {display:list-item; list-style-type:decimal; margin-left:5em;}
<h1>見出し</h1> <hr>
<div class="list">
<p>リスト1</p> <p>リスト2</p>
</div>
>>71追記。
Netscape7.1では
>>71のソースは連番にならない。リストマーカーはすべて「0.」になった。
Opera7.23では1.、2.、3.、と、ちゃんと連番になる。
例)
.list {display:list-item; list-style-type:decimal; margin-left:5em;}
<div>
<p class="list">リスト1</p>
<p class="list">リスト2</p>
<hr>
<p class="list">リスト3</p>
</div>
【Gecko】(Netscape 7.1とFirefox 0.8で確認)
table {
margin-top: 5em;
}
<table>
<caption>表題</caption>
<tr><td>内容</td><td>内容</td></tr>
</table>
なぜか表題と表本体の間にマージンが設定されます。
74 :
56:04/03/24 19:14 ID:???
ならWinIEとOperaのバグとして登録すればよいわけだ。
>>74
>>77 後者のバグ、MacIEではどうなんだろ?
79 :
73:04/03/25 10:54 ID:???
>>74 言い訳をすれば、
レイアウトの観点では、ユーザエージェントは CAPTION要素が指定する表の
キャプションを、1つのセルであると考える必要がある。
表の上側または下側に位置するキャプションは
列全体にまたがる1つのセルであり、表の左側または右側に
位置するキャプションは行全体にまたがるセルである。
というHTMLの方の仕様を見て早合点してしまいました。
本当ならCSSの仕様をも確認するべきでした。どうもすみませんでした。
>>78 MacIEで試しましたが、バグありません。
Mozillaと同じでfixedになります。
82 :
Name_Not_Found:04/03/29 09:46 ID:sEBWTJBu
第四版、第二刷開始。
84 :
Name_Not_Found:04/03/29 11:13 ID:d2wM07EA
削除前の第一刷で、81の後に誰か書き込んでなかったっけ?
巻き戻ってしまったのか。
82 名前:Name_Not_Found 投稿日:04/03/25 18:11 ID:KDSJo3Zr
CSSではないんですが、、、。
Safari1.2でiframeをつかったときに、window.nameがうまく解決されず
iframeのなかのhtmlを変更しようとすると、新しくWindowがひらいてしまいます。
既知の問題でしょうか?
83 名前:Name_Not_Found 投稿日:04/03/25 19:03 ID:???
iflameつかうなよ(´ー`)
手持ちのログからこれだけ発見。
>>86 Quirksモード(互換モード)って言葉、知らないの?
>>89 ログが途中まで(レス87)しかないぜ。
誰か完全版ログを保存してないか。
【IE6】【Mozilla】【Opera7】
表の列幅をパーセント指定した場合、コンテナブロック幅に
対する比率にならない。
table {
width: 400px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 50px;
}
table, td {
border: 1px solid;
}
<table>
<col style="width:200px"><col>
<tr><td>あ</td><td>い</td></tr>
</table>
<table>
<col style="width:50%"><col>
<tr><td>あ</td><td>い</td></tr>
</table>
上は200px、下は400pxの50%だから、どちらも同じ表示に
なるはずですが、異なってしまいます。
つづく。
>>92 のつづき。
IEは border-spacing に対応してないので分かりにくいですが、
どうも、どのブラウザも表幅の50%にはならなくて、表幅から
セル間隔を引いた残りの長さの50%になってしまうようです。
しかし、仕様書を見ると、width プロパティのパーセント指定は
コンテナブロック幅(この場合、表幅)に対する比率になるべき。
一方、HTML4 では width 属性のパーセントは available space
に対する比率とあるので、こちらが採用されてしまっているの
だと思う。
width 属性と width プロパティはレンダリングモデルが違うのを
混同したバグかな。
ところでNN4.1を入れたいんですがどこから落とせば良いのでしょうか
http://pc5.2ch.net/test/read.cgi/hp/1079598884/288- より派生。
【IE6標準/互換】
ボックスにwidthが指定されてある場合、
一定の値以下のheight指定は無効になる。
但し内容がコメントのみの場合はなぜか有効。
.upd1 {width:200px; height:3px; background:#f00;}
.upd2 {line-height:0; height:3px; background:#00F;}
<div class="upd1"></div><!--無効-->
<hr>
<div class="upd1"><!--有効--></div>
<hr>
<div class="upd1">無効</div>
【IE6標準/互換】
内容が空のボックスにline-heightが指定されてある場合、
一定の値以下のheight指定は無効になる。
但しコメントがあると内容が空とは見做さない。
<div class="upd2"></div><!--無効-->
<hr>
<div class="upd2"><!--有効--></div>
<hr>
<div class="upd2">有効</div>
97 :
288:04/03/31 14:41 ID:cPCP5iik
>>295 コメントを入れたらうまくいきました!
IEのバグだったんですね。
ご指導いただいた皆様、どうもありがとうございました。
98 :
288:04/03/31 14:42 ID:???
ごめんなさい、誤爆してしまいました。
100
Opera7.23は、
>>99も
>>100も全く無反応。
>>100では文字列が消えて見えないのはMozillaと一緒だが、
親要素に {position:relative; z-index:0;}追記しても反応しない。
IE6、NS7.1、Opera7.23でmarginの解釈が異なる。
.border {width:50%; padding:3px; background:#f00 url(red_stripe.gif) repeat;}
.border p {background:#ff0;}
<div class="border">
<p id="border">box</p>
</div>
boxの四辺をdiv.borderの背景画像(または背景色)の色が取り囲むが
Netscap7.1では上下が1em太くなり、
Opera7.23では上だけ1em太くなる。
指示通り上下左右とも5pxの太さなのはIE6だけ。
但しIE6でもwidthを明示しないとNS7と同じく上下に1em太くなる。
p {margin:0;}とすれば表示は三者で同じくなるが、
とすると、親要素にwidth指定があり且つpaddingを指定した時だけ
その直下の子要素のmarginの取り方が異なるわけだ。
識者の解説求む。
【IE6標準/互換】
bodyにz-indexを指定すると、子孫要素の背景色指定が無効になる。
例:
body {position:relative; z-index:0;}
.outer1/*, .outer2*/ {padding:5px; background:#f00;}
.outer1 p {background:#ff0; color:blue;}
<BODY>
<div class="outer1">
<p>box1</p>
</div>
<hr>
<div class="outer2">
<div class="outer1">
<p>box2</p>
</div>
</div>
</BODY>
box1の背景色は黄色のはずが親要素の赤になり
box2に至っては親要素ともども全く背景色が出ない。
上のHTMLソースから<hr>を削ると、なぜかbox2はちゃんと背景色が有効になる。
バグ回避には、親要素にwidthを指定すれば背景色は指定通り反映される。
IE6
http://pc5.2ch.net/test/read.cgi/hp/1079598884/463n 「HTMLで
<p><a href="
http://nantoka">あいうえお</a></p>
とし。CSSにて
p{line-height:2;width:200px;}
と、line-heightを1より大きな値などにした後、
InternetExplorer6.0でブラウズしているとき、activeの状態、
というよりマウスでクリックしている状態にすると、
破線で囲われる範囲が本来の文字の縦幅よりも下に伸び、
はみ出てしまう。 」
例に
p a:active {background:red;}
とか追記した方がわかりやすいかも。
>103
まず.borderのパディングがあることで、
pのデフォルトマージンは相殺されることなく
上下1emほど付くはず。
この点でIEがおかしい。
operaが上だけというのは単純にpのデフォルトスタイルの為かもしれない。
おそらく、widthを明示すると子のマージンを無視するようなバグがIEにあると思われ。
>>106 >operaが上だけというのは単純にpのデフォルトスタイルの為かもしれない
それはないな。
下記ソースで確認したら、Opera7.23でも上下にマージンが取られた。
<div style="background:blue;">blue</div>
<p style="background:red;">red</p>
<div style="background:blue;">blue</div>
109 :
108:04/04/06 12:43 ID:???
Moziilaではやはりpaddingの有無に関係なく、pのマージンが有効だった。
下記ソースをIE6・Nestscape7.1・Opera7.23で確認。
.border {/*padding:5px;*/ background:red; border:2px solid blue;}
.border p {background:yellow;}
<div class="border">
<p>box</p>
</div>
pの上下マージンが取られるので、青い枠線とpの背景色(黄色)との間に
div.borderの背景色の赤が上下に1em分見える。
但しOperaは上1em分だけ。
またIE6(標準/互換モード共に)は、div.borderにwidthを指定すると赤背景が消える。
IE6はheightを指定しても、上マージンの赤が消える。
しかしp {margin:1em 0;}と明示してやると、どのブラウザでも同じ表示になるから
IEでもmargin指定がすべて無効になるわけではないらしい。
デフォルト・スタイルのマージンが、widthかheightを指定した要素の子要素にあっては無効になるのか?
しかしp要素以外のblockquoteやulで試したら、
IEはデフォルトの上マージンだけ無効で下マージンは有効だった。
(Operaではやはり下マージンがどれも無効)
110 :
108:04/04/06 13:08 ID:???
IEでwidthを指定しても
<div class="border"><p>box</p></div>
でなく、子要素の前後に何か文字列が入ってると、問題無し。
<div class="border">文字<p>box</p>文字</div>
>>108 外側のdivがボーダーもパディングも持っていなければ、
pのマージンは外側のdivのマージンと相殺する。
divにマージン指定してなければ、divの上下に1em付くということ。
つまんないバグ発見(ぐち)
WinIE4で外部スタイルシート内に/*も*/と書くとそれ以下行のスタイルシート無効になった。
sjisは大丈夫だけどeucだとなった。
これがわかんなくて1時間無駄にした。ばかみたい漏れ。ハァー
114 :
112:04/04/14 15:23 ID:???
>>113 あっ、まさにそれだ。何だぁバグ辞典見てたのに気付きませんでした。
IE4(IE5も?)は@charset宣言未対応みたいなので
単純に/*〜も */とスペースを入れることにしました。
馬鹿な奴ほどコメント開始・終了記号にくっつけたがる法則。
まあWinIEバグ121がUTF-8だけでなくEUCでも発生するってのは
>>112の発見だな。
あとIE4ではバグ回避法が通用しないってのも。
【IE6/Netscape7.1/Opera7.23】
ブロックレベル要素にdisplay:inline;を指定すると、
上下marginが効かなくなる。左右は有効なのだが。
<div style="background:red;padding:0.5em;">
<div style="background:yellow; margin:5em; display:inline;">ブロック</div>
インライン
</div>
三大ブラウザで全部同じってことは、もしかしてこれで仕様通りなのか?
仕様書は見たが、ブロックレベル要素とインライン要素とでマージンの振舞が異なるとは書いてなかった。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/box.html
Mac Opera6.03で@importが効かないのはガイシュツ?
@import url("");と@import "";の両方とも駄目。
Win版ではリロードすると処理される、とあったけどMac版ではリロードしても駄目でした。
ちなみにIE5.2,Netscape7.1,Mozzila1.6では問題無し。
回避方法は@import自体を使わない、しかないのだろうか。
とっくにガイシュツだったら申し訳ない。
http://pc5.2ch.net/test/read.cgi/hp/1079598884/818-829 ネスケとオペラはOKだったのですが、IE6だとメニューと同じ高さから表示されませんでした。
解決方法ありますでしょうか?ソース張ってみますのでよろしくお願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>title</title>
<style type="text/css">
<!--
.menu {/* メニュー */
float: left;
width: 20%;
}
.main {/* メイン */
margin-left: 21%;
}
-->
</style>
</head>
<body>
<hr>
<div class="menu"> メニュー<br>
メニュー<br>
メニュー </div>
<div class="main"><img src="image.jpg" width="1280" height="1024"></div>
<hr>
</body>
</html>
>>121 820 :Name_Not_Found :04/04/21 13:41 ID:???
div にborderを設定してみると、IEでも <div class="main"> の上端自体は
menu にそろってますね(Operaではずれてますが)
ちなみに、画像サイズを640×480にしたら、お望みどおり高さ揃いました
ただし、ウィンドウサイズを小さくして、縦スクロールバーを出すと、画像の高さがずれます
824 :Name_Not_Found :04/04/21 22:50 ID:???
実際はもっと小さい画像(といっても600〜とかですが)を表示させて、
窓最大だと大丈夫なのに窓サイズを小さくしたとき、IEだけ高さがずれたので不思議に思って質問しました。
825 :822 :04/04/22 01:16 ID:???
これは、float の指定されたブロックのあとに、置換インライン要素が続くとき、
その置換インライン要素の幅が、全体の包含ブロックより大きい場合、どう振舞うべきか、
ということなんだけど、
仕様書やバグ辞典を見ても、私には該当する項目が見つからないんです。
>>818 のソースで、
.main{} (宣言が空)のときの表示は、IE も Mozilla も同じなんだけど、
.main { marign-left:21% }
.main { padding-left:21% }
とすると、ご承知のとおり、描画が異なる。どちらが正しいのだか、私にはわからない。
ちなみに、
.main { width:1600px }
としても描画が異なるんだけど、これは IE が間違っていると思う。
http://www5e.biglobe.ne.jp/~level0/mozilla/#20040425_SiteDesign2 【Mozilla/IE/Opera】
#content {
margin-right : 11em;
float : left;
}
#sidebar {
width : 10em;
float : right;
}
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
>float:left 指定された content の中に、float:right 指定された要素があると、
>sidebar が content の右に配置されない
>IE や Opera でも同じように表示されるのでブラウザ側のバグでもないようです。
>これは困りましたね。どういうカラクミでこういう動作になるのでしょうか?
>>124 とりあえず float に width 指定しない事例はそれ自体が仕様違反。
>>125 「仕様違反」(invalid)ではない。
CSS2仕様では width: 0 と見なされる。実際の UA は柔軟に解釈する。
CSS2.1 では「最小の幅を確保せよ」に変更される予定になっている。
ただし、width を明示しておいた方が無難なのは変わりないのだが。
何となく、フロートのマージンが誤解されているように思う。
>>126 中身にfloat:rightがあるときの「最小の幅」とは?
マージン残した最大幅だというなら(UAがそう算出したのであれば)
#content の右マージン11emのさらに右にはもう何も入る余地がない。
後続のフロート#sidebarが下にずれるのは当たり前の話だ。
>>127 #content {width:30%;}とかにしてウィンドウをリサイズ。
>>128 右マージン 11em については、よくわかりました。ありがとうございました。
まさに当たり前なんだけど、気付きませんでした。
無意識のうちに、#content の width は可変で、#sidebar の width が固定という
レイアウトを実現するのに必要、と思い込んでしまったのでしょう。
実際のところ、#content { width : 100% - 11em; }とでも指定できなければ
望ましい結果は得られませんよね。
IE 独自拡張は良くないものも多いですが、この「プロパティの値の演算」は
ぜひ正式に規格に取り入れられてほしいです。
>>130 ていうか、絶対配置だったら出来るんだが何か問題なのか?
すみませんが、これはバグかどうかお教えください。
IE6 で、display:inline によって インライン要素化した div の中に、
display:block によって ブロック要素化した em を置きました。
すると、em 要素の内容に、div と同じ種類の 囲み線が発生して
しまうのです。
他にも、
・div の border と、body の border とが重なった部分が非表示
・div の左右端の border-style が無視される
ようですが、とりあえず最初の1件を中心に報告します。
以下にソースを載せます。
133 :
132:04/05/05 10:55 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>block & inline</title>
<style type='text/css'>
<!--
em {
display:block;
border:solid 1px red;
margin:1em;
}
div{
display:inline;
border:dashed 1px blue;
}
-->
</style>
</head>
<body>
<div>
インライン インライン インライン インライン インライン インライン インライン
インライン インライン インライン インライン インライン インライン インライン
インライン インライン インライン インライン インライン インライン インライン
<em>強調部分</em>
インライン インライン インライン インライン インライン インライン インライン
インライン インライン インライン インライン インライン インライン インライン
インライン インライン インライン インライン インライン インライン インライン
</div>
</body>
</html>
134 :
132:04/05/05 10:56 ID:???
以上です。よろしくお願いします。
135 :
132:04/05/05 11:46 ID:???
追加です。
em { padding:1em; }
これを加えたほうが分かりやすいかも知れません。
とりあえずCSS2仕様的にはdisplay:inlineな要素の中でdisplay:blockとしても
無視されてinlineとならなければならない。
というわけでインライン中のブロックという前提がすでにバグ。
まあIEに限らず、無理やりblockにするブラウザがほとんどだが。
137 :
132:04/05/05 14:48 ID:???
>>136 なるほど。インライン要素の中にブロック要素を置いてはいけないというのは、
HTML の DTD で決まっているだけではなくて、CSS2 の仕様でも決まっているのですね。
勉強になりました。
Mozilla でも試したのですが、div 要素の内容は、em 要素の前後で匿名ブロックになります。
多分、そういう実装にしないと、いわゆるストリートHTML の表示に支障をきたすのでしょう。
個人的には、これはこれで便利なのではないかと、つい思ってしまいます。
138 :
132:04/05/05 15:34 ID:???
>>136 すみません、仕様書のどこに書いてあるのか、お教えいただけないでしょうか?
探したのですが、恥ずかしながら見つけられません。
>>138 俺も何処だったか、わからなくなっちまった・・・。
だが、代わりに
CSS2.1ではインラインがブロックを含む場合、インラインはブロックに
より分断され、
匿名ブロック
ブロック
匿名ブロック
とされる(予定)。というのが見つかった。
140 :
132:04/05/05 16:58 ID:???
>>139 すると、Mozilla の実装は、CSS2.1 の通りということになりますね。
すみませんが、その新しい内容も、よろしかったらリンク先をお教えいただけ
ませんか?またしても見つけられません。
もしかして、日本語ではないのでしょうか?
142 :
132:04/05/05 18:24 ID:???
既出だったらすみません。
safari1.2(v125)で
font-familyを指定した文字を太字にすると文字化けます。
どんなフォントを指定しても、bタグでもbold指定でも文字化けます
バグですよね?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="ja">
<head>
<title>bold</title>
<style type="text/css">
<!--
.fmly{
font-family:Osaka;
}
.fmlyb{
font-family:Osaka;
font-weight:bold;
}
.bld{
font-weight:bold;
}
-->
</style>
</head>
<body>
<span><b>fontbold</b></span><br>
<span class="fmly">font<span class="bld">bold</span></span><br>
<span class="fmlyb">fontbold</span>
</body>
</html>
Opera7.xでは短縮プロパティ backgroud において理解不可能な色を指定すると、
無視せずにtransparentとして解釈するみたいなんですけど、
これは既出 or 仕様でしょうか?
個別に指定すれば大丈夫なんですが。
* { background:#吉田 url("hoge.jpg") top left repeat-y scroll; }
* { background-color:#吉田;
background-image:url("hoge.jpg");
background-position:top left;
background-repeat:repeat-y;
background-attachment:scroll; }
>理解不可能な色を指定すると
なぜそんなことをするのか理解不可能
>>146 「理解不可能な色」を意識的に指定するような輩は相当な馬鹿なので、問題外。
そうではなくて、無意識の内に間違った値を入力してしまった時に、
適切なエラー処理が行われない所為で間違った事に気付き難くなるのが、問題。
CSS仕様の適合性として、UA は不正な値を含む宣言を無視しなければならない。
この処理が Opera において不正であることを
>>145 は示しているに過ぎない。
CSSのヴァージョンによりキィワードが増減した場合、
ユーザ側、UA側双方が(それぞれのヴァージョンのCSSに基づいて)
正しく記述/解釈した結果、UAに理解不能なキィワードが出現する事は
十分にあり得るな。
吉田って誰よ
え? ほら、あの、ピアノが上手い…
>>146 CSS3 Color で定義されている RGBA型の色指定は Safari で有効なので、ちょっと試しているときに気づいたんです。
background:rgba(126,126,.,0.4) url("hoge.jpg") top left;
で、試しに適当な文字列や日本語を充ててみても Opera は無視しないじゃん、と。
155 :
Name_Not_Found:04/05/28 10:52 ID:eRDBGYRf
cssの問題じゃないけど、■□□□□□□□□□■□□□□□□□□□
こんなかんじの文字列を文字数をつかむために流し込むとサファリだと
ボックスが変な風に広がってします。
ブラウザの日本語禁則処理の問題かな?ガイシュツ?
>>155 質問は、HTMLとCSSのソースを書いてね。
そして質問スレでやってね
更新おつかれさま。
こんなに詳しいバグ・リストは、世界中でここだけではないかな。
(他にあるなら知りたいものです)
159 :
Name_Not_Found:04/05/31 12:18 ID:HX7lp+S8
今win xp proをつかっています。
ブラウザはIE6なのですが、これをIE5.にしたいのですが
なにか良い方法ないでしょうか?
ネタかな
Virtual PC入れて昔のWindowsを入れるとか
>>162 Safari1.2.2(一番新しいやつ)で試してみたが、確かに拡大縮小されない。
まあ、特に困らないけど。
Gecko, Opera7x
position: [absolute | fixed];
top: 0px;
left: 0px;
標準モードで上記のように絶対位置を指定した場合
TOP がゼロになっているにもかかわらず上に 1em の余白ができる。
IE, Opera6x ではならない。Gecko も互換モードではピッタリ。
仕様っぽいがソースを見つけられない為わからぬ。
意見とソースをキボン
マージン。
top,right,bottom,leftはボックスのマージン辺から
包含ブロックの辺までの距離。
>>164 >TOP がゼロになっているにもかかわらず上に 1em の余白ができる。
"containing block" が何処でどのようなボックスなのか
わからなければ話にならない。具体的な条件を提示すべし。
>>165 逆。"containing block" の辺からマージン辺までの距離。
167 :
164:04/06/04 10:31 ID:???
P 要素の margin-top だと判明。
UA+モードでの絶対位置指定の場合の扱いが
勝手にマージンを無くすのか、そのままか。
ということだったらしい。
Opera 7 でのバグ報告。
<body style="font-size:12pt">
<div style="width:20.5em;float:left;border:solid 1px blue;">
<p>foo...</p>
</div>
<div style="margin-left:20.5em;border:solid 1px red;">
<p>bar...</p>
</div>
</body>
先行するフロートボックスの width が「20.5em」で
後行するブロックの margin-left も「20.5em」なので、
二つのdiv要素が同じフォントサイズであれば、
“左カラム右端”と“右カラム左端”が揃う筈だけど、揃わない。
何故か "20以上の整数+0.48〜0.99+(em|ex)" で発生する。
算出値の丸め込み処理に何か問題があるのかもしれない。
169 :
168:04/06/05 03:03 ID:???
0.48〜0.99 って書いたけど、どうやら、
20以上の大きさによって不具合が発生する
小数点下位が微妙に変化するみたい。
170 :
102:04/06/07 09:07 ID:???
IE6のバグ
http://pc5.2ch.net/test/read.cgi/hp/1085400294/707-750 #main{float: left;width: 60%;}
#menu{float: right;width: 40%;}
<div id="menu">
←ここに各コンテンツへのリンク
</div>
<!--メニュー終了-->
<!--テスト--> <!--テスト2-->
<!--本文開始-->
<div id="main">
あいうえおかきくけこ ←ここにメイン部分
</div>
コメントを増やすにつれ、メイン部分の文字がmenuの下の位置にも表示されるとのこと。
既出だったらすみません。
table要素内のdiv要素に
widthをauto以外、
paddingのleftかrightに相対値を指定すると
IE6.0sp1でブラウザ描画エリアを大幅に越えた
横幅が設定されてしまいますが、
これって自分のところ以外でも再現されるバグでしょうか?
OSはwin2000です。
以下(↓)はサンプルコードです。
<html>
<head>
<title>Sample</title>
<style type="text/css">
<!--
div {
width: 1% ;
padding: 0px 1% 0px 1% ;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>
<div>hoge</div>
</td>
</tr>
</table>
</body>
</html>
>>173-174 >widthをauto以外、
auto以外でも、pxやem単位で指定すればdivは問題無し。但しtableの横幅は異常に伸びる。
%単位にすると、divとtableの双方で横幅に異常あり。
* {border:1px solid blue;} を追記して表示確認した。Win98SEにて。
>paddingのleftかrightに相対値を指定すると
相対値といっても、%でなくemにすれば問題無し。
padding: 0px 1em 0px 1em ;
>>173-175のバグは、tableにwidthを%単位以外で設定することで回避できる。
table { width:10em;}
table { width:400px;}
177 :
176:04/06/10 02:18 ID:???
>>175 再現いただき、どうもです。
しかしIEのバグにはいつも苦労させられます。
バージョンアップが望まれるところ。
MozillaとOperaの完成度があがってきたから尚更。
無理だろうな・・・。
WinXP上のFirefox0.9で
html {
height: 100%;
}
body {
-moz-box-sizing: border-box;
height: 100%;
width: 100%;
padding-top: 40%;
}
ってすると、padding-top: 40%;の実際のピクセル数がウィンドウの横幅に比例して決定され
ているみたいなんだけど、これって正常? 独自拡張だから何とも言えないんだけど。
ウィンドウを横長にすると縦をかえないのに城辺からの位置が変わる。
逆に、横幅を変えないと縦をいくら小さくしても城辺からの位置が変化しない。
なんかおかしいような。
すまん、城辺じゃなくて上辺ね。
182 :
180:04/06/15 23:21 ID:???
あうち。勘違いしてた。%で指定した場合親要素の横幅が基準になるのか。
縦は縦かと思ってたよ。
もうちょっと調べてから書き込むべきでした。すいません。
Opera7
bodyのbefore擬似要素、after擬似要素のdisplayプロパティの値を
block、markerにすると、背景関連のプロパティが無視される。
>>183 関連して
:afterをblockにしてbackground指定すると、全域に背景が出るね。
FireFox 0.8/0.9
<div id="Box">
<p>メニュー</p>
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
</div>
みたいな部分があったとして(内容はドウでもいいんだけど)
これに
#Box {
right: 0; top: 0;
position: fixed;
height: 3em;
border: 1px solid;
overflow: hidden;
background: White;
}
#Box:hover {
overflow: auto;
height: auto;
bottom: 0;
}
ってスタイルをつけて自動展開するメニューを作ろうと思ったんだけど、
overflow時に現われるスクロールバーとボックスとの間にマウスが行くと
hover状態が解除されちゃうんだよね。バグ?仕様?
overflow使うとマウススクロール出来なかったりいい事無いよね
>>187 >li要素でなくol要素にwidthを指定しても、バグが起るとのこと。
そんなこと書かれてねぇし、バグも起こらねぇし。何を勘違いしてんだ。
良スレage
OS…WinXPPro
ブラウザ…Opera,NN7,IE6
[common.css]
td { font-size : 10pt; }
td.body { font-size:10px; }
div.submenu { margin-left:6px; margin-right:8px; margin-top:5px; margin-bottom:4px; }
[test.html]
<html lang="ja">
<head>
<title>テスト</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="./common.css">
</head>
<body>
<table>
<tr>
<td><div class="submenu">テスト</div></td><td class="body">テスト</td>
</tr>
</table>
</body>
</html>
こうやると、フォントサイズ指定同じはずなのに、大きさが異なって表示されてしまいます…
なにかやり方悪いんでしょうか?
バグっぽい雰囲気もするんだけど…
ちょっとソースが見づらいので要約して書き直します…
[common.css]
td { font-size : 10pt; }
td.body { font-size:10px; }
[test.html]
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="./common.css">
</head>
<body>
<table>
<tr>
<td>テスト</td>
<td class="body">テスト</td>
</tr>
</table>
</body>
</html>
同じ10pxなのでネストした結果どっちが優先されてもフォントサイズは10px
になると思うのですが…勘違いor私のちょんぼならご指摘ください。
すみません。
すみません…自己解決しました…
前のカキコミは見ないでください…顔から火が出そうです…もう死にそうです…
二日悩んだ結末がこれかよっ(´・ω・`)
こんなのありました。
p {
font-size: large !important;
font-size: small;
}
上記のようなスタイルを適用する場合、
・Win IEでは、!importantが宣言されていても後部のスタイルが優先される。(smallが優先)
・Win IE以外のブラウザでは、後部にスタイルがあろうとも!importantが優先される。(largeが優先)
こういう記述の仕方が正しいのかどうか分かりませんけど、
Win IEだけ違うスタイルを適用したい時には便利です。
当方IE6での確認のみですのでそれ以前のバージョンでどのような挙動があるのかは知りませんが。
202 :
200:04/06/30 15:01 ID:???
いや、clearプロパティじゃなくて、hrが画面外にはみ出すんです
>>200 そのページを見ても何もはみ出てないが。
面倒がらずに、問題のHTMLとCSSのソースを書きなさい。
だからもっと見やすく再現できる形でソースを出しておくれよ。
何が"だから"なのかよく分からんが。
「見づらい」、だから「もっと見やすく……」、ってことだろ。
>>203-207 <hr>にcssでborder-widthで0pxを指定してやるとはみ出るようです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>バグ</title>
<style type="text/css"><!--
div {
border: solid 1px #0F0;
width: 70%;
}
div.a {
width:300px; float: left;
border: solid 1px #F00;
}
hr {
border-width: 1px 0px;
}
--></style>
</head>
<body>
<div>
<div class="a">テスト</div>
<hr>
</div>
</body>
</html>
border-width: 0px 1px 1px;
だとはみ出ない。謎だ。
210 :
Name_Not_Found:04/06/30 19:27 ID:TQvlpFz2
既出だったらすみません。
<li>タグを使ってよくある左メニューを作ろうと思い
CSSでリストごとに背景とボーダーを追加したところ
Win NN7.1で2〜3個の<li>ごとに、意図しない謎の
ボーダーが出現。なぜだーーー(涙)。
---以下、ソース該当部分---
<ul>
<li class="top"><a href="">ああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li class="now"><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
<li><a href="">ああああああああああ</a></li>
</ul>
211 :
Name_Not_Found:04/06/30 19:28 ID:TQvlpFz2
---↑のCSS部分---
ul{
font-size:0.75em;
color:#666666;
line-height:1.7em;
margin:0px;
padding:0px;
list-style-type:none;
}
li{
margin:0px;
padding:2px 0px 2px 7px;
border-bottom:solid 1px #f3f3f3;
border-left:solid 3px #333333;
background:#dfe3e6;
}
.now{
background:#66cc00;
border-left:solid 3px #006600;
border-bottom:none;
}
.top{
background:#cccccc;
padding:10px 0px 10px 7px;
}
具体的に検討を重ねてないのならこっちじゃなくて質問スレに書けよ
まあまあ。ここで検討してやってもいいでないの。
わかりました。
もしかしたらガイシュツかもしれないけど、一応報告します。
Macのブラウザ(IE、ネスケ、safari)で、
borderで枠線つけて、中の文をwhite-space:no-wrapにしていると、
ウィンドウの横幅を狭めた時、borderの枠線から中の分が飛び出します。
訂正。no-wrapじゃなくてnowrap。
既出かもしれないけど、
確認したのはWindowsのNetscape7.01とMozilla1.4.1で、
一つのページで、HTML要素とBODY要素の二つ同時に背景画像指定すると、
CPU稼働率がめちゃめちゃ上がって動かなくなってしまいます。
>>216 バグでも何でもなくそれが正しい挙動。
nowrap を指定した場合、自動的に行が区切られないので、
ブロックの幅より内容量が大きくなってしまうことがある。
つまり、内容辺からテキストがはみ出して整形されてしまう。
このような場合に、はみ出た内容をどうのように切り抜くか、
切り抜かないかを指定するのが、overflowプロパティの役目。
初期値は 'visible' なのでデフォルトでは内辺からはみ出る。
220 :
210:04/07/05 18:11 ID:HHKKuXCs
>212
paddingとかmarginとか色々いじってみたんですけど、
NNだけどうも挙動がおかしいので、バグ辞典スレに
書かせていただきました。
でも結局解決できてないんで、質問スレに書くべき
だったかもです。
未確認バグ(WinIE)
コメントがフロートの位置をずらす
http://cssbug.at.infoseek.co.jp/detail/winie/b166.html 例示を少し變更し、下記のソースでバグが確認されました(Win98SE/IE6標準・互換)。
<div style="float:right; width:55%; background:aqua;"><ul>
<li>list1</li><li>list2</li>
</ul></div>
<!-- コメント1 --><!-- コメント2 -->
<!-- コメント3 --><!-- コメント4 -->
<!-- コメント5 --><!-- コメント6 -->
<!-- コメント7 --><!-- コメント8 -->
<div style="float:left; width:45%; background:yellow;"><ul>
<li>list3</li><li>list4</li><li>list5</li>
</ul></div>
<hr>
黄色いボックス内にある“list4”といふ文字列が、空色のボックスの下にも重複して現れる。
同じく、“list5”といふ文字列が黄色ボックスの中だけでなく下にも重複表示される。
したがって、バグは「コメントがフロートの位置をずらす」ではなくて、
「コメントがフロート内の文字列を別の位置にも重複出現させる」といふところか。
バグの再現性のポイントは、widthの合計が100%になること、clearした要素が次に置かれてないこと。
さらにコメントを増やせば、増やすほどに重複出現する文字列も増えるが、
これは、float:left;した黄色ボックスの文字列を末尾の方から取って、重複されてゐる。
リストよりただの直線テキストにしたソース(
>>172)の方がバグが見えやすい。
>>222 して、その再現條件は如何に? 如何なるコメントがバグとなりしか。
はじめて来たスレなんで、どーせガイシュツだと思ってグチだけかいたけど、
出てないなら調べるよ
<!--
〜するように
-->
こんなカンジでcssの先頭に
「に」で終わるコメント
書いたらネスケ7.1でダメっぽ
ごめ
「に」は関係ないや
とにかく、
<!--
文字
-->
でダメだった
>>210-211 「ボーダーが出現する」わけではない。
border-bottom:solid 1px #f3f3f3;をborder-bottom:solid 1px red;にすれば
わかるが、li同士の間が空いてみえるだけ。
表示→テキストの拡大/縮小を実行すれば、その空き方も異ってくる。
margin:0px;なのに隙間が空くのはたしかにヘンではあるが、line-height:1;を追加指定すれば直る。
ちなみにline-height:1.3にしたら下辺borderが消えてしまった(下記、但し表示率100%で)。
li{
border-bottom:solid 1px red;
border-left:solid 3px #333333;
background:#ccc;
margin:0;
line-height:1.3;
}
<ul>
<li><a href="">111111111</a></li>
<li><a href="">222222222</a></li>
<li><a href="">333333333</a></li>
<li><a href="">444444444</a></li>
<li><a href="">555555555</a></li>
<li><a href="">666666666</a></li>
<li><a href="">777777777</a></li>
<li><a href="">888888888</a></li>
<li><a href="">999999999</a></li>
<li><a href="">1010101010</a></li>
</ul>
>>226 それだと全然わからないし、再発も防げないヨ。
@charsetは指定してあってもバグるのか?
>>229 ほーなるほどー勉強になりました
/* */でやったらおkでした
ま、くだらんけど情報の一つとしてお役に立てたら幸いです
だって、
<!--
文字
-->
ま、ダメで、
<!--
-->
なら動くし
>>228 それで解決したところで、全く持って解決にならないので、
試してもないです
なんでもバグだバグだと騒ぐなと言う好例
>>233 ハア? 意味不明。
だいたい、そこ見てもコメントは/* */なのにどうして<!-- -->が出てきたのやら。
話題すりかえてどうする@charsetの話だろが
>>234も熱くならずそのページ全部読んでみ
>>235 読んだから言ってるのだが。
>外部スタイルシートで@charset宣言を用いて正しい文字コードを明示すればこのバグを回避できます。
>>236 プッ
いるよな最後まで話聞かないやつwwwww
>>そもそもこれはNetscape7.1の話だろ。
そっから間違えてる
ネスケ7「のみ」を解決させてどうする
直リンやろうwwwww
>>239はどんどん馬鹿丸出しになるねえ……。
もともと
>>222は「ネスケ7.1」でのバグを報告したわけだが。
それ以外のブラウザではバグは起きてない以上、解決も必要無い。
もっとも、実際はバグですらなく、
>>222の誤記でしかなかったわけだ。あほくさ。
またリンクは自由であるから、直リンクを咎められる理由などない。
>>またリンクは自由であるから、直リンクを咎められる理由などない。
プゲラ
>>241、プゲラじゃねえんだよ。
論破されたら大人しくしててくれ。
>>241 で、「それで解決したところで、全く持って解決にならない」って、どんな意味よ。
ちゃんと説明できるもんなら説明してみ。
あと「全く持って」って何だ。「全く以て」だろ、お馬鹿さん。
いるよな、片方からしかの視点でしか見れない香具師ってwwwww
うお、さきにレスついてるし
で、「ネスケ7.1」の話を振っておきながら、「ネスケ7「のみ」を解決させてどうする」って
どんな意味なのよ。
説明できるもんなら説明してみ。
>>239
>>248よ。。。みんなの言うとおりだ、、、
「直リン」について、知識なさすぎやしないかい?
視点を変えてみろよ
ここは直リンクの是非を論じるスレッドなのか?
そんなの脇道の議論なんだから、異なる視点があるならあるでさっさとそれ出して片づけろや。
それより
>>244と
>>249への返事はまだぁ?
>>252 ん?但し書き読めばわかると思うが?
よりによって、またそこへ直リンかよ
この板でこれほど直リン理解してないとはなwwwww
254 :
Name_Not_Found:04/07/06 18:20 ID:Ml7pLdYv
>>256 結局、ちゃんと言葉で説明できないのか?
どうも最初から思ってたが、日本語の不自由な人なのかな……。
>>253 >>256 勿体つけないで具体的に指摘したら。
それとも論破されるからわざと遠まわしに言ってるのかい?
ドッチカッテユート>259ノホウガヒッシデワラタ
<!-- 但し書き -->
/* なんで直リンクが問題になったんだろ…… */
>>225 の言っているバグ(?)はstyle要素内でも
発生するので文字符号化方法は関係ないね。
/* 2ch で URL を書くと ime.nu を中継するから「間接リン」じゃないの。 */
>>263 オイオイ、<!-- -->を外部スタイルシートに書くのと
HTML文書の中に書くのとでは、全然話が違ってくるよ。
例、<script type="text/javascript"><!-- --></script>とかね。
/* で、間接リンって何か拙いのか? */
>>264 そんなことはわかってんの。
前の方で@charset云々とか言ってるけれど、
文書内の埋め込みで発生するわけだから
文字符号化方法は関係ないでしょ、ってこと。
前の方で「直リン」云々とか言っているアフォがいるけれど、
2ch では「間接リン」にしかなり得ないでしょ、ってこと。
>>265 「文字符号化方法は関係ない」はその通りだが、
それを「style要素内でも発生するので」ってところから導くのはやはりいかがなものかと。
/* 間接でも直でもいいけど、ttpにせずhttpからURLを出すのは何かまづいのかいな、ってこと。 */
267 :
Name_Not_Found:04/07/06 22:28 ID:HWPlHyu8
>>266 >ttpにせずhttpからURLを出すのは何かまづいのかいな
「直リンやろうwwwww」とか煽ってるアフォがいるけど、
img.nu を経由してるから「直リン」じゃねぇだろう、てこと。
何かまずそうなのを避けるための img.nu なわけで無問題。
それでも気になるのであれば ttp にすればいいだろうけどさ。
っていうか、頼むからこれぐらいの意図わかってよヽ(゚∀゚)ノ
×img.nu
○ime.nu
いや、間接とか直とかどうでもいいだろ。
では、ime.stを経由しなかったら問題なのか、ってこと。
それ位、わかってよ。
だからこっちのスレで検討・考証すんの嫌なんだよな
だからって? 今回は、
>>222があまりに愚かだった。
凄まじく恥ずかしい人が降臨されてたんですね。
初めて書くです・・・ガイシュツならすまん。
IE6
症状:floatさせた要素と前の要素とのマージンが潰れる
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
p {background-color: #ccc;}
</style>
</head>
<body>
<p>↓デフォルトの</p>
<p>↑マージン同士</p>
<p style="float:left">これが浮動配置のP</p>
</body>
</html>
floatさせたボックスのマージンは隣接するボックスのマージンと潰し合わないと仕様書にあるので
バグかな?FireFox0.8だと「デフォルトのマージン同士」の間隔の恐らく2倍の幅が取られてます
>>278 ん、ゴメンね。width付けても起きる。
280 :
277:04/07/13 23:49 ID:???
>278
すんません、>221の通り合計100%にしたら発生しますたorz
http://pc5.2ch.net/test/read.cgi/hp/1087263288/935n 【WinIE6】
<dl>
<dt>名前</dt>
<dd><input type="text" name="name" value="" /></dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="mail" value="" /></dd>
</dl>
を、
dl{
border:1px solid #000;
}
dd{
margin-top:-1em;
margin-left:20em;
}
とすると、ボーダーが横に何本も出てきてしまいます。
DDの横並びスタイルを解除すれば、普通に全体を線で囲んでくれるのですが…。
どうすればいいでしょうか?
http://pc5.2ch.net/test/read.cgi/hp/1087263288/940n <style type="text/css">
.left { float: left; width: 30%; border: 1px solid red; }
.right { margin-left: 32%; width: 70%; border: 1px solid red; }
.scrolling { overflow: scroll; }
</style>
というスタイルを
<p class="left">
left<br>
left<br>
...多めに
</p>
<p class="right">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...はみ出すくらいたくさん
</p>
<p class="right scrolling">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...はみ出すくらいたくさん
</p>
へ適用したものをMozilla 1.7で見ると、
class="right"とclass="right scrolling"のボックスの位置が違うのは仕様ですか?
なんでCSSスレで質問して回答待ちのレスをこっちに転載するの?新手のマルチ?
>>286「下線や取消線は表示されなくなる」は標準モードの時のみ。
お前の口調面白いな
へ?
お前の口調面白いな
へ
>>292 list-itemにvertical-alignに適用されるのがそもそもバグ。
vertical-alignはブロックレベルエレメントに適用されないし
継承もしない。
将来的には::marker{vertical-align:...}ってことになるんだろう。
>>295 リスト・アイテムにvertical-alignが適用されたのではなく、
リストのテキストに適用されたのではないか?
【Win98/Opera7.52】
数値文字参照で表示した文字にfont-familyを指定すると、文字が消えることがある。
BODY{
font-family:'CX古典ミン-R','文字鏡契冲明朝','癸羊明朝',MingLiu,"MS 明朝", 'ヒラギノ明朝 Pro W3', serif;
}
<p>本文は<big>►舊字體</big>です。</p>
上記のソースで、WinIE6やNetscape7.1では何ら異常が無いのに、
Opera7.52だけ數値参照した文字が表示されずそこだけ空白になった。
ユーザーモードにすれば表示されるから、CSSに問題があるのは明らか。
スタイルシートのプロパティの値のうち'文字鏡契冲明朝'をコメント・アウトすると、
文字は表示される。
しかしこの文字鏡契冲明朝フォント固有の不具合にしては、IEやNNで問題は起きないのだからヘンだ。
Operaに何か問題があると見做される。
>>296 馬鹿かお前は。list-item要素はブロックレベルなので
vertical-align が適用されてはならない、ってことだ。
っていうか言っていることが意味不明。
現状の CSS2 は要素単位でスタイルを割り当てるのであって、
特定のテキストノードにスタイルを適用することなどできない。
>>296 CSS2でリストのテキストに適用させたければ
<li><span>りすと</span></li>
li span {vertical-align:...}
などとなるはず。
>>297を訂正。
<big>►</big>→<big>►</big>)
【NN4.7】
LI {display:list-item;}と指定すると、リストマークの位置が異常になる。
リスト要素をリスト記号つきでディスプレイしろってのは
当り前(デフォルト)の指定のはずなんですけどね……。
ホント、NN4は駄目なブラウザだな。
>>303 いや、ずれたとこまで幅が縮まるから文字の開始位置は変わりません
>>305 でも見かけ上、ズレはなくなりますよね。
既出のwidthの場合でも、実はズレたところまで要素幅が縮まるわけでしたし。
307 :
Name_Not_Found:04/07/25 03:00 ID:E9iP4G6j
CSS/DHTMLバグ辞典探したけどないようなので。
環境:win opera7.21
状況:外部スタイルシート内で文字コード指定した直後のセレクタを認識しない?
@charset "euc-jp";
body{
margin: 200px;
padding: 200px;
color: #ff0000;
background-color: #0000FF;
}
上記、opera7.21だと、テキストの色もbody全体の余白も、背景色も、
デフォルトのままみたいですが・・・。
ちなみにこれは最初のセレクタだけのようなので、
body{
margin: 0px;
}
body{
margin: 0px;
padding: 0px;
color: #333333;
background-color: #0000FF;
}
のように、一番目を何かダミーをおいておけば
2番目以降は反映される模様です
>>307 Opera7.52で@charset "Shift_JIS";だが、そんなバグは起きてない。
念のため@charset "euc-jp";でも試したが、やはりスタイル指定は適用される。
何か間違ってない? linkタグのcharset属性とかさ。
>>307 レスポンスヘッダのcharsetと矛盾してない?
311 :
307:04/07/26 01:48 ID:???
>>308,309,310
レスを参考に、もう一度調べなおしてみて、もう少し正確な
バグ(仕様通り?)の発生状況がわかりました。
1行目
2行目 @charset "euc-jp";
3行目 body { background-color: #0000FF; }
上記のように、@charsetの前に1行あると(その1行目が何もなくても、
あるいはコメントなどでも)、@charset直後のセレクタが反映
されませんでした。
1行目を削除し、@charsetを1行目にするか、もしくは@charsetを削除
すれば、operaでも正常に動作しました。
ちなみにlinkタグのcharset属性とかの矛盾は念のため再度
確認しましたが、ありませんでした。
win firefox0.8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head><title>bug</title>
</head>
<body>
<div style="border:0px solid blue;background-color:#ccc">
<p style="float:left;width:6em;height:3em;border:1px solid blue;margin:0">float</p>
<p style="border:1px solid red;margin:1em">text text text</p>
</div>
<div style="clear:left">clear</div>
</body></html>
divのborderを表示しないとfloatに後続する要素のマージンが無視される・・・
315 :
Name_Not_Found:04/07/27 16:11 ID:LuWNiau1
win98 IE5.0
入れ子ボックスで、子要素の上下マージンが親要素のマージンになる。
またコメントを挿むと、親要素の下パディングが無視され、子要素が親要素の下ボーダー領域にまでかぶさる。
.maintitle {
background:yellow;
border:4px solid #666;
padding:5px;
}
.maintitle h1 {
border:1px solid #999;
background:red;
margin:10px;
}
<div class="maintitle">
<h1>見出し</h1>
<!-- コメント -->
</div>
>>315は下記に類似する。
親要素を持つp要素のマージンが無視される(IE5)
http://cssbug.at.infoseek.co.jp/detail/winie/b083.html P要素に限らず、親要素を持つブロックレベル要素全般に当てはまるか。
しかしWinIE5.0には別のバグがある。
【WinIE5.0】親要素にli要素を持つp要素の上下マージンがul要素の上下に加算される。
p {margin:1em;}
h5 {background:#ff0; margin:0;}
ul {
background:#ff0;
margin:0; /*IE5.0ではなぜか上マージン空く*/
}
<h5>更新</h5>
<ul>
<li><p>書評集に一本追加した。</p></li>
<li><p>リンク集からリンク切れを削除した。</p></li>
</ul>
たぶんolでも同じバグが起きる。
やはり、すべて親要素を持つブロック要素の上下マージンは、親要素に加算されるらしい。
下記の例ではliの上下marginがolに適用された。WinIE5.0にて確認。
li {margin:0.5em;}
h5 {background:#ff0; margin:0;}
ol {background:#ff0; margin:0;}
<h5>更新</h5>
<!-- バグの所為でここに隙間が空く -->
<ol>
<li>書評集に一本追加した。</li>
<li>リンク集からリンク切れを削除した。</li>
</ol>
<!-- バグの所為でここに隙間が空く -->
<h5>更新</h5>
>>316の場合だけ、親要素ではなく祖父要素(?)にマージンが加算されるわけだ。
リスト関係は何かとややこしいのかな、やっぱり。
Opera7・NN7/IE6
相対配置でtopを%指定すると無効になる/有効になる (どちらが正しい?)
http://pc5.2ch.net/test/read.cgi/hp/1089975931/317- <div style="position: relative; top: ○○%;">
・
・(この間に全体のレイアウトを収める)
・
</div>
のような感じで、全体を若干下げたりしています。
この場合、IE6では意図したように表示されますが、
NN7.1やMozilla1.7.1とOpera7.52では反映出来ないようです。
パーセントではなく、ピクセル単位などで指定すれば反映されます
>>319 topの%指定には
コンテナブロックのheightが明示されていなければならない。(autoでは駄目)
IEは余計なお世話をしてくれるだけ。
つまりIEのバグか。いや、「仕様」かな。
>>316のソースはNN7.1やWinIE6.0でも少し違ったバグが起きる。
h5, ol {background:#ff0; margin:0;}
<h5>更新</h5>
<!-- NN7.1のみここに隙間が空く -->
<ol>
<li><p>書評集に一本追加した。</p></li>
<li><p>リンク集からリンク切れを削除した。</p></li>
</ol>
<!-- NN7.1とIE6.0でここに隙間が空く。IE6はこちらだけ。 -->
<h5>更新</h5>
NN7もIE6も、p {margin:0 auto;}を指定すると、上下とも隙間は無くなる。
これはリスト要素でだけ。
>>316のWinIE5.0でみたいに親要素を持つブロックレベル要素全般には当てはまらない。
>>322に追記。
p {margin:auto;}と指定してみたら、
NN7.1では隙間が消え、
IE6.0(標準モード)では下だけでなく上下とも隙間が空いた。
ワケワカラン。
WinIE6
sup、sub要素のfont-sizeの算出がおかしい
<p style="font: 3em serif;">
1<sup style="vertical-align: 0; font: 1em serif;">1</sup>
1<sub style="vertical-align: 0; font: 1em serif;">1</sub>
</p>
上のようにした場合、4つの「1」のフォントサイズは等しいはずなのに
明らかにsup、sub要素のフォントサイズが小さい。
標準、互換両モードで確認。
>>325 %単位で指定しても結果は同じだね。WinIE6にて確認。
p {font-size:200%;}
sup, sub {font-size:100%; vertical-align:0;}
<p>
sup<sup>sup</sup>
sub<sub>sub</sub>
</p>
<?xml version="1.0" encoding="UTF-8"?>
<!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"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
BODY {background-color:#EFEFEF;}
DIV {width:50%;border:1px solid black;}
UL LI {list-style:circle url() outside;display:inline;border-bottom:2px dashed red;border-left:2px dashed red; background-color:#EEEEEE;}
</style>
<title>CSS質問スレから誘導されてきた人</title>
</head><body>
<div>
Windwos Me、IE6+SP1
IEのみで見られるバグ?NN7.1では再現されない。
<ul>
<li>LIに下線をつけて左マージンを指定。</li>
<li>背景色を指定すると、LIが上下に重なったところ(下行に送られたところ)の上の行のLIの下線が表示されない。</li>
</ul></div></body></html>
329 :
328:04/08/01 13:13 ID:???
背景色を指定しているときに、「UL LI 」にマージンを指定すると、
上のLI(これをLI1)と下のLI(これをLI2)が重なっているところのボーダーが表示されない。
LI1とLI2が重なったところ(LI1が折り返されたところのみ)で、
LI2の上部とLI1の折り返されたところの下部が重なってるっぽい。
line-height が指定されていないけれど。
331 :
325:04/08/02 23:32 ID:???
>>326 追試してみたところ以下のすべてで再現
WinIE048ではないと思われ。
<p style="font: 20px serif;">
1<sup style="vertical-align: 0; font: 1em serif;">1</sup>
1<sub style="vertical-align: 0; font: 1em serif;">1</sub>
</p>
<p style="font: 20px serif;">
1<sup style="vertical-align: 0; font: 100% serif;">1</sup>
1<sub style="vertical-align: 0; font: 100% serif;">1</sub>
</p>
<p style="font: 20px serif;">
1<sup style="vertical-align: 0; font: 20px serif;">1</sup>
1<sub style="vertical-align: 0; font: 20px serif;">1</sub>
</p>
<p style="font: 15pt serif;">
1<sup style="vertical-align: 0; font: 15pt serif;">1</sup>
1<sub style="vertical-align: 0; font: 15pt serif;">1</sub>
</p>
ってか絶対単位で指定してもかよ
>>327 追試Thx
Win98SE,Moz1.8a2での報告です。既出だったら無視願います。
http://cssbug.at.infoseek.co.jp/detail/mozilla/b019.html の下側
<span style="position:relative; top:1em; background:aqua;">親
<span style="position:absolute; top:1em; background:yellow;">
<a href="b019.html">N6/N7で使用不能</a>
</span></span>
の、黄色部分がおかしい。
更新、おつかれさま。
http://cssbug.at.infoseek.co.jp/detail/winie/b166.html コメントがフロートの位置をずらす(6.0)
><div style="float:right; width:7em%; background:aqua;">
width:7em%; は width:55%; の誤記?
バグの出現条件として、
>>221にある「widthの合計が100%になること」を明記した方がいいのでは。
>したがって、バグは「コメントがフロートの位置をずらす」ではなくて、
>「コメントがフロート内の文字列を別の位置にも重複出現させる」といふところか。
>
>バグの再現性のポイントは、widthの合計が100%になること、clearした要素が次に置かれてないこと。
337 :
Name_Not_Found:04/08/10 10:11 ID:iUrIEOfh
>>307 私も Opera 7.51 で同様の症状があり、外部スタイルシートの冒頭に
@charset "UTF-8"; のように書くと、直後の設定が反映されませんでした。
対策としては
>>307 さんが指摘されているように、何かダミーを置くか、
あるいは下記のように本ページの方で、外部スタイルシートのリンクに
読み込み文字コードの設定をしておくしかないようですね。
<link rel="stylesheet" type="text/css" href="style.css" charset="utf-8”>
>>308 さんが問題ないのは、上記のことをやっているからじゃないですか?
338 :
337:04/08/10 10:19 ID:???
>>311 を読むの忘れてた。今日初めてここにきたのですいません。
結論としては、
(a) 外部スタイルシートに書く場合は文字コード設定の前には
いかなる文字(空行でもコメントでも)も入れてはならぬ
(b) 文字コード設定の前に何か書きたい場合は、本ページのリンクの
方で文字コードを指定する
ということですかね?
バグとはいえないかもしれないけど、「CSSバグ辞典」に載せてもらえると
うれしいですね。
>>338 バグではないですね。仕様書には、
it must appear at the very start of the document,
not preceded by any characters.
つまり、@charset の前にはいかなる文字もあってはならない
と書かれていますので、空行を書いている方が悪いかと。
まあ、バグ辞典の「バグでない」の項目に追加するのはいいと
思います。
UTF-8のBOMが先頭一文字として解釈されたことがあったな
再現はできんが
バカげた仕様は改定させるべき。
盲従していては何も変わらない
343 :
337:04/08/11 11:25 ID:???
プログラムなり HTML を書く人は、冒頭になにかしらのコメントを
付け加えるのが常識だし、それを読む人への礼儀ですよね。
その意味で CSS のこの仕様と、それに盲従している Opera の考えかたは
ちょっ理解できないな。
他の部分 (content とか) では重宝しているんですけど。
そういうことはW3Cにでもフィードバックしてくださいな。
冒頭に何かしらコメントが入っちゃうと、その文字コードがわからないまま読み続けなきゃならない
UTF-16 とかだと大変よ
346 :
345:04/08/11 12:44 ID:???
っていうか、文字コードが確定しないと、@charsetって書いてあっても
それがコメント内なのかコメント外なのかわかんないな。
(「/*」「*/」という文字列のバイト列表現も文字コードによって変わるため)
US-ASCIIで書かれた @charset という文字列は、UTF-16LEの 捀慨獲ᴩ
という文字列と同一のバイト列になったりするので、そう単純には処理できないし。
この仕様は、文字コードを早めに確定しないと (不明なら不明でよい)
処理が異常に複雑になってしまうためだろう。
W3Cにproposeしても受け入れられないと思われ。
俺もプログラマなんだが、@charsetの次の行からコメントを入れちゃダメなのか? >337
何行も書かなきゃならない訳でもないし、どうってことないと思うんだが……
#!/usr/local/bin/perlと同じようなもんだと思えばなんてことないけどな。
HTTPレスポンスヘッダに
Content-Type: text/css; charset=EUC-JP
とあれば、@charset "EUC-JP"; はなくてよい。@charset は
あくまで次善の策。
デフォルトでUTF-8として解釈して欲しい。
なんてわがままを言わせて。
350 :
337:04/08/11 22:11 ID:???
>>686 なるほど。私が浅はかでした。ごめんなさい。
>>343 >コメントを付け加えるのが常識
習慣といった方がよい。
@charsetの問題は定期的に現れるのだが、ここじゃなくて
別のスレでやって欲しいのが正直なところ。
明らかにバグではないのに、仕様の理解の浅い香具師に限って
UAのバグだと言いたがるのは何故だ? 自己正当化か。
無視すりゃいいでしょ。
無視してもゴミは減らない。
注意してもゴミが減るとは限らないが。
スルーしなければもっと構ってくれると思われる。
しかしスルーできない。
>>352 >@charsetの問題は定期的に現れるのだが
いや、ほんの二度ほどかと。そんな神経質になるものではない。
バグではないが、「仕様通り」としてバグ辞典に登録しておけばよかろ。
>>358 Safari1.2.2(最新版)で試してみたが、ダメだった。
361 :
359:04/08/15 23:44 ID:???
ごめん、最新版は1.2.3だった。(結局ダメだけど。)
>>364 標準でも互換でも。
但し互換モードの方がなぜかマージンを小さく取るが。
ならば
>>362に補記。
IE6互換モードでは、上マージンは指定した数値より小さく取られ、標準モードの約半分になる。
>>362のソースの上に何かブロック要素を置いてあると、
MozillaもIEと同じく右の通常要素だけ上マージン分下がった表示になる。
また、WinIEでも互換モードが標準モードより上マージンを少なく計算することが無くなる。
ブロック要素内の文字を下揃にしたいが……。
h2 {line-height:3em; border:1px solid #f00;}
h2 span {vertical-align:-3em;}/* vertical-align:-100%; でも一緒 */
<h2><span>123456</span></h2>
Netscape7.1 (意図通り)
┌───┐
│ │
│123456│
└───┘
IE6 (なぜか枠外に出る)
┌───┐
│ │
│ │
└───┘
123456
Opera7.5 (行の真ん中のまま)
┌───┐
│123456│
└───┘
<h2>0<span>123456</span>7</h2>
とすると、Operaでもvertical-alignが有効になった。
IEは問題外として、netscapeとoperaの違いは
spanの前後に匿名インラインボックスが存在すると
見なすかどうかの違いと思われ。
その辺、CSS2では既定されてなかった気がする
ので実装依存か?
とはいえ、vertical-alignの%指定は
CSS3のbaseline-shiftに相当する予定なので
将来的にはnetscapeの挙動が正しくなる予感。
最近のauの携帯ブラウザ(UP.Browser)はCSSに対応しています。
ttp://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html このバージョン6以降がCSS対応だと思う。
CSSはstyle要素でもstyle属性でも外部スタイルでもOKですが、
外部スタイルなどは media="handheld" や media="all" の時に
CSSを読み込みます。
携帯ブラウザはちょっと対象外かもしれませんが、一応バグ発見
ということで報告。
【UP.Browser/6.2 (EZWeb)】
media="handheld,screen" ならCSSを読み込むが、
media="screen,handheld" なら読み込まない。
media属性の先頭しか見ていないようです。
【UP.Browser/6.2 (EZWeb)】
text-indent を指定したブロックの一段落目が余分にインデントされる。
<div style="text-indent: 1em">
<div>
<p>テスト</p>
<p>テスト</p>
</div>
</div>
上記の一段落目は3emインデントされます。div > div > p の入れ子の数だけ
インデントが効くようです。二段落目以降は正常に1emインデントされます。
<div style="text-indent: 1em">
<div>
<div style="text-indent: 0">
<p>テスト</p>
<p>テスト</p>
</div>
</div>
</div>
上記の一段落目は2emインデントされます。入れ子の数だけ合計されて
いるようです。最初のdivが1em、次のdivが継承されて1em、次のdivが0、
次のpが継承されて0で、合計2emになるという計算みたいです。
やはり、二段落目以降は正しくインデント0になります。
>>371 に追加。
@import url(hoge.css) screen,handheld;
@media screen,handheld {
...
}
なども同様。先頭が handheld の時だけ効きます。
>>371 >外部スタイルなどは media="handheld" や media="all" の時に
>CSSを読み込みます。
media属性を記してない場合はどうなのか、気になりますね。
>>374 media属性がない場合も読み込みますね。
HTML4.01の仕様書には、media属性のデフォルトは
screenとありますが、デフォルトをallとみなしている
みたいです。style要素の場合も同様の動作です。
あと、
>>372 はもちろん、
p { text-indent: 1em }
とだけ指定して、div には一切 text-indent を指定しないように
すれば、入れ子にならないので問題なく動作します。
【MacIE5】フロート化したh1要素に続くdiv要素が回り込んで表示される
ttp://cssbug.at.infoseek.co.jp/detail/macie/b041.html の補足。
まず、h1に限らずdivやpをフロート化した場合でも発生します。
一般のフロートで発生するようです。
あと、直後がdivでなくても、
<h1 style="float:left; width:3em; margin:0;">H1<br>H1</h1>
<p>段落</p>
<div style="border:2px solid blue;">
ブロック<br>ブロック<br>ブロック</div>
これでも、このdivはフロートの幅分短くなって回り込みます。
発生条件は、フロートの横にテキストが回り込めるような位置に、
floatでもclearでもないdivが出てきたら、そのdivは先行のフロートの
幅分短くなってdiv全体が回り込んでしまう...です。
上記の例でh1要素を1行だけにすると、直後の段落1行が回り込んだ
時点で、もう次のテキストはフロートの横に回り込めません。この
状態でdivが出てきてもエラーは発生しません。
エラーが発生するのはdivだけというのはその通りのようですが、
フロート直後でなくても、間にフロートの高さより低いテキストが
あったとしても発生します。
IEオチター
380 :
Name_Not_Found:04/08/22 21:17 ID:FaP9s1VT
>>380 置換インラインは別。
CSS2.1/3のインラインブロックも。
a { margin-left : 3em; }
<a href="index.html">hoge</a>
このようなCSS.HTMLを書いたとき
実際に上のリンクを選択するとaタグにはさまれた文字列だけでなく
左のマージンの部分まで選択されてしまうのは仕様ですか?バグですか?
ただ単にa要素の左にスペースをとりたいのですが
マージンの部分まで選択されてしまい、困ってます。
385 :
sage:04/08/24 22:03 ID:SH9h20bf
387 :
Name_Not_Found:04/08/29 01:12 ID:yYecz1nx
DHTMLでWebサイトを作っています。
innerHTMLでタグをセットすると描画されますが
ループなどで沢山HTMLを生成すると
処理がむちゃくちゃ重くなります。
処理中に描画させないようにする方法はありますか?
最初に描画OFF、処理が全て終了したら描画ON
のようにすれば、処理がかなり早くなると思うのですが。
どうでしょうか?
よろしくお願いします。
>>387 2chには話題毎に「スレッド」っていうものがあってね、それzwsぇrfvgbんふjみk、
その1
<p style="display:block;width:200px;">
ああああああああああああああああああああああああああああああああああ
</p>
その2
<p style="display:block;width:200px;">
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
</p>
OSは Win98SE
その1では IE6/Opera7.5/Firefox0.93 全て幅200で収まるんですが
その2は IE6:幅200で収まる Opera7.5/Firefox0.93:改行されず親要素(div)からはみだす
こうなるのには 何か理由があるんでしょうか?
(掲示板等のスクリプトで使う予定なので、同じようなことがあると怖くて)
ご存知の方 よろしくお願いします
390 :
389:04/08/29 06:04 ID:???
【補足】 display:block はいらんですね(汗
393 :
389:04/08/29 08:12 ID:???
バグか仕様か判別しかねるのがあるんだが・・・
とりあえずソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head><title>?</title>
<style type="text/css">
div {
background-color:#999;
margin-top: 0;
margin-bottom: 0;
padding:0 1em;
border:1px solid red;
}
p {
border: 1px solid blue;
}
</style>
</head><body>
<div>
<p>test</p>
<p>test</p>
</div>
<div>
<p>test test</p>
<p>test test</p>
</div>
</body></html>
上のソースでFireFox0.8とIE6を見ると2つのdivはくっついてるわけだけど
10.6 高さ及びマージンの計算 10.6.3 通常のフローにあるブロックレベル非置換要素及び浮動非置換要素
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q17 に依ればdivの高さに子の1つ目のP要素の上マージン・2つ目のP要素の下マージンは含まれないはずなので
まずこの時点でバグと思われる(Opera7.51だと2つ目のPの下マージンだけは含まれていない)
次にdivに対する border:1px solid red; をコメントアウトすると、divの高さは1つめのPの上境界から2つめのPの下境界までとなり、正しい高さになる
しかしdiv同士が離れるようになる(FireFox、IE、Opera全て同じレンダリング)
ここでPに margin:0 するとdivがくっ付くんだけど、これは仕様のどこかに書いてましたっけ?
なんとなくborderの有無によってdivの上下padding領域に背景色が表示されないように見えますけど
↑に出した仕様によればdivの高さにdivの上下paddingは含まれないようですけども
う、ややこしいですけどdivに上下paddingを与えると、divのborder無しでも、div同士くっ付きますが
divの高さに上下paddingが含まれてるようです・・・
ですからバグリストサイトの
>補足
>制作者や閲覧者がスタイルシートを用いて指定したマージンは正しく設置されます。
の方がバグだと思われるんですけど・・・
>>394-398 支離滅裂、頭悪すぎ、仕様書わかってない。
都合のよい脳内仕様を勝手に捏ち上げるな。
以降からだれも相手にしなくて無視でよし。
とりあえず
>>394のソースでborderの有無だけで背景色の表示場所が変わるのは本当なんですけど
>400
border,paddingをはさんでmarginは相殺しない
自分のborderか、親兄弟子孫のborderかも関係ない
以上
だからそう言うのは質問スレ行けって
[1-82]背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)
なんですが、フロート以外の原因で文字が消えることがありました。
原因は特定できなかったんですが、同様にwidth指定で解決しました。一応報告。
405 :
Neo:04/09/04 16:35 ID:???
これは既出でしょうか?
WinXP・IE6で、左のパディングを設定したDIVタグで、
左のマージンを設定したULタグを囲むと、
その下にある同じスタイルのDIVタグのパディングがズレました。
ULタグを使わないとズレませんが、使っていると2、3pxズレます。
よく分からない方の為にタグを載せておきます。
HEAD部分
<STYLE type="text/css"><!--
UL{margin-left:20px;margin-top:0px;margin-bottom:0px;}
.a{padding:5px;border:1px solid #000000;}
.b{padding:5px;border-width:0px 1px 0px 1px;border-style:solid;border-color:#0000FF;}
--></STYLE>
BODY部分
<DIV class="a">何か</DIV>
<DIV class="b"><UL><LI>何か<LI>何か</UL></DIV>
<DIV class="a">何か</DIV>
<DIV class="b"><UL><LI>何か<LI>何か</UL></DIV>
<DIV class="a">何か</DIV>
<DIV class="b"><UL><LI>何か<LI>何か</UL></DIV>
こうすると、2回目、3回目のDIVがズレていきます。
対処法がありましたらお願いします。
>>405 超有名。ulに限らない。
下ボーダーとか下パディングを付けると解消する事もある
・・・つーか、対処法の質問は質問スレ
407 :
Neo:04/09/04 23:55 ID:???
>>406 有名でしたか…すいません。
下パディングかボーダーですね。ありがとうございます。
408 :
Name_Not_Found:04/09/06 02:00 ID:T17BLCY2
なんつーか偉そうなこと言ってるやつがどんなすばらしいサイトを作ってるのか知りたくてたまらんね。
409 :
Name_Not_Found:04/09/06 02:13 ID:CBPGVEN1
【祭りのヨカーン】詐欺行為の悪質サイト潰し★3
http://news13.2ch.net/test/read.cgi/news/1094395950/l50 このスレのトップにあるURLを踏むと
>登録しますた。
>15000円の使用料を払ってください。
>個人情報を取得しましたので支払いが無い場合催促しに行きます等の文章とともに銀行の口座番号が表示されます。
これは俗にワンクリック登録などという詐欺行為で金を稼ぐ架空請求です。
今ニュー速板住人が田代砲で爆撃中。落ちたかと思えば復活する難攻不落のサイトとのこと。
協力求む「弾幕薄いぞ何やってんの!!」
410 :
Neo:04/09/08 18:25 ID:???
>>405-407 の、左パディングがズレるバグについて詳しく書いてあるページを知りませんか?
どうしたら起こるのか、等を詳しく知りたいので。
411 :
Name_Not_Found:04/09/08 21:59 ID:wkNC7i0u
WinXP/IE6なんですが、
中にimg要素が入っているdt/dd/li要素のpadding-bottomの数値が
3ピクセルほど底上げされる、というのはバグでしょうか?
以下ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>title</title>
<style type="text/css">
<!--
dt{
padding-bottom: 0; /* 0を指定してるのに間が空く */
border: solid 1px #000;
}
dd{border: solid 1px #000; }
-->
</style>
</head>
<body>
<dl>
<dt><img src="xxx" width="64" height="64" border="0" alt="xxx"></dt>
<dd>DD</dd>
<dd>DD</dd>
</dl>
</body></html>
</dt>と<dd>の間を詰める(改行やスペースを挟まない)か、
img{ display: block; } を入れると解決するのですが…
だからそう言うのは質問スレ行けって
>>411 imgがvertical-align:baselineだから
ではなくて?
ボックスのwidth が %指定されている時、overflow:auto;が効かず
内容物に合わせてボックスが拡大される
IE6標準モードのみで互換モードだと問題ない。
既出?
417 :
414:04/09/11 10:39:38 ID:???
>>411,415
display:blockで隙間が消えるということなので、
ベースラインの問題ではないのか?と思っただけだったんだが、
今試してみた。vertical-alignを bottomとかに変えれば
隙間は開かなくなった。したがって、415の言うとおり既出。
> </dt>と<dd>の間を詰める(改行やスペースを挟まない)か、
この現象がバグだな。
419 :
Name_Not_Found:04/09/13 04:39:22 ID:3FVO9JPA
Safari関連未確認バグ確認報告
確認にはSafari 1.2.3(v125.9)を使用。
バグ007:ファイル名にアンダーバーを含む外部スタイルシートを読み込まない
正常に読み込んでます。
バグ010:使用されるはずのないフォントで文字列が表示される
指定通りのフォントで表示されています。
バグ014:フロートが先行要素の下辺より上に置かれる
入力ボックスは重ならず表示されています。
バグ015:html要素に指定されたtransparent背景の扱いが不正
マージン領域は灰色で塗りつぶされません。
バグ016:擬似クラスで文字列の一部分の前景色が変わらない
下線以下の部分も赤く表示されます。
バグ017:一部のボーダーはcolorの値を引き継がない
確かに引き継ぎません。
バグ018:固定レイアウト表で%値指定の列幅が100%を超えられない
超えられませんでした。
バグ019:インラインフレームをwindow.nameで正しく参照できない
正しく参照できました。
バグ020:font-familyを指定した文字のボールドが文字化け
文字化けしませんでした。
バグ021:擬似要素の文字列を拡大縮小できない
拡大縮小できず。
バグ022:z-indexを負の数にしたリンクを選択できない
選択できませんでした。
バグ023:ブロック要素を含むインライン要素の右ボーダーが表示されない
確かに右ボーダー表示されず。
以上、12項目とりあえず報告させて頂きます。バグ011に関してはのちほど。。。。
>>419 こちらもSafari 1.2.3(v125.9)で確認。
バグ015:html要素に指定されたtransparent背景の扱いが不正
例示だと背景色が薄くて分かりにくいが、発生している。
バグ016:擬似クラスで文字列の一部分の前景色が変わらない
1.2.2からはTimes New Romanで発生しなくなった。
ヒラギノ系では相変わらず発生する。
追記。
>>411のソースは互換モードだが、それだとディセンダが確保される(vertical-align:baseline;)わけだ。
しかし、むしろ逆に標準準拠モードでこそディセンダが確保されるべきではあるまいか。
423 :
419:04/09/13 15:41:23 ID:???
>>420 訂正、補足どうもです。
俺、目が悪いのか........orz
426 :
419:04/09/14 02:29:29 ID:???
Safari関連未確認バグ確認報告
確認にはSafari 1.2.3(v125.9)を使用。
バグ011:一部のフォントでボールド表示ができない
ボールド表示できないフォントあり。
日本語の部分がボールドになるフォント
"Hiragino Kaku Gothic Pro"(ヒラギノ角ゴ Pro)
"Hiragino Mincho Pro"(ヒラギノ明朝 Pro)
"Kozuka Gothic Std"(小塚ゴシック Std)
"Kozuka Mincho Std"(小塚明朝 Std)
"Lucida Grande" ※何故かヒラギノ角ゴ Proに置換されてボールド表示。
"Lucida Grande"を除いては、ウェイトが違う日本語書体が2つ以上あるのが共通点。
Safari向けにCSSでボールド表示させたいのであれば、OS標準の"Hiragino Kaku Gothic Pro"を
フォントファミリーで指定しておくのがベターかと。(重さのW3などを補完すると無視される)
以下どうでもいい私見。
UAのウェイト算出アルゴリズムの邦訳を読んでみたが、バグとは言えない様な気がした。
従来のIEやNNなどがボールド書体の無いフォントを擬似的にボールド表示しているだけのような。
違ってたら........orzということで。
既出だったらスマンがバグがあったので報告。
ブラウザ:Opera 7.53 プロパティ:display 値:compact
●内容
display: compact;を指定している要素がa要素を含んで、かつa要素で終わっているとき、
そのa要素のtext-decorationの値がその後の要素に継承される。
●サンプル
a:link, a:visited { color: #0000ff; text-decoration: underline; }
a:hover, a:active { color: #ff0000; text-decoration: line-through; }
<dt style="display: compact;"><a href="#">hogehoge</a></dt>
<dd>hogehoge</dd>
<dt style="display: compact;"><a href="#">hoge</a> </dt>
<dd>hoge</dd>
<dt style="display: compact;"><a href="#">hoge</a></dt>
<dd>hoge</dd>
<dt>hogehoge</dt>
<dd>hoge</dd>
428 :
427:04/09/18 23:58:03 ID:???
スマン、書き忘れていた。
コンパクト化されていない場合はtext-decorationの値は継承されない(正常に動作する)。
429 :
419:04/09/22 15:28:40 ID:???
>>426に追記。
Macの他のブラウザ用にヒラギノを指定したい場合は"ヒラギノ角ゴ Pro W3"を併記すること。
【IE6】
text-indentプロパティーはブロックレベル要素にしか適用されないはずだが、
インライン要素にも有効になる。
例)
<label style="text-indent:3em;">メール・アドレス<input name="mail" value=""></label>
[ IE6 ]
ブロック要素内のwidth値を持つtextareaに文字を入力するとtextareaの幅が増加する
[ ソース ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head><title>textarea が伸びる</title>
<style type="text/css">
textarea { width: 60%; }
div {
margin-left: 10em;
border: 1px solid black;
}
</style>
</head><body>
<form action="#">
<div><textarea name="test" rows="5" cols="30"></textarea></div>
</form>
</body></html>
[ 症状 ]
- 増加する幅はどうやら親ブロック(この場合はdiv)の左右マージンの値に比例する
- 左右マージンが0でも数ピクセル増加する
[回避法]
1. textareaにwidthを指定しない
または
2. 親ブロック要素にwidthを与える(auto以外)
>>430 >この例ではNN6よりもIEの方が文法に整合的な解釈をしてると見えるが、どうか。
NN6 といっても初期バージョンのバグだらけのやつだけ。
いわゆるM18(rv:0.6よりも前)の時代の懐かしい遺物やね。
NN6.2.3 ではこのバグは直っていて、正しく解析されたよ。
>>433 >>432はたしかに既出だが、下記2点は新しい情報だから、追加していいのでは。
>[ 症状 ]- 左右マージンが0でも数ピクセル増加する
>[回避法]2. 親ブロック要素にwidthを与える(auto以外)
436 :
436:04/09/28 17:47:26 ID:SSMoZGh6
既出だったらすまないのですがバグがあったので報告します。
ブラウザ:Opera 7.53
option要素に:after { content:"???〜" ;}を指定するとそこから読み込めなくなる
.new:afterを.new:beforeに変えればただ指定が無視されて最後まで表示される
[サンプル]
option { color:black ; background-color:white ;}
optgroup { color:white ; background-color:black ; font-style:normal ;}
option:before { content:"┣" ;}
.new:after { content:"NEW! " !important ; text-decoration:blink ; color:red !important ;}
.in-opg-last:before { content:"┗" ;}
<select><optgroup label="○○○">
<option class="in-opg-last">×××</option>
</optgroup><optgroup label="▼▼▼">
<option>○○○</option>
<option class="in-opg-last">↑↑↑</option>
</optgroup><optgroup label="□□□">
<option>→→→</option>
<option class="new">⇒⇒⇒</option>
<option class="in-opg-last new">μμμ</option>
</optgroup></select>
Gecko系 だったら正しく表示される
(contentの部分に画像を追加してもちゃんと表示される)
438 :
Name_Not_Found:04/10/09 20:28:24 ID:NRxty9l0
紛らわしいんで、CSSでは、「インライン表示」「ブロック表示」などに統一しようじゃないか。
で、インライン表示の中にブロック表示があって何が悪いんだ?
インラインレベル要素の中にブロックレベル要素があるわけじゃないだろ。
>>438 そもそも、SPAN 要素型の内容モデルに P 要素型はない。
>>440 だから「インライン要素内にブロックレベル要素を置く文法違反を犯す」と
>>438にも書いてある。
HTML のどこに、ブロックレベル要素はブロック表示しなければならない、
なんて書いてありますか?
人の目には見えなくても、内容にブロックレベル要素をもっていて、
正しい HTML としてパースされた以上、そのins要素はブロックレベル要素ですよ。
>>440 ではその呼称を使って言ってみようか。
その位置ではブロックレベル要素であり「ブロック表示」すべきinsやdelを
デフォルトで「インライン表示」するから具合が悪い、と言ってるのだ。
わかった?
>>443 デフォルトで表示しなければならないの?それはおまえの脳内仕様だろ。
>>445 いや、それはCSSの仕様書だろ。つまり、CSSの仕様書の中で、ブロック要素とは、
表示がブロックという意味で使います、っていう意味なのよ。
で、おれが言ってるのは、
その通りの言葉を使うと、マークアップでいうブロック要素と勘違いするアフォが続出するから、
敢えて、何々表示に統一しましょうよ、ってこと。
>>448 だから?それがMUST?SHOULDにもならんだろ。
>>450 苦しくなってないんだが。。。
そこに、「デフォでは」なんて前置きがあるのか?
そういうマークアップな部分と、整形の部分では、書き方のでしゃばり具合が違ってるだろ。
>>452 448には書いてあって、450には書いていない。
デフォでは、というのは、
「ちょっと話がそれますが、整形にも口を挟ませていただきますと」
ということだ。
>>453 根拠も示さずに、自分に都合好く解釈をひんまげてはいけませんな。
それに「デフォルトでは」とついたからって、譲歩にもならぬ。
そもそも、
>>443-444は正に「デフォルト」でどうあるべきかを問題にしてたのだし。
頭に「○○では」とついた所で、仕様書の文が
単なる事実の記述でなく規定であることは揺るがない。
>>455
>>456 分かってるよ。
#つうか、恥ずかしいから、しょうもないこと指摘するなよ。
ins del がブロック表示されないことは棚上げしておく方が賢明だと思われるが。
バグと断定する拠所が無いだろ。
挙句の果てには、HTML仕様書の整形に言及した部分が根拠です、はちょっと説得力に欠けるだろ。
>>458 調子に乗るなよ、アフォガキ。止めてえんだよ。問題にする所が違ってるんだよ。
むしろ、問題は、インライン表示の中のブロック表示、なんだよ。
これこそ、W3CがCSS2でも棚上げしてて、拠所が無いんだよ。
それをああだこうだとバグ認定してるのは何なんだろう、って進めたいわけ。
461 :
459:04/10/10 01:16:31 ID:???
言葉が過ぎた。謝る。
By default, block-level elements are formatted differently than
inline elements. Generally, block-level elements begin on new lines,
inline elements do not.
つまり、1997年当時の現状報告に過ぎないわけだ。
HTMLでいうブロック要素とインライン要素を直感的に示すための。
↑「つまり」……?
WinIE4は
<div class="honbun main">
みたいな複数クラスを認識しないが、
<div class="honbun ">
てな風に、class名の後に半角スペースを空けるだけでも
そのクラスが無効になるね。
IE6ではスペースの有無に関係なく、認識する。
468 :
Name_Not_Found:04/10/14 10:35:53 ID:PQRFWLCE
>>472 バグという見方もあるが、独自仕様として hasLayout というものがあるわけで。
hasLayout になってるんだから、その子div に overflow:hidden しとけと言われるだろうよ。
nn4 における hidden、visible、inherit の実装を思い出せ、って知らないか。
スレ違いだが、そういうことしたいなら、目印用のhiddenなdivを動かして、
それを scrollIntoView すれば?
>>474 MacIE5.2.3で確認したが、確かに読み込まれている。
477 :
475:04/10/19 23:17:02 ID:???
>>476 @importでは読み込まれない。
それから色々試してみたけど、以下全て読み込まれる。
どうやらアルファベット以外の文字は全て区切りとして認識されるらしい。
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen@print">
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen:print">
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen;print">
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screenあprint">
【IE5.5】
一旦 white-space: nowrap を指定すると詳細度を上げても取り消せない。
p { white-space: nowrap }
p.a { white-space: normal }
<div style="width: 5em">
<p class="a">ああああああああ</p>
<p style="white-space: normal">ああああああああ</p>
</div>
どちらも normal の方が効くはずですが、結果はどちらも改行されなく
なってしまいます。
なお、このバグは IE6 では発生しません。IE5.0 以前は確かめていません。
>>478 p.a {white-space:normal !important;}
としても、上書き不能ですか?
はじめまして。
<fieldset style="width:200; height:200;"></fieldset>
<fieldset style="width:200; height:200;"></fieldset>
これだけなんですけど、WindowsXPで、Firefox0.9.3、Opera7.53では縦並び、IE6.0で横並びになります。
IE6.0でも、2行の間に<br clear="all">を入れると縦にできるっぽい。
一応見たつもりだけど既出だったらごめんなさいです。既出じゃなかったら、
どうしてなのかの理屈(あれば)と、CSSによる回避方法を教えてください。
>>479 遅くなりました。確認してみましたが、やはり上書き不能です。
>>483 WinIEではfieldsetがインライン要素になってしまってるってこと?
width指定は関係あるの?
>>484は
>>480のリンク先を見なさい。
WinIE5.5ではwhite-spaceプロパティーはnowrap値のみの実装、
normal値は未実装なのです。
WinIE6からnormal,pre,nowrapを全て実装した。
>>483 > width:200; height:200;
誤った記述です。px単位ならpxとつけませう。IEは勝手に理解してくれるだけだから。
487 :
483:04/10/30 11:35:47 ID:???
>>485 ,
>>486 pxの件は完全にミスです。すみませんでした。
インライン…そんな感じです(すみませんが、私には明言できません。)
fieldset に display:block を追加設定したら同じ表示になりました。
safari(1.2.3)で overflow:scroll がブラウザの文字拡大縮小についていかないね。
文字を拡大して左側にあふれて見えなくなった部分があると、文字を小さく戻しても切れたままになる。縦はたしかめてない。
【MacIE5.2.3】
q要素の引用符にtext-alignが効かない。
引用符にだけtext-alignが効かず、本来の位置に残ってしまう。
http://pc5.2ch.net/test/read.cgi/hp/1098720757/247- 247 :Name_Not_Found :04/11/05 01:32:49 ID:CixkDgLt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>テスト</title><style type="text/css"><!--
p{ float:left; width:200px; border:1px solid #ccc; }
table{ width:200px; border:1px solid #000; }
--></style></head><body><h1>テスト</h1><p>test paragraph</p>
<table><tr><th>name</th><th>sex</th></tr><tr><td>tetu</td><td>men</td></tr></table>
</body></html>
p要素に与えられたfloat:left;で後続のtable要素が回り込むのはバグですよね?
NN7/IE6の標準準拠モード・後方互換モード共に回り込みます。
253 :Name_Not_Found :04/11/05 03:20:08 ID:???
display: block だと回り込まない。
display: table だと回り込む。
ようだ手元のFirefox0.8およびOpera7.2
254 :Name_Not_Found :04/11/05 05:08:02 ID:???
>>253 table要素はブロックレベルじゃなかったか?
テーブルレベルなんて存在しないだろ。
やはり実装が間違いでしょ。
CSS でブロックレベル要素と言えば、ブロック表示のこと。
紛らわしいから、ブロック表示、テーブル表示、テーブル行表示、などの言葉を使え。
>>490 CSS 2.1 嫁
つうか、せめて全読したことある奴だけが議論しようや。
そんな奴は殆どいないから、過疎スレ化するだろうが、
まともな議論になるならそれも構わないのでは。
>>491-492 おまいCSSスレでも一人で文句をたれてるよね?
荒れるような発言はよそうな。
自分が正しいと思うなら、相手にわかるように説明してやれよ。
面倒ならスルーしとけ。
>>491 なんだその造語・・・・お前だけだろそれで意味が通じるのは。
>>492 そもそも自分の意見すらまともにいえないお前と
>まともな議論
できるやつはいないだろ。
>>496 そこのどこがテーブルがインライン要素と同じ挙動する根拠になるんだ?
displayに何も指定されていないtable要素はデフォルトがinline-tableなのか?
デフォルトはtableになるんじゃないのか?(displayの値の話)
まあそれにしても
>>490 >NN7/IE6の標準準拠モード・後方互換モード共に回り込みます。
これらのUAがCSS2を実装してるのか、CSS1を実装してるのか中途半端というか
部分的に1だったり2だったりする時点でバグなんじゃねえか?
CSS1ならテーブル要素のデフォルトはblockなわけだし。
【IE6】
<div style="margin-left:25%">
<p>ああああ</p>
<p style="float:left; width:5em">いいいい</p>
<p>うううう</p>
</div>
「ああああ」と「いいいい」の縦のラインが揃わない。
div のマージンがない場合は揃う。
【IE6標準/互換】
ulにwidthを指定すると、リストマーカーが消える。
マーカーを出すにはli要素に、
list-style-position:inside;を指定するか
左マージンを取るか(パディングでは駄目)
text-alignをleft以外の値を設定するか
しなければならない。
http://pc5.2ch.net/test/read.cgi/hp/1098720757/353- <ul style="width:50%;">
<li>特に指定無し ×</li>
<li style="list-style-position:outside;">list-style-position:outside;×</li>
<li style="list-style-position:inside;">list-style-position:inside;○</li>
<li style="padding-left:1.5em;">padding-left:1.5em;×</li>
<li style="margin-left:1.5em;">margin-left:1.5em;○</li>
<li style="text-align:center;">text-align:center;○</li>
</ul>
>>500のバグ回避策に追記。
ulにpadding-leftを指定しても、リストマーカーが消えなくなる。
何だこのスレ
こんなスレが必要なのか・・・・・
ほんとCSSってゴミだな
よくもまあこんなくだらないものを世に出したな
本当アフォの塊だなあいつら
なにがアフォって仕様書の不明瞭・あいまい・姿勢の中途半端さ。
そもそも勧告として出して後はベンダのみなさんよろしく〜でいいのかよ。
「私たちはブラウザ作ってないので悪いのはベンダのみなさんですよ〜」
っていう逃げ道を確保してる時点で・・・・・
>「私たちはブラウザ作ってないので
AmayaのCSS実装ってどうなってるの?
>>505 真面目にそう思ってるなら、
W3Cの仕様策定プロセスを調べてみるといい
ただの煽りなら別にいいや
釣りだ煽りだいうのはいいが、
それを真に受けてしまう第三者がいる以上
「釣れた釣れた」と言われても反論せざるを得ない。
>「釣れた釣れた」と言われても反論せざるを得ない。
ハァ?
【IE6】
下記ソースでなぜかdivの方は折り返しがされない(marginをなくすと折り返される)。
<html>
<head>
<title>テスト</title>
<style>
.i {display:inline; white-space:nowrap; margin:1px}
</style>
</head>
<body>
<div>
<span class="i">ああああああああああ</span>
<span class="i">いいいいいいいいいい</span>
<span class="i">うううううううううう</span>
<span class="i">ええええええええええ</span>
<span class="i">おおおおおおおおおお</span>
</div>
<div>
<div class="i">ああああああああああ</div>
<div class="i">いいいいいいいいいい</div>
<div class="i">うううううううううう</div>
<div class="i">ええええええええええ</div>
<div class="i">おおおおおおおおおお</div>
</div>
</body>
</html>
>>510 IEはブロック要素の前後の空白を無視するようで。
spanの方も改行せずに並べれば折り返されなくなるね。
>>496 邦訳の存在に関わらず、エラッタを反映している方(2.1)を基準にしなければならない。
このスレは 2.1 を基準に議論してない人ばかりだから、日毎に疑わしい内容になっていく。
何度も言うが、モジラもオペラも 2.1 を仕様書と扱っているし、
2.1 以前は、2.0 + エラッタ を仕様書としていた。何で、2.0 邦訳が基準なんだろうか。
>>497 もう CSS 仕様書内でブロック要素といえばブロック表示のことだと憶えたか?
ぼうや自身が 9 章の最初の方に明示してあるのに気付いて恥かいたもんな。
もし全員が用語の意味を憶えているのなら、ブロック要素で構わないが、そうではないだろう。
>>513 CSS2.0 は Recommendation で、CSS2.1 は Candidate Recommendation
の段階だから、まだ、必ず 2.1 を基準にしなきゃならんという段階にはなって
ないと思うが...。2.0 だけを見てたんじゃダメだというのはその通りだが。
>>513 勝手に「ブロック表示」なんて言葉を造っても誰もついてこないのがまだわからない?
>>513 >何で、2.0 邦訳が基準なんだろうか。
「2.1の邦訳もあった方がいいな」(
>>496)を、邦訳のある方を基準にしろと取る阿呆。
>>516 その程度の国語力で仕様書まともに読めるんだろうか
http://www.w3.org/Style/CSS/ からの引用
> Specs, 1, 2.1, 3
2.1 がここに追加されて既に一年以上経過。
引用の通り、最近では、勧告者自ら 2.0 を無視している。
このスレはメンテされない邦訳をいつまで頼りにし続けるのだろうか。
IE はともかく、オペラとモジラとサファリは 2.1 基準に話さないと無意味。
516 :Name_Not_Found :04/11/16 15:31:41 ID:???
>>513 >何で、2.0 邦訳が基準なんだろうか。
「2.1の邦訳もあった方がいいな」(
>>496)を、邦訳のある方を基準にしろと取る阿呆。
Bug Report - Latest reports
http://www.quirksmode.org/bugreports/ > The Bug Report system is entirely dedicated to finding,
> mending and publishing CSS and JavaScript browser bugs.
ということでCSS/JavaScriptのバグを羅列しているとこ。
Safari1.2.4
:beforeの生成内容が空のときに、:first-letterへの指定が無視される。
h1:before{content""}
h1:first-letter{font-size:200%}
<h1>hoge</h1>
対処法
display:noneを同時に指定する。
h1:before{content""; display:none}
h1:first-letter{font-size:200%}
<h1>hoge</h1>
http://pc5.2ch.net/test/read.cgi/hp/1101827958/52-54 WinIE6
<div id="BOX1">
<p style="border:1px solid #000; float:left;width:1.5em; margin:0;">▲</p>
<p style="border:1px solid #000; float:left;width:1.5em; margin:0;">△</p>
</div>
<div style="clear:both; border:1px solid #000; padding:1em;" id="BOX2">■</div>
#BOX2のpadding-topがなぜか2倍になる。
二番目のp要素へのfloat指定を削ると、上パディングも指定値通りに表示される。
また、#BOX2をdivでなくp要素にするとこのバグは起きなくなるが、
その場合もBOX1内のpの前に入れた全角スペースを削ると、やはりバグが再現する。
528 :
Name_Not_Found:04/12/04 01:23:07 ID:3FvhMveg
Firefox Win98SE
<style>
h1:first-letter{
font-size : 170%;
}
</style>
<h1><a href="#">TEST</a></h1>
リンクをアクティブにするとfirst-letterの効果が切れる。
>>529 それのどこでリンク疑似クラスとの関係を述べてる?
Safari1.2.4
bodyの最初の子要素を絶対配置にすると、bodyの先頭に空間ができる。
p{position:absolute; top:0; left:0;}
<body>
<p>hoge</p>
<h1>HOGE</h1>
</body>
pは絶対配置なので通常の流し込みから取り除かれ、h1がbodyの先頭にくるはずだが謎の空間が生まれてh1が先頭までこない。
bodyのpadding-topやh1のmargin-topを0にしてもこの空間は消えない。
532 :
531:04/12/04 14:48:43 ID:???
>>531に追加
絶対配置だけでなくフロートを指定した場合も発生する。
Firefox1.0(Windows)で、text-indentを指定した段落要素に
floatを指定した画像を文の最初に入れると、
段落の一行目が表示された後の部分に画像が表示されます。
私が何か間違っているのでしょうか。
ソース例--------------------------------------------
<p style="text-indent:1em;">
<img style="float:right;" src="a.png" width="60" height="40" alt="">
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
</p>
表示例----------------------------------------------
本文本文本文本文
本文本文本文┌―┐
本文本文本文│画│
本文本文本文└─┘
本文本文本文本文
こう表示させたい------------------------------------------
本文本文本┌―┐
文本文本文本│画│
文本文本文本└─┘
文本文本文本文本文
本文本文本文本文
>>533 質問なのかバグ報告なのか?
そのソースを
<p style="text-indent:1em;"><img style="float:right;" src="a.png" width="60" height="40" alt="">
本文本文本文本文本文本文本文本文本文本文本文本文本文本文……
</p>
として、ソース上の<img>タグの前での改行を無くすと、
画像の上辺は本文一行目の上辺と揃ってくれる代り、なぜかtext-indentの指定が無効になるな。
Netscape7.1で確認。
HTMLの仕様なのかfoxの仕様なのかわからず、書き込みの趣旨が
曖昧になってしまいました。すいません。
HTMLおよびCSSの仕様上、段落内にフロートする画像が
存在しても仕様に反しないのか、ということが気になりまして。
Mozilla系統は比較的HTML等の仕様に準じているので、
私とFfのどちらが間違えているのか、判らなかった次第です。
Ff1.0でも場合によってtext-indentが無効になるのは確認できていたのですが、
ソースでの改行によってどちらかが生じるようですね。
Netscape7.1でも、ということはFfと共通の根幹部分が問題なのでしょうかね。
>>533 そもそも、全てのブラウザにおいて、
<p><float>..........
<p>.......<float>...
のレンダリングが同一にならないというCSSのバグがある。
text-indent がある時に、開始タグ直後の改行が無視されないという
HTMLのバグが存在するのでは、そしてそれは上記 CSS のバグと関連がありそう、
ということか? >533
>>536 >そもそも、全てのブラウザにおいて、
え、そんなバグ、登録か報告かされてたっけ?
されてなかったら、詳しい報告をどうかよろしく。
text-indent指定時における開始タグ直後の改行による挙動の変化、でまず1要因。
そして、行頭画像のフロートによるインデントの挙動、でもう1要因。ですかね。
Ffにおいてtext-indent指定をした要素の開始タグ直後に改行が入ったとき、
その改行を無視せず、改行が1個だけのとき1byte空白1文字としてレンダリング
するルールによって、行頭の画像の前に1byte文字が1文字入ることになり、
結果としてfloat画像は1行目の下にレンダリングされる、と。
これはIE6もFf1.0も同様のようです。
そして次に、Ff1.0では行頭画像がフロートしたとき、text-indentが画像に続く
本文に対して有効にはならない、と。
うーん。
>>537 ここを追っかけているわけではないが、されてないだろう。
www-style や bugzilla.mozilla.org を追っかけているわけではないが、今までに目にしたことはない。
しかし、CSS2 登場時から現在の CSS2.1 に到るまで 9.5 に、
> Formatting would have been exactly the same if the document had been:
> <BODY>
> <P>Some sample text
> <IMG src=img.png alt="This image will illustrate floats">
> that has no other...
> </BODY>
> because the content to the left of the float is displaced by the float and reflowed down its right side.
とはっきり示され続けている。
このバグが修正されたら、M17以前の clip:rect() 級の大混乱になりそうな気がする。
例えば、
<p><a href...>aaa bbb ccc <img alt="(Go)" class="go" ...></a>. ddd eee fff ...</p>
みたいな画像を P 要素がつくるブロックボックス内の右上に配置したい時、
<p><a href...><img alt="(Go)" class="go" ...> aaa bbb ccc</a>. ddd eee fff ...</p>
のようにマークアップそのものを変更して、.go { float: right; } するだろう。
しかし、そもそも、CSS 仕様書はこうしたマークアップ変更を求めていないのだ。
どちらも同じレイアウトにならなければならないのだから。
>>539 がよく分かる例示が仕様書にある。
http://www.w3.org/TR/2004/CR-CSS21-20040225/images/float2p.png に書いてある字を読むと、here(X) という部分があり、
float 画像は、HTML ソースで X 辺りにあったと仮定してある。
X を <img> で置換して、HTML ソースは次のようになるだろう。
<p>Some sample text in the first paragraph. It has a floating
image that was right about here(<img alt="" src="">) in the source.
However, the image is so large that it extends below the text of this paragraph.</p>
<p>The second paragraph is therefore also affected.
Any inline boxes in it are "pushed aside," as they are forbidden from
coming inside the area delimited by the floating image's margins.
Note that the paragraph boxes are still rectangular, but their
borders and backgrounds are "clipped" or interrupted by the floating image.</p>
>>540 の続き。
2行目に here(<img>) が配置されるようサイズを工夫して、CSS は次のようになるだろう。
p {
font-family: monospace;/* サイズを決め易いようにするだけ */
line-height: 2;
margin: 2em .5em;
border: solid .125em #e06;
padding: .125em .5em;
width: 40em;
}
img {
margin: 1em;
float: left;
width: 10em;
height: 16em;
/*color: inherit;*/
background-color: #ddd;
}
どのブラウザも、3行目に画像が配置される(はず)。
仕様書が例示しているレイアウトとは異なる。バグ。
>>533 を検証するに当たって、このバグを既知としておくべきだと思ったのが
>>536 。
外部CSSで段落の擬似要素first-lineに対してもtext-indentを
かけると、Ff1.0、IE6の双方で、私の意図した本文レイアウトに
なりました。
------------------------------------------
p {text-indent:1em;}
p:first-line {text-indent:1em;}
------------------------------------------
段落要素内の「最初の文字(first-letter)」(それが画像でも)がフロートすると
インデント適用の解釈がブラウザにより異なってしまうようですね。
しかし「最初の行」に対しても指定をすれば、その解釈に関係なく無事本文にも
インデントが適用されますね。しかも上書きの作用なのか二重適用にはなりません。
ガイシュツでしたらすみません。
Windows2000でIE6を使っているときの現象で、ちょっと不思議な事が起こったので報告したいと思いました。
下記のようにしたとき、リンクのTESTがホバー状態になったら、赤枠下部分と黒枠の間に、青枠のマージンで指定したピクセル分の隙間が空きます。
a:hoverのbackground-colorを外したり、赤枠のbackground-colorを外したり、黒枠のwidthを外すとこの現象は起こらなくなります。
これはIEのバグでしょうか?それとも、記述に不具合がありますでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
<!--
a:hover{ background-color:#ffcccc; }
-->
</style>
</head>
<body>
<div style="width:300px; border:1px solid #000000;">
<div style="background-color:#FFFFFF; border:1px solid #ff0000;">
<div style="margin:30px; border:1px solid #0000ff;"><a href="test.html">TEST</a></div>
</div>
</div>
</body>
</html>
548 :
546:04/12/15 18:11:52 ID:???
>547さん
わ、ごめんなさい…見落としてました。
ありがとうございます。
【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標準モードはおkだったので聞いてみました。
誤爆です。。
新年の更新に期待してage
554 :
Name_Not_Found:05/01/05 04:10:01 ID:xT1HD4C6
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はデフォルトでフォームオブジェクトにスタイル適用しない設定
になってた気がする。
556 :
815:05/01/06 19:51:51 ID:3jNfF2R5
<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の下に20pxスペースができて
全体が崩れてしまいます。お願いします。誰かこの直し方教えてください!!
ありがとうございます。
558 :
554:05/01/07 06:39:02 ID:???
>>555 おおっ、置換要素に:before :after効かないのは初めて知りました。
ありがとうございます。
ただ、気になるのは
>>554の例だと
「form.mukankei input:before」の部分を
「li *.test0:before」にするとちゃんとスタイルシート効いて表示されますが、
「li *:before」だとやっぱりダメだったりするあたり。
liの中にinputなんて書いてないって・・・。
テストページとか作成した方がわかりやすい希ガス
Mozillaでテーブルの上下マージンがつぶされないのはバグ?
無料鯖のIDとパス公開してみんなでテストページにうpしたら・・・
えらいことになるだろな。
性善説がまかりとおる世界に行きたい。
>>561 CGIで数個のファイルを一塊として20KB程度の制限つきで置けるアップローダでも作ればいいんじゃないかね?
【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ごと消えちまうw
例えばdivの背景に画像を表示させて、テキスト部分のみを非表示にしたいからでしょ。
じゃあテキストだけdisplay : none;でいいじゃん。
<div id="foo;">
<p>あいうえお</p>
</div>
div.foo{
position:absolute;
width:xx;
height:xx;}
.foo p{
display:none;
}
>>571 そのためだけにマークアップするのかと(ry
マークアップがいやなら
<div style="〜">
<p style="〜">あいうえお</p>
</div>
釣られないぞ釣られないぞ釣られないぞ
じゃぁheight : 0;でオーバーフロー。IEは別に用意する必要があるけど
>>573はマークアップの意味が良くわかっていないようなので訂正
そのためだけにタグを付加するのかと(ry
スレ違いだからやめよーよ
更新に期待してage
Firefox1.0で、
a:hover{text-decoration:none;}が効いたり効かなかったりするのですが
バグでしょうか?
効かない場合のソースかサンプル出されないと何とも言えん。
borderやらfloatやらごちゃごちゃ使ってないかい
582 :
579:05/01/18 18:55:28 ID:???
>>583 ツール/編集 → オプション/設定 → 全般 → フォントと色 → リンクに下線を付ける
これにチェックを付けていると再現された。チェックを外せば大丈夫。バグだね。
Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:1.7.5) Gecko/20041108 Firefox/1.0
で確認
584 :
584:05/01/18 21:19:53 ID:???
回避方法。
a {text-decoration:underline;} を事前に明示しておく。すると
a:hover {text-decoration:none;} がちゃんと全てのアンカーでちゃんと反映される。
585 :
579:05/01/18 23:50:57 ID:???
チェック外しても先に明示しても変わりありませんでした
ちがうところといえばWindows NT 5.1というところだけですが・・・
解像度とか拡大縮小とかでないよね?
<p><img src="****.jpg">テキスト</p>
floatを左右どちらに指定しても、画像とテキストの上端が揃わないことがあります。
Mac IE 5.2
ガイシュツだったらすいません。
floatを何に指定するのか、標準モードなのか互換モードなのか。
MSIE6.0
backgroundプロパティ
background-colorプロパティを
*に適用すると空のテーブルのセルが表示されてしまう。
(empty-cells以外のプロパティで空セルのボーダーの操作ができてしまうのは問題。)
>>591 * は全称セレクタだってこと位は知ってるよね?
で、空のセルがあるテーブルがある場合に不具合が、ってことだろ。
593 :
Name_Not_Found:05/01/31 15:17:38 ID:udpXKq/C
>>588 当たり前だろうが。
初期設定のスタイルシートがどうなってるか分かってんのか。
pには上下マージンがある。
imgにはない。
揃うわけがないだろ。
合わせたけりゃてめーで合わせろ。
というか593のレスだと全くもって適切でないことは本人にはわからんのだろうか。
初期設定でpにマージンがありimgにマージンがないと決まっているのだったら、
588のソースでは(もちろんこれも不備だらけだが)結果は一定になるはずだ。
揃わないことがある、なら、揃うこともある、んじゃないのか?
そこんとこをはっきりさせてバグの有無と原因を究明するスレではなかったのか。
NN6ってform要素がinline化できない?
form要素とinput要素両方ともdisplay:inlineの指定してるのに
改行されちゃうから対処にこまってまつ。対策ないですか?
もともと月一くらいの更新ペースだったしキニスンナ
年度末は何かと忙しいだろ
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を返す
オブジェクトにしか適用されない。よって仕様通りとしか言いようが無い。
「俺新管理人やりたい!」とかいうのがいるのか?
俺新管理人やりたい!でも、面倒です!
以下のソースで、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は適用されて背景色は適用されない瞬間があったけど、記録し忘れた。(幻覚かもしれない)
・インライン要素でも発生した瞬間があったけど、記録し忘れた。(幻覚かもしれない)
ここまで限定された条件下でのバグも珍しいような・・・。
もっと絞れそうな気もするんですが、今日はもう寝ます。
611 :
610:05/02/13 03:55:26 ID:???
どうでもいいが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;
で左右のマージンの幅が違う、左が右の倍くらい空きます。
614 :
613:05/02/13 13:00:23 ID:???
XPでIE6.0です
FireFoxやOperaではちゃんと表示されます
調べるのめんどくさかったんだ
ご苦労
617 :
613:05/02/14 09:38:25 ID:???
あ、ごめん
調べたんだけど書き忘れてた、既出でしたね。
もー! (゚д゚ )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>
621 :
619:05/02/26 00:30:16 ID:???
<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。
以上の条件を満たすと発生するみたい
でも
>>527ではline-heightは条件に入ってなかったが。どうなの?
なんで基地のバグに余計なもの付け足したら新しいバグになると思ってんの?
新しいバグだなんて言ってないな。
line-heightは条件に入るのか入らないかって訊いてるんだろ。
634 :
Name_Not_Found:05/03/08 10:05:34 ID:DrG3P5s/ BE:8977853-#
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>
「他要素のマージンが重ならない」って意味不明。
他要素とは何で、重ならないとは何と重ならないのか、そしてどう重ならせたいのか。
636 :
Name_Not_Found:05/03/08 10:14:20 ID:DrG3P5s/
>>635 たとえば上のソースでは<table>と<p>の間などに2emの隙間ができてしまいます。
IEでは1emなのですが、これはどうなのでしょうか。
638 :
Name_Not_Found:05/03/08 10:33:27 ID:DrG3P5s/
>>637 すいません、普通なら行われるはずのそれが行われていないのですが、これはバグですよね?
>>634 それでやってみたら、IE6でもtableとh1とのマージンは相殺されなかったが。
ごめん
>>639は取り消し。margin:1em;だからfont-sizeに合せられるのね。
>tableのマージンが他の要素のマージンと相殺されない
Netscape7.1でも再現するね。
Opera7.54では大丈夫だった。
642 :
Name_Not_Found:05/03/09 09:50:27 ID:YCJcpxX/
643 :
Name_Not_Found:05/03/10 20:50:10 ID:4LDiRwyb
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>
transparent = rgba(0, 0, 0, 0)
ね。
すみません、バグ辞典を見ても判らないので…教えてください。
Win/IE6の場合は、その1・2両方とも内側のDIVのmarginが効くのですが、
Win/NN7だと、その1は内側のmargin-topが、外側のDIVに効いているようなのです。
これの回避方法はありますでしょうか?
その1
<div style="width:500px; height:100px; background-color:#ff8888;">
<div style="margin:20px 10px 0px 400px; background-color:#8888ff;">
test
</div>
</div>
その2
<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>
>>647 それとは違うでしょ。
確かに外側のdivに内側のdivのmarginが適用されるっぽい。
俺なら外側のdivにpadding-topとかで逃げるかな。
>どうもIEはheightを指定すると子要素との間でマージンを相殺しなくなるっぽいな。
width か height が指定されていると、発生する模様。
他にも width と height で挙動が変化することがあるけど、
M$ はどうしてこういう訳の分からん実装を平気でするかね。
650 :
646:05/03/11 18:10:53 ID:???
>>647さん
>>648さん
>>649さん
レス有難う御座います。
NNの方が正しいのですか。
borderの有無だけで中のDIVのmargin-topが変わるのはおかしいので、
NNの方が間違っているのかと思いました。
解決法ですが、paddingを使用するとIEとNNで縦幅が変わってしまいますよね。
最終的にはborderは無しにしたいのですが…
その3(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で指定すればいいじゃん。
652 :
646:05/03/11 18:45:37 ID:???
>>651さん
いえ、paddingを使用すると縦が長くなってしまいますので、ダメなんですよー。
下記のサンプルの場合、外のDIVをpadding-top:20pxとするなら、
それにあわせてheightを80pxにしないと縦が延びてしまうのですが、
そうすると今度はIEで縦が短くなってしまうのです。
その4
<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>
654 :
646:05/03/11 19:18:54 ID:???
>>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 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'.
初心者つうかにわか知識の自称中級者くさい
まだぎゃあぎゃあ騒いでんのか鬱陶しいな。
a:hover img{color: ;} とかじゃダメですか?
>>664-665 わかってないのに質問したり回答したり。
a:hover img {border:1px solid #f00;} で、出来る。
できないのは単にIE5なんて古いヴァージョン使ってるからだろ。
borderプロパティーがインライン要素にも適用可能になるのはWinIE5.5からだよ。
668 :
Name_Not_Found:05/03/20 15:50:45 ID:axLq7onW
>>668 確かにそれもIEのバグだけどなー。
でも、今更指摘されてもという感じもしなくもない。
たぶん、これ。
シリア語ブラクラ【しりあごぶらくら】[名]
WindowsXPでInternet Explorerの機能を使った
2ちゃんねるブラウザを使用した際に
突然行間が開いて表示されるために
AAが見にくくなるというブラクラの一種。
フォント"Estrangelo Edessa"に含まれるシリア語の文字
(Unicodeの1792番から1871番)を表示する際に起こる不具合を
利用しているのでこう呼ばれる。
対処としては上記フォントを削除するか、
&#179と&#18を半角にしたものを表示しない(あぼ〜ん)設定にすればよい
【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なんてプロパティーは、マイクロソフトの独自拡張だっての。
いいんじゃね?
二の舞にならないように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 指定がfixed指定と同じになる。
もちろん、fixedでも同じ。
274 :268:05/03/16 18:56:17 ID:???
>270
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.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
677 :
Name_Not_Found:2005/04/13(水) 01:30:36 ID:K9M8yfhj
既出だったらスミマセン。
IE6(非互換モード)だと、テーブルの一部の列の高さを固定にして、残りを可変にしようとすると
全部の列の高さが同じになっちゃうと思うんですが、コレってバグっすか?
あと、回避方法があるなら教えてください。イロイロ試したんですが撃沈。
ソースで書くとこんな感じです↓。
<table>
<tr style="height: 50px">
<td>hoge</td>
</tr>
<tr>
<td>hoge</td>
</tr>
<tr style="height: 50px">
<td>hoge</td>
</tr>
</table>
非互換モードって標準モードのことか?なら試したがそんな挙動はしない。以上。
679 :
677:2005/04/14(木) 02:20:26 ID:jvxvxwI4
<!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で出来るのでテーブルレイアウトなんてなくてすむのですが…
680 :
677:2005/04/14(木) 02:22:38 ID:jvxvxwI4
すみません、改行をデリートする際にメッセージの一部まで消してました。
標準モードで試していただいたとの事ですが、上のコードでもう一度試していだたけますでしょうか?
>>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;
}
684 :
Name_Not_Found:2005/04/25(月) 17:10:43 ID:btH9Zqho
688 :
Name_Not_Found:2005/04/25(月) 19:39:25 ID:C/iWXm1q
ガイシュツかもしれないのですが、書かせていただきます。
外部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 ブロックに後続する次の要素の1行目にまで背景色が適用されてしまう、
という現象が発生しました。
なお、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>
692 :
Name_Not_Found:2005/05/04(水) 02:26:29 ID:JKcZ3vit
>>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
モードの方。
694 :
Name_Not_Found:2005/05/11(水) 09:07:05 ID:/wBLfYc7
>>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 :
694:2005/05/11(水) 09:53:05 ID:???
今またいろいろ試していたら、とりあえずの原因?が解明。
効かなかったクラスの直前のコメントアウトを取ると、効くようになりました。
/*---文字サイズ---*/ ←こういうやつ
あった方がわかりやすく有り難いけど、必要にせまられてるので
効かない部分のコメントは全部とっぱらってやった。
しかし効いている部分は直前にコメントがあっても全く問題なし。
もう訳がわからないのですが、一応ご報告まで。
697 :
Name_Not_Found:2005/05/11(水) 10:03:30 ID:qim9/iEb
>>696 ていうか charset指定してなかったんじゃないの
699 :
694:2005/05/11(水) 10:57:39 ID:???
>>697 してます。Shift-JISっす
>>698 うぉぉぅ!正にそれだ。
コメントに「表示」と書いてしまっているところがありました。
無知でお恥ずかしい。勉強になりました。
688タンは原因特定できたのだろうか。
700 :
Name_Not_Found:2005/05/11(水) 11:29:12 ID:qim9/iEb
701 :
694:2005/05/11(水) 16:48:03 ID:???
>>700 わかってるよ!
cssの頭のやつは全部小文字で設定してるんだけど、不都合とかないよな?
@charset "shift_jis";
>>701 ここはバグ辞典スレだ。不具合があるかないかは自分で調べてあったら報告しろ。
703 :
694:2005/05/11(水) 22:34:42 ID:???
@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> に飛ばないみたい。
で、それがCSSのバグだとでも?
Netscape7.1なんて古すぎだろ。
かなり前に修正されてる。mozilla1.7でもfirefoxでも無問題。
そもそも
>>709の引用先は、仕様書のどこによって、そんなことを言ってるわけなの?
floatが始まる前の部位のテキストまで流し込むのは不自然でしょ。
>>709 Opera7.5ではちゃんと表示される。
>>710 古すぎってことはない。つい最近、先週になってNetscape 8.0がリリースされたんだから。
7.2だって出たのは去年の夏だ。日本語版ではいまだ7.1が最新だし。
>>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 動詞の目的語???
WinXPsp2/Opera8です。
・外部スタイルシートを読み込み
・font-familyで複数のフォントを指定
としたとき、プロポーショナルフォントを指定しても等幅フォントになる。
自分の勘違いであってほしいのだけど、どうだろ。
Opera7.54以前でも同様だったかは失念。
>>717 もそっと具体的にソースを。フォント名も出してみて頂戴。
719 :
717:2005/05/30(月) 19:27:07 ID:???
あい。
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: "MS Pゴシック", sans-serif; としても起きた。
外部スタイルシートを指定してても、
<p style="font-family:'MS Pゴシック',sans-serif;">
とした場合は無問題。
720 :
717:2005/05/30(月) 21:40:08 ID:???
>>720 なんだ、古いバグだなあ。Operaは8.0になってもまだ修正してないのかよ。
722 :
714:2005/05/31(火) 00:56:15 ID:???
>>715 補語だったっけ?まあそこら辺あまり覚えてないんでスマソ
723 :
Name_Not_Found:2005/06/09(木) 20:19:33 ID:gx8wzlTF
IEでホイールクリックが効かなくなる原因を教えてください。
激しくスレ違いです
>>699 あー、俺もやったなー
/* ○○表 */
>>725 それは「表」の後に1文字空白が入ってるから問題ないんでないの?
というわけでコメントを閉じるときは必ず空白を入れること推奨
バグを把握することが大事
729 :
Name_Not_Found:2005/06/19(日) 06:28:27 ID:RltdkywR
【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では、このバグは全く起らない。
731 :
Name_Not_Found:2005/06/20(月) 12:03:18 ID:FQk0xHyx
Win IE 6
では、imgに、
width=""
と、指定すると画像が表示されないのだけど、それって
W3Cの仕様書には準拠してないでつか?
画像が表示されていないのは、pngのアルファどうたらのせいかねぇ、
とか思ってたのに。
数値を指定しろ、と言われればそれまでだけど、それとは別にバグとしての話。
734 :
731:2005/06/21(火) 21:00:19 ID:???
>>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を同一セレクタに設定すると、無視される模様
737 :
Name_Not_Found:2005/06/24(金) 00:06:47 ID:7fPGmdOE
>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
}
738 :
Name_Not_Found:2005/06/25(土) 18:33:31 ID:TjJI53nm
普通に常識だと思われ
【IE6互換】
既出だと思うけど、border-colorにinherit指定しても親要素のborder-colorじゃなくて該当要素のcolorを引っ張ってくる。
border-color:inherit;じゃあ明示したことにはならんのかな?
>>743 すべてじゃないな
directionと、unicode-bidiと、あと何か忘れたけど1つか2つは対応してる。
何故かというと、共通の値inheritが出来る前から
directionとかの草案には固有の値としてinheritがあって、
その時代に実装したから。
745 :
Name_Not_Found:2005/06/28(火) 22:19:05 ID:/YknIxZ0
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;}
でいけそうな気がするけど
>>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
768 :
ラブ天使:2005/07/19(火) 19:42:46 ID:VmiSsPqX
膀胱がん転移
769 :
Name_Not_Found:2005/07/19(火) 22:46:59 ID:o7KtcHz/
日本語読めないなら諦めなさい
771 :
769:2005/07/20(水) 00:57:08 ID:lP/tdi/T
>>770 @media print {
ここにスタイル指定
}
こんな風にしてるんだけど。
media指定するために囲ってるのに・・・これでダメだから。
さらに括るって?
頭の悪いお前に親切でスタイルのいい俺が教えてやる。
MacIEでバグを持つスタイル指定(主語)、を、@mediaで括ること(方法)、によって、
(MacIEでバグを持つスタイル指定による)バグを回避することができます。
@mediaの中にはMacIEに読み込ませたくないスタイル指定を書けってことだハゲ。
アンダースコアハックのような、特定のUA(あるいは以外)にスタイル指定を読み込ませないハック。
773 :
772:2005/07/20(水) 01:09:31 ID:???
>スタイル指定を読み込ませないハック。
ハックじゃねえな。テクニックか。テクニックでもねえな。実運営上の小技。
頭の悪い俺を殴れよ。
775 :
769:2005/07/20(水) 01:30:02 ID:lP/tdi/T
>>772 漏れもやっと今わかったとこです。
要するに、@mediaが効かないことに対しての回避方法じゃないってことですね。
このバグをイカして、こんなことが出来ます、と。ググッてもこればっかし。
バグ辞典に出てんのは回避法じゃないじゃん。
Mac IEで@media内の指定を効かせる方法を知りたいんですが、それは不可能ってことでFA?
776 :
772:2005/07/20(水) 02:16:59 ID:???
実際、そこまで頭悪いとは思わなんだ。
777 :
766:2005/07/20(水) 09:31:31 ID:xdJCLZhW
>>774 位置ずれはそれと同件だろうと察しはついてましたが
・リロードすると右側のdivが消える
・更に数回リロードするとAccess violationでIEが死ぬことがある
の方を主に聞きたかったわけですが。
778 :
Name_Not_Found:2005/07/20(水) 10:53:16 ID:sphBewYN
で、Mac IEで@media printを有効にする方法ってないの?
779 :
Name_Not_Found:2005/07/20(水) 12:30:06 ID:sphBewYN
ずっとググッてるけど、IEで@media printを生かす方法はみつからない。
このバグを利用してMac IEだけ無視させるってネタばかりだ。
何が言いたいのかわからない
@media を使わずにやればいいのでは
>>777 では最初からその旨書いて下さいな。
たぶんdiv#rightが空であるって条件が附加されたことによる新バグでしょ。
まあ空divなんて宜しくないわけだし、766のソースがclearをしてないのもよくないから、
普通は発現しないバグってことでそんな問題にはならなかったと。
>>778 無い。バグにはすべて回避法があるとでも思ってるの? 理不尽だからこそバグなんだよ。
782 :
ラブ天使:2005/07/20(水) 17:01:31 ID:V0aSzxlF
オナニーしてたら、マンコの悪臭が鼻についた(ヾ)クンクン
おえっ!!
くっせ―――!!
#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系のみのバグでしょうか。
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
788 :
784:2005/08/02(火) 11:08:40 ID:???
>>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>
試用です
791 :
Name_Not_Found:2005/08/07(日) 03:22:49 ID:USJEdJ5h
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では期待通り中央揃えになる。
いずれのブラウザについても標準モードと互換モードの両方で
確認。
796 :
Name_Not_Found:2005/08/31(水) 03:17:37 ID:wPydNWja
<td class="--"> と <span class="---"> で同じフォントのスタイルを
指定しているのに、Win で文字間が同じにならないのって、バグでしょうか・・。
いいえ
798 :
Name_Not_Found:2005/09/15(木) 19:11:01 ID:Vd0HNGkl
質問です。
IEMac5.2だけリストが横並びにならないです。
↓html↓
<div id="header_m">
<ul class="navi">
<li class="menu"><a href="○○○"><img src="○○○" alt="○○○"></a></li>
以下liが4つほど
</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を使って段組をしているためです。
バグのサイトも見てみたのですがイマイチだったので
どうかご教授宜しくお願い致します。
799 :
Name_Not_Found:2005/09/15(木) 19:22:28 ID:tXpvWXzn
>>798 .menu に display:inlineを追加する
800 :
Name_Not_Found:2005/09/15(木) 19:41:05 ID:Vd0HNGkl
>798です。
早速のご返答ありがとうございます。
しかし、それも試してはいるのですが
なぜかMacのIE5.2だけは横に並ばないのです。
手元に5.2しかないので他の5.×なども表示できてないのでは?
となやんでます。
>>800 MacのIE5.2だと、ファイル:環境設定からキャッシュファイルを空にするボタンを押さないと
なんどリロードしても前のファイルを読んじゃうでしょ。そのせいではないの?
803 :
sage:2005/09/15(木) 22:38:11 ID:Vd0HNGkl
>>798>>800です
アドバイスありがとうございました。
なるほどそういう事だったんですね。
横幅をきちんと指定してもだめだったのですが
一応キャッシュも空にして見た所
大成功です。
自分ではだいぶcssも分かったつもりでいましたけど
まだまだのようです。
どうもありがとうございました。
>>804 あれw?【簡単】取っ付き易いWebページ講座Part3【正確】スレでも
同じの見たぞ。
おお、見つかってしまったw
あっちでやるのはスレ違いかなと思って、ここで聞くことにした。
widthプロパティを設定すると別の不具合があるみたい
ちょっと変わった相談なのですが、教えてください。もうさんざん既出ですが、、
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バグというかハックな気がする。
820 :
817:2005/09/30(金) 23:59:03 ID:2kSIl+ZZ
コメントを閉じていると言うより、全称セレクタ指定のエラーなんじゃないかね?
うん、
この場合書き方自体が間違っているのだから、バグでもハックでもないような。
ハックにも誤った書き方によるものがあるが。
Opera8.50とIE6で、
body{
font-weight:normal;
font-style:normal;
}
としても、この状態で emとかstrong要素でマークアップすると斜体になったり太字になったりする。
継承自体はしてて、font-weightにboldとかいれると、ちゃんと太字になったりはする。
UAのデフォルトスタイルを上書きできてないみたい。
Operaの場合は、
*{
font-weight:inherit;
font-style:inherit;
}
で、継承を明示してやると解消できるけどIEはどうしようもないみたい。
つ、釣られないお
◯
\吊/
人
既出
仕様
831 :
Name_Not_Found:2005/10/23(日) 09:28:22 ID:PA2hPeeR
<ul>
<li><a href="iii.html">いいい</a></li>
</ul>
#main_design ul{list-style:inside url(../images/ooo.gif);}
IE6だと、クリックした時に出現する四角の点線がきっちりリンク文字を囲わずにずれてしまいます。
ooo.gifの画像が縦長だからかもしれません。
Firefoxだとずれないんですが。
ずれない方法か、或いは四角の点線を表示させない方法ってありますか?
ありません
833 :
831:2005/10/24(月) 09:42:57 ID:o0RgW7i+
これがIE6のバグってやつなんですね。。。初バグです。諦めます。
ちがいます
835 :
Name_Not_Found:2005/10/25(火) 07:17:17 ID:6bSqCEU5
<div id="親枠">
<div id="子枠左側"></div>
<div id="子枠右側"></div>
</div>
このの場合、親枠でボーダー引くには br でクリアするしかないと思ってたら、
親divに overflow:auto を指定したら、
難なくIEもどきに子要素が親要素の中に収まってくれるじゃん。
ああ、おいら知らなかったよ。
ネットで調べてもみんな br でクリアしろと書いているんだもん。
これでソースを汚さなくてすむ。うれしいなうれしいな。
836 :
Name_Not_Found:2005/10/27(木) 18:39:06 ID:t0fmJgyG
>>834 Firefoxではうまく表示されるのに、IE6ではうまく表示しない、
というのは、バグではないとしたら、なんなんでしょう?
仕様
840 :
Name_Not_Found:2005/11/15(火) 22:54:59 ID:Z2rg62D8
>>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>
845 :
Name_Not_Found:2005/12/03(土) 15:54:43 ID:r/ODzKFP
このスレ的に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使うよね、普通。
859 :
Name_Not_Found:2005/12/17(土) 18:53:52 ID:ZB8E5/uN
>>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>
誰も自サイト晒せなんて言ってないだろうに。サンプルページでも捨て垢に上げれば?
863 :
Name_Not_Found:2005/12/31(土) 03:15:17 ID:uUbe0bh8
【バグ発見レポート】
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と同じく、相殺されないという現象が発生します。
864 :
Name_Not_Found:2005/12/31(土) 03:21:39 ID:uUbe0bh8
>>863 同じくMacOS X10.3.9上で、Firefox1.5, Opera8.0.1, NN7.1でも同様の現象を確認しました。
フロート化していなければ相殺され、フロート化すると相殺されません。
うーむ、これは何かそういう仕様なんでしょうかね?
865 :
Name_Not_Found:2005/12/31(土) 03:25:00 ID:uUbe0bh8
>>864 細切れですいません。補足ですが、WinIEバグ172は、
Firefox1.5, Opera8.0.1, NN7.1では問題ありませんでした(きちんと相殺される)。
フロート化されてるブロック要素のマージンは相殺されないんじゃなかったっけ?
>>866 すいません。それです。
>>867 なんかそんな感じですが、そうすべき論理的根拠がわからないような。
869 :
Name_Not_Found:2006/01/02(月) 03:18:48 ID:bXXfkZH/
>>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と同時指定は駄目でしたっけ?
アゲなきゃ見てくれないよ。
>>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;
879 :
878:2006/01/29(日) 03:24:18 ID:???
誤 Default
正 initial
簡略プロパティで省略された値は初期値となる。
つまりdiscになるのが正常。
881 :
Name_Not_Found:2006/01/29(日) 21:19:16 ID:6iISwfnp
すみません、スレ違いだと思うのですが:
Windows付属の「ペイント」で作成した画像を「.bmp」で保存し
後でGIMPで編集して「.png」で保存しました(圧縮レベル: 0)
MSIE6だと、その画像を表示しません。
これは既出のバグですか?
882 :
881:2006/01/29(日) 21:37:00 ID:6iISwfnp
自己解決しました。
GIMPで問題の画像を開き、そのスクリーンショットをとって
png形式で保存したらイケました。
・・・・CSSやDHTMLという意味すら分かってないで書き込んでいるのだろうか・・・
こういう奴が数百KBの画像を平気で置くんですね
鯖管の中の人も大変だな
886 :
881:2006/01/30(月) 18:29:15 ID:???
スレ違いなのは分かってました。
てかうぜーよw
>>885 自宅サーバですが…
な に か
初心者乙
騙りにしても本人にしてもつまらない人ですね
IEで、
<img src="hoge.jpg" alt="hoge" width="" height="">
(width属性とheight属性の値を空白にする)
こうすると表示しないのは仕様かな?
スレ違いだけど、チラシの裏ソマソ。
ここは notepad.exe ですか?
自慢は他板で...
notepad.exe
IE7のベータが一般公開されましたね
あげるな馬鹿
誰に向かって言ってるんだ馬鹿
さげるな馬鹿
あげさげ
血の海ですな。
6も7も顔だとはわからないレベルの肉塊。
でも
6 = 身元すらわからないレベル
7 = なんとか身元が分かる手がかりが残ってそうなレベル
だな。
7はむしろクマ
IE7入れた。
CPU使用率が100%になった。
即効削除した。
バグの検証もくそもねー。
まぁ、βだし…
完成度的にはα版レベルだよね。
CSSがまともになってるのを期待してたのに…
っつか未だにMSに期待してるやつとかいるんだ
アナウンスさえ出なければ俺だって期待しなかったよ
ココログでブログつけてるのですが、
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箇所とも治してみたのですが表示されませんでした。。
書籍で1から勉強しなおそうと思います。
ありがとうございました。
>>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に汚染されてんじゃん
920 :
Name_Not_Found:2006/02/06(月) 16:48:46 ID:zl/9sW4N
こういうのはWikiがいいのかねえ
報告いたします。
macOSX Safari1.3.2
<a name>にa:visitedを指定しても反映されません。
<a name>に:visited?反映されるわけないじゃん。
終点にvisitedしてどうするよ
終端だってページロードで既読になんなきゃおかしいような。
visited以外のプロパティをどうやって反映しますか?
ページロードしたら常にvisitedでそれ以外ありえないでしょうが。
927 :
922:2006/02/09(木) 21:56:08 ID:???
すいません、書き方が悪かったです。
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でも反映されないような気がするぞ。
932 :
922:2006/02/10(金) 03:18:07 ID:???
>>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のみになる動きだぞ?
サンプルページうpすれ
935 :
922:2006/02/10(金) 19:19:31 ID:???
>>935 Win2000SP4
・Firefox1.5.0.1○
・IE6○
・N7.1同ページ内移動×別ページに移動して戻ってくると同ページリンクも全て既読
・Opera8.5同ページ移動×別ページに移動して戻ってきても同ページは未読
・影鷹○(但し色は現在の仕様上指定したものではない)
937 :
931:2006/02/10(金) 23:52:27 ID:???
Mac持ってないから確かめられないけどSafariだとページ内リンクをたどった後でも
visited状態にならないってこと?だったらSafariのバグっぽいな。
(931でいいたかったのはIEだとページ読み込み時点でページ内リンクが
visited状態になるけどFirefoxだと実際にリンクをたどらない限り
visited状態にならないってことね。)
939 :
922:2006/02/12(日) 00:28:27 ID:???
■NS 7.1のバグらしき動作
a要素を display: block; として、
background-position: 8px center;
などとすると背景の位置指定が無視される
■IE 6のバグらしき動作
position: rerativeの子要素に、
position: absolute;
top: 0px;
と指定すると、親要素をはみ出して表示される
なんとかなりませんかね・・・
>>940 前半はきしゅつ?バグであるとは言い切れない。
何でも バグ って決めつけるなや!
両方とも既出ではないような気がします
バグだと思うんですが。
バグじゃありません、仕様です ><
どう見てもバグですw
検証画像でもうpしてみれば?
それか仕様書読む
>>940 実装しきれてないIEとNSのバグっぽいね
rerativeを指定した要素の子にabsoluteを指定した場合
親要素を起点として子要素の配置が決まるはず
NSのはCSSのパース処理のバグだろう
すまん釣られた
relativeだぞw
>>951 なにー orz
NS7.1だけが正しい解釈をしてるってことですか
FireFox と IE と Operaのほうが2.1に対応してないのか orz
2番目の方はバグですよね
IEだけが対応してないだけなのか
間違えました
正しいのはNS7.1だけなんですね
2.1で見直されたんですね
2つ目のほうがわかれば教えてください
とりあえずその場しのぎで外側にもういっこボックス要素を作ってます。
>>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でもちゃんとはみださずにいけるぞ
あ、途中で書き込んでしまった orz
2つめは
<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がいいのかねえ
963 :
Name_Not_Found:2006/03/04(土) 06:03:29 ID:1x0KupcL
質問させてください。
レイヤーを作ろうと思ったんですが
DIVでID指定したものが
IEの場合
内部CSSに書いてあると表示されるんですが
外部CSSに書くと表示されません
firefoxはどちらも問題なかったんですが
これはいったいどういうことなんでしょうか?
>>963 > IEの場合
> 内部CSSに書いてあると表示されるんですが
> 外部CSSに書くと表示されません
そんなこととはありません。
以降はCSS質問スレへ逝って下さい
965 :
Name_Not_Found:2006/03/06(月) 18:17:41 ID:qEyOSWmS
一切実装していないものはそこでいう「バグ」には含まれない。
contentプロパティ然り。
がーん。そうなのですか。どうりで無いわけだ。サンクスです。
ちなみにMac版IE(5.2.7で確認)でも同様に効きません。
スターハックで両IE用にheightを指定してしのごうとすると
Safari(1.3.1で確認)でもそれが有効になってしまい役立たず。
968 :
Name_Not_Found:2006/03/06(月) 22:18:07 ID:lUpdmG7z
<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は無視されねばならない。
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>
976 :
974:2006/03/11(土) 14:10:06 ID:???
見落としていました。ありがとうございました。
floatって問題多すぎて使えなくない?
問題が多いのはWinIE
WinXP Firefox1.0.7
連続するふたつのフロートの後ろのフロート内にiframeがあって、
a:hover時にborderやpaddingが増減するような指定があるとき、
a:hover時にiframe内の要素がちらつく。
Firefox1.5では大丈夫だった