CSS/DHTMLバグ辞典スレッド【第5版】at HP
CSS/DHTMLバグ辞典スレッド【第5版】 - 暇つぶし2ch300:Name_Not_Found
07/08/08 22:12:39 .net
今回のはまちちゃんのクラッシュバグは、input(インラインフォーム要素) が
必須トリガーで無く、table + テキストでも同様のバグが発生する模様です。
URLリンク(sdp.katteyomi.info)
不正 table 記述により生成された"謎の空ブロック要素"が、インライン要素や
テキストを包み、その要素がポジショニング(relative | absolute | fixed)
される事で起きる様子..。

301:Name_Not_Found
07/08/25 12:23:58 X/4SavXL.net
【OS】 XP
【ブラウザ】 firefox 2.0.0.6
【症状】 overflow: auto; と border を指定した<pre>を連続して使用した場合に
borderのbottom部分が消える箇所がある。
スクショです。
URLリンク(vista.jeez.jp)

302:Name_Not_Found
07/08/25 19:17:54 .net
>>301
消えるんじゃなくて
ボーダーが化けたりもするよね

303:Name_Not_Found
07/09/05 17:39:26 .net
【環境】
Opera9.22 / Windows XP home
【現象】
labelタグに対するmargin-topとmargin-bottomが効かない。
【ソース】
<html>
<head>
<style type="text/css">
<!--
input{margin-top:3em;}
label{margin-top:3em;}
-->
</style>
</head>
<body>
<input type="checkbox" name="cat" id="cat" value="cat" />
<label for="cat">ねこ</label>
<input type="checkbox" name="dog" id="dog" value="dog" />
<label for="dog">いぬ</label>
<input type="checkbox" name="rabbit" id="rabbit" value="rabbit" />
<label for="rabbit">うさぎ</label>
</body>
</html>
IE6、FireFox2.0.0.4では、そもそもinputにmargin指定をするだけで、
それに対するlabel要素も一緒にmarginが入ります。
Operaでは、inputのみに指定したときも、inputとlabel双方に指定したときも、
どちらもlabel要素は動きませんでした。
どちらが正しい挙動なのか不明ですが…。

304:Name_Not_Found
07/09/07 16:03:16 LEnajBV0.net
>>303
Fxだってlabelに対するmargin-topは効かない。
labelはインライン要素で、インライン要素に対する上下marginは無視される。
つまりOperaの動作は正しい。
そもそもソースが間違っている。formがない上、
(strictなら)formの中身はブロック要素が必要。
IEは非検証。

305:Name_Not_Found
07/09/19 02:04:17 w91na6/+.net
【環境】
IE6(7は未検証)
【現象】
list-style-positio: inside のとき
list-sytle-type: none とすると、リストマーカーボックス分の余白が空く
【ソース】
<ul>
<li>リスト</li>
</ul>
ul { list-style: none inside; }

FirefoxやOperaだと余白は空かない = マーカーボックスは生成されない(?)
(display: none に近い挙動)
IEの場合はマーカーボックスは生成されてる(?)
(visibility: hidden に近い挙動)
既出?

306:Name_Not_Found
07/09/19 04:25:05 .net
>>305
それは単にmargin-leftを指定しない場合の解釈の違いじゃね?

307:Name_Not_Found
07/09/19 08:35:26 .net
>>306
いや、margin-left: 0 にしても
IEはリストマーカー分の余白が空く
すまん、書き忘れた
IE6の後方互換(Quirks)モードね
標準モードでもあとで試してみるわ

308:Name_Not_Found
07/09/19 10:22:07 .net
>>305
後方互換モード、標準モードのIE6,7で再現できた。

309:Name_Not_Found
07/09/19 14:10:44 .net
>>308
ありがとう
やっぱおかしいよね
でも、バグではなく解釈の違いってことなのかな
どっちにしてもIEだけ違うのでしばらく考えたよ

【解決策】
 IEでlist-style-type: none にするときは、list-style-position: outside にする。
ショートハンド使って、
 list-style: none outside;
でOKだね。

310:Name_Not_Found
07/09/19 14:37:11 .net
というかそもそも表示しないんだからinsideにする必要性自体が存在しないというか。

311:Name_Not_Found
07/09/19 15:39:30 .net
>>310
必要性が存在しない の意味がわからないなあ
CSSなんだから、カスケーディングで継承されるでしょ
まさか要素ごとに全部プロパティ定義してるんなら理解できるけど…
継承前に list-style: disc inside とかあったら、
非表示のたびに list-style: none outside って書かないとだめ

312:Name_Not_Found
07/09/20 12:20:59 bclnFN38.net
環境:MAC Safari1~2
症状:ピクセルで幅指定していないクリアボックス
の中のテーブルがセンタリングされない。
body,div,td{ text-align:center;}
div,table{ margin-left:auto; margin-right:auto;}
<div style="width:600px;">
<p style="width:300px; float:right;">フロート</p>
<p style="width:300px; float:left;">フロート</p>
<div style="width:100%; clear:both; background-color:#eee;">
<table width="300">
<tr><td>テーブル</td></tr>
</table>
</div>
</div>

313:Name_Not_Found
07/09/20 12:32:52 .net
>>312
意味不明なんで最小単位でやりたいことを言ってくれ・・・

314:Name_Not_Found
07/09/22 01:03:27 .net
IE6 で select の label をクリックすると一番上が選択されるのは既出だよね?

315:Name_Not_Found
07/09/22 13:03:56 .net
>>314
CSSの問題か?

316:Name_Not_Found
07/09/24 01:00:42 dtO1xwtG.net
初書き込み_o_
IE6で確認。display:none または visibility: hidden な要素中に
append された form は、ENTER で submit できない。
可視状態で form を構築したあと display: none しておけば、
その後 display: block で表示しても ENTER が効く。
textfield 個数問題とは別のバグと考えます。

317:Name_Not_Found
07/09/24 01:23:53 dtO1xwtG.net
サンプル付けときます。IE で再現するはず。
<html>
<head>
<script type="text/javascript">
function toggle(id) {
var elem = document.getElementById(id);
//*
if (elem.style.visibility == 'hidden')
elem.style.visibility = 'visible';
else
elem.style.visibility = 'hidden';
/*/
if (elem.style.display == 'none')
elem.style.display = 'block';
else
elem.style.display = 'none';
//*/
}
var form = '<form onsubmit="alert(\u0027submit\u0027); return false;">'
+' <input type="text" name="text"/><br />'
+' <input type="text" name="text2"/><br />'
+' <input type="text" name="text3"/>'
+' <input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />'
+'</form>';

318:Name_Not_Found
07/09/24 01:25:11 .net

function show3() {
var e = document.getElementById('testDiv3');
e.innerHTML = 'Form3(可視要素へのinnerHTML:Enter効く)' + form;
}
function show4() {
var e = document.getElementById('testDiv4');
if (e.style.display == 'block') return;
e.innerHTML = 'Form4(非可視要素へのinnerHTML:Enter効かない)' + form;
e.style.display = 'block';
}
</script>
</head>

319:Name_Not_Found
07/09/24 01:27:17 .net

<body>
<button onclick="toggle('testDiv1')">フォーム1表示</button>
<button onclick="toggle('testDiv2')">フォーム2表示</button>
<button onclick="show3()">フォーム3表示</button>
<button onclick="show4()">フォーム4表示</button>
<div id="testDiv1">
Form1(初期状態可視:Enter効く)
<form onsubmit="alert('submit'); return false;">
<input type="text" name="text"/><br />
<input type="text" name="text2"/><br />
<input type="text" name="text3"/>
<input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />
</form>
</div>
<div id="testDiv2" style="visibility: hidden;">
Form2(初期状態非可視:Enter効かない)
<form onsubmit="alert('submit'); return false;">
<input type="text" name="text"/><br />
<input type="text" name="text2"/><br />
<input type="text" name="text3"/>
<input type="image" src="blank.gif" style="position: absolute; top: 0; left: -50;" />
</form>
</div>
<div id="testDiv3"></div>
<div id="testDiv4" style="display: none"></div>
</body>
</html>

320:Name_Not_Found
07/09/24 01:57:10 dtO1xwtG.net
すみません。考えてみれば上のは CSS/DHTML バグとは言いにくかったです_o_。
別の話ですが、厳密な再現条件突き止められてないんですが、IE で z-index: 10000 とかしてても以降に記述された要素の裏に回ってしまう問題で悩んでいるんですが情報ありませんでしょうか?
周りに iframe なし、relative は結構使ってます。

321:Name_Not_Found
07/09/24 04:26:22 .net
お前どこまで図々しいわけ?
スレ汚しにも程がある。初心者質問スレ行けボケ。

322:Name_Not_Found
07/09/24 09:23:47 .net
これか。URLリンク(therealcrisp.xs4all.nl)

323:Name_Not_Found
07/09/29 03:53:48 .net
【環境】Opera 9.23
【症状】pre要素内で一つ目の改行が反映されない
【ソース】
.hoge pre:first-line
{
white-space: normal;
}
<pre>01...
02...
03...</pre>
そもそもセレクタがマッチするはずないのですが。

324:Name_Not_Found
07/10/06 02:00:02 .net
【環境】Opera 9.23
【症状】html要素にheightプロパティ、body要素にmin-heightプロパティをパー
セント値で指定すると、ウィンドウをリサイズしたときにbody要素の高さが変
更されない
【ソース】
* { margin: 0; padding: 0; }
html {
height: 100%;
background: gray;
}
body {
min-height: 100%;
background: silver;
}
<body>
<div>
テスト テスト …
</div>
</body>


325:Name_Not_Found
07/10/06 02:33:33 .net
補足:
* { margin: 0; padding: 0; }
html {
height: 100%;
border: 10px solid red;
}
body {
min-height: 100%;
border: 10px solid blue;
}
こんな風にボーダーをつけてみると、Opera 9.23ではbody要素の高さがおかし
くなる。

326:Name_Not_Found
07/10/06 04:30:48 .net
すみません、>>325の訂正です。
【環境】Opera 9.23
【症状】heightプロパティが指定された要素の子要素にmin-heightプロパティ
をパーセント値で指定すると、高さが余分に高くなる
【ソース】
div#boxA {
border: 10px solid red;
height: 200px;
}
div#boxB {
border: 10px solid blue;
min-height: 100%;
}
<div id="boxA">
<div id="boxB">
テスト
</div>
</div>
boxAとboxBの上ボーダーの幅の合計分だけ高くなるみたいです。

327:Name_Not_Found
07/10/06 04:48:37 .net
>>324
レンダリングの問題
>>326
当然の仕様
バグとは何か、少なくともこのスレでは仕様書と異なる挙動をバグと呼ぶ
何でもバグ扱いするのは間違い

328:Name_Not_Found
07/10/06 06:43:11 .net
>>327
>レンダリングの問題
>>324については、普通ウィンドウをリサイズした場合、高さや幅などを再計
算して描画するはずなのに、それができていないってことだと思ったのです
が、なにか違うんでしょうか。
>>326
>当然の仕様
よくわからないので、できれば詳しい解説お願いします。(仕様ということは、
Opera9が正しくてFirefox2、Konqueror3、Safari3がバグ持ちってことになる?)

329:Name_Not_Found
07/10/07 16:39:15 .net
あれ…誰もいない?
一晩おいて考えてみたけれど、>>327の主張は
・ウィンドウをリサイズしたときに仕様通りに表示できないのは仕様違反では
ない(=バグではない)←理由がわからない
・min-heightプロパティをパーセント値で指定したときは高さを余分に高くす
るという特別な規定が仕様で定められている←仕様書からは見つけられず
と、どちらも根拠がないように思った。

330:Name_Not_Found
07/10/07 18:57:34 .net
【環境】Internet Explorer 7
【症状】絶対配置した要素の子要素に:hover疑似クラスを指定しても、その要
素の子要素の内容領域か上マージン領域にマウスポインタを合わせたときにし
かホバー状態にならない
【ソース】
div#boxA { position: absolute; }
div#boxB { border: 10px solid red; }
div#boxB:hover { border: 10px solid blue; }
div#boxC
{
margin: 10px; padding: 15px;
border: 10px solid yellow;
}
<div id="boxA">
<div id="boxB">
<div id="boxC">test</div>
</div>
</div>
標準モードのみで発生。

331:Name_Not_Found
07/10/07 21:09:05 .net
>>329
親要素の高さがmin-heightで設定されると思ってるのか?

332:Name_Not_Found
07/10/07 21:16:28 .net
>>329は仕様書もろくに読まずバグと決めつける愚か者。
会話は成立しないので注意。

333:Name_Not_Found
07/10/08 02:39:39 .net
>>331
>>324>>326のどちらに対する指摘なのかわからないのですが…。
補足しておくと、>>324のコードでは、html要素のボックスの高さが初期包含
ブロックである表示域の高さとなり、body要素のボックス高さもそれと同じに
なるはずなのですが、最初に表示したときはそうなっているものの、リサイズ
するとそうならないので、仕様違反であると思われます。リサイズしたあとに
リロードすると、同じサイズの表示域でもリロードする前とbody要素の高さが
変わっています。
>>326についてはCSSを次のものに置き換えてもらうとわかりやすいかと思います。
(例示がわかりにくくてすみませんでした。)
div#boxA { height: 200px; border: 10px solid red; }
div#boxB { min-height: 90%; border: 10px solid blue; }
boxBの包含ブロックの高さはboxAの内容領域の高さである200pxになるので、
boxBがboxAの内容領域にちょうど収まるはずです(10px + 200 * 0.9 + 10px = 200px)。
Firefox 2、Konqueror 3、Safari 3ではそのように表示されますが、Operaだ
けはboxBの内容領域の高さがちょっとだけ高くなります。
>>332
間違いがあるのなら、仕様書を根拠にどこが間違っているのか指摘してください。

334:Name_Not_Found
07/10/09 20:41:43 .net
>>333
ここはバグ報告スレッドであって質問スレッドではない。出てけ。

335:Name_Not_Found
07/10/09 21:54:43 .net
1. 包含ブロックにheightの値を<length>で指定
2. ブロックレベル非置換要素にmin-heightの値を100%で指定
3. ブロックレベル非置換要素の計算されたheightの値が
min-height(=包含ブロックのheight)より小さい
んだったらmin-heightをheightの指定値として使用するわけだから
borderで内容の高さが変わるなんていうのはバグだろ

336:Name_Not_Found
07/10/10 22:52:22 .net
>>334
だから、>>324>>326でバグを示したら「それはバグではない」という趣旨のレ
スをもらったものの、理由が不明確だから、仕様書を根拠にした説明を求めて
るの。バグではないというのなら「仕様書にこう書かれており、Operaはその
通りに表示しているだけだ」と説明できるはずでしょう。

337:Name_Not_Found
07/10/10 23:38:15 .net
>>336
もっともな話だと思うが
仕様書に載ってないなら、
各ブラウザ制作者の判断
ということもあり得ると思うよ。

338:Name_Not_Found
07/10/10 23:42:38 .net
>>336
>>324がバグという主張は、再現しないため同意出来ない。
>>326は、包含ブロックのheightにborder分を含めて計算しているようだから、
バグなのだろう。
数値指定では起こらないし、width:100%;でも起こらない面白いバグ。

339:Name_Not_Found
07/10/11 03:06:00 .net
>>337,338
どうもです。>>326についてはバグと言って問題なさそうなので、Wikiに書い
ておきました。
>>324は、うちの標準モードのOpera 9.23(Windows XP SP2/Ubuntu 7.04)とい
う環境では下の画像のように表示されます。
URLリンク(doiob.net)
環境によっては再現しないのかもしれません。

340:Name_Not_Found
07/10/13 02:36:22 .net
         ____         
       /      \        
      /  ─    ─\    「作者の環境では再現しません」・・・か
    /    (●)  (●) \               
    |       (__人__)    | ________    
     \      ` ⌒´   ,/ | |          |  
    ノ           \ | |          |  
  /´                 | |          |  
 |    l                | |          |
 ヽ    -一ー_~、⌒)^),-、   | |_________|   
  ヽ ____,ノγ⌒ヽ)ニニ- ̄   | |  |      
         ____
       /      \
      / \   /  \   これは便利な言葉ですね
    /  (●)   (●)  \   
    |     (__人__)     |  ________
     \    ` ⌒´    ,/ | |          |
    ノ           \ | |          |
  /´                 | |          |
 |    l                | |       

341:Name_Not_Found
07/10/20 21:16:22 .net
CSS・スタイルシート質問スレッドから報告するように誘導されました

<a href="~" style="display:block;width:~px;height:~px;"><img src="~" alt="~"></a>
のように
A要素の中身がIMG要素で、A要素にdisplay:block;とwidthまたはheightを指定すると
WinIE5.0ではIMG要素上の左クリックが効かなくなります(outlineの線は出ます)
右クリックからリンクを開くを選べばリンク先に移動することができます
(A要素にpaddingやborderを指定するとpadding部分やborder部分だけが一応クリック可能になります)

バグらしいのですが既出ですか?
古いブラウザなのでもうとっくに既出だと思ったのですが
URLリンク(cssbug.at.infoseek.co.jp)
には載ってないようで
このスレを見て
URLリンク(mynotes.jp)
にも行きましたが載っていないみたいで

詳細は
スレリンク(hp板:586-609番)
あたりです

342:Name_Not_Found
07/10/21 22:23:38 .net
・・・IE5なんてもーどーでもいーよ・・・

343:Name_Not_Found
07/10/24 23:53:21 .net
>>341
再現できた。古すぎて気がつく人がいなかったのかも。

344:Name_Not_Found
07/10/26 00:07:53 .net
IE 7
背景色とマイナスマージン(とフロート?)の組み合わせで内容が消える。

<div style="margin-top: -1px; background: #FFFFFF">
<div sytle="float: left; widht: 100px;">
<p>内容</p>
</div>
<div sytle="float: right; widht: 100px;">
<p>内容</p>
</div>
<div sytle="clear: both;">
<p>内容</p>
</div>
</div>

345:Name_Not_Found
07/10/26 00:09:57 .net
>>344
haslayout は 1 だし、内容もあるような高さにはなるんだけど
なぜかテキストだけが表示されない
フォームコントロールとかは表示される
IE 7、バグだらけだなあ・・・

346:Name_Not_Found
07/10/26 01:02:40 .net
>>344
URLリンク(cssbug.at.infoseek.co.jp)
これかも…
IE 7、ひどすぎるな

347:Name_Not_Found
07/10/26 15:51:08 .net
widht?

348:Name_Not_Found
07/10/28 22:11:33 .net
>>344
widthに直してためしてみたけど、標準・互換どちらでも再現しなかった。
Windows XP SP2 + Internet Explorer 7.0.5730.11


349:Name_Not_Found
07/10/28 22:48:12 .net
>>348
たぶん
URLリンク(cssbug.at.infoseek.co.jp)

のバグが直ってない

350:Name_Not_Found
07/10/28 23:18:17 .net
>>349
そのバグはIE7だと発現しなかった(IE6では再現できた)。
>>344について検証したファイルをアップしとくよ。
URLリンク(www-2ch.net:8080)

351:Name_Not_Found
07/10/30 10:10:21 .net
float で複数段カラム作って、その下に clear:both したボックスを置くとする。
IEだと、一番縦長のカラムの下からそのカラムに指定されているマージンだけ
下に配置したオブジェクトとマージンが空くけど、
FFだと他の縦に短いカラムのマージンを適用するのかな?一番縦長のカラムと
下のオブジェクトがぴっちりくっついてしまうんだよね。
これはIEが勝手に解釈しているからそうなるのかな?
常考だとまずFFの解釈が正しいんだろうけど

352:Name_Not_Found
07/10/30 16:41:50 .net
>>351
#boxA, #boxB { float: left; width: 100px; margin-bottom: 10px; }
#boxC { width: 100px; clear: left; background: aqua; }
#boxA { background: yellow; }
#boxB { background: lime; }
<div id="boxA">boxA boxA boxA boxA boxA boxA</div>
<div id="boxB">boxB boxB</div>
<div id="boxC">boxC</div>
を、Firefox、Operaで確認したが、普通に下マージンが取られるよ。てか、バ
グと確認できたんなら、そのソースを貼るようにしておくれ。質問ならスレ違
いなので質問スレで。

353:Name_Not_Found
07/10/30 18:44:27 .net
<div id="container"> // width:100%
<div id="alpha"> // width:100% で margin-right: -300px; float: left;
<div id="alpha_reset"> // margin-right: 300px;
<p>ほげほげ</p>
</div>
</div>
<div id="blavo"> // width: 300px; float: left;
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
</div>
<div id="charlie"> // width: 100%; clear: both;
</div>
こんな感じ。今は blavo が alpha より長い状態ね。
IE だと、blavo に margin-bottom: 1em; なんてしてやれば
blavo と charlie の間に 1em の空白ができるんだけど、
FF だと alpha と blavo の両方に margin-bottom: 1em; と
してやらんと隙間が空かないなぁ。というハナシですハイ。

354:Name_Not_Found
07/10/30 19:08:57 .net
>>353
Fxもちゃんと空くが。
ソースもまともに書けないようだし、思い込みをバグバグ言うタイプだね。

355:Name_Not_Found
07/10/31 03:30:19 .net
>>353
Firefox 2.0.0.8では#blavoだけにマージンを設定しても、ちゃんと空くよ。

356:Name_Not_Found
07/10/31 17:19:19 .net
<!-- Start contents -->
<div id="contents">
<!-- Start main -->
<div id="main_index"><div id="main_index_reset">
<p>(゚д゚)シメジ</p>
</div></div>
<!-- End main -->
<!-- Start lists -->
<div id="lists_index"><div id="lists_index_reset">
<p>(゚д゚)シメジ</p>
<p>(゚д゚)シメジ</p>
</div></div>
<!-- End lists -->
<!-- Start links -->
<div id="links"><div id="links_reset">
<p>(゚д゚)シメジ</p>
<p>(゚д゚)シメジ</p>
<p>(゚д゚)シメジ</p>
</div></div>
<!-- End links -->
</div>
<!-- End contents -->
で、

357:Name_Not_Found
07/10/31 17:19:50 .net
div#main_index {
width: 100%;
margin-right: -470px;
float: left;
background-color: #ccc;
}
div#main_index_reset {
margin: 5px 470px 5px 5px;
}
div#lists_index {
width: 470px;
margin-right: -220px;
float: left;
background-color: #999;
}
div#lists_index_reset {
margin: 5px 225px 5px 5px;
}
div#links {
width: 220px;
float: left;
background-color: #666;
}
div#links_reset {
margin: 5px;
}

358:Name_Not_Found
07/10/31 17:21:55 .net
div#contents {
margin-bottom: 1em;
border: 1px solid #000;
background-color: #fff;
}
なソースだと、FFの2.0.0.8でlinksが次のオブジェクトにくっついちまいますな。
この3つを囲う contents でmargin-bottom 設定してるんだけど
情報小出しの最悪パターンで申し訳ない。

359:Name_Not_Found
07/10/31 17:26:27 .net
URLリンク(sakuratan.ddo.jp)
こんな具合。

360:Name_Not_Found
07/10/31 17:34:15 .net
#contentsの中身がフロートするボックスしかないんだから
「次のオブジェクト」が#linksにくっつくのは仕様通り。
floatの概念を勉強し直せ。

361:Name_Not_Found
07/10/31 17:51:21 .net
ギャア。理解した。

362:Name_Not_Found
07/11/05 10:59:10 .net
IE 7
code, samp, pre要素にfont-sizeが継承されない

CSS:
body {
font-size: 200%;
}

HTML:
<body>
<p>200%</p>
<pre>200%</pre>
<div><code>200%</code></div>
<div><samp>200%</samp></div>
</body>

このバグ、まだのこってるのかよ・・・

363:Name_Not_Found
07/11/07 23:08:13 .net
【環境】Opera 9.24
【症状】ブロックレベル要素の:hover疑似クラスにoutlineプロパティを指定
すると、ホバー状態でなくなったときにアウトラインの線が残る
【ソース】
div:hover { outline: solid red }
div { display: block }
<div>AAAAAAAAAA</div>
<div>BBBBBBBBBB</div>
<div>CCCCCCCCCC</div>
<div>DDDDDDDDDD</div>
<div>EEEEEEEEEE</div>
Opera 9.5では直っている模様。

364:Name_Not_Found
07/11/10 17:46:54 .net
>>362
Internet Explorer 7.0.573011 + Windows XP SP2で確認してみたけれど、標
準・互換モードともに発生せず。

365:Name_Not_Found
07/11/12 17:42:38 .net
【環境】Opera 9.24, 9.50 beta
【症状】table要素にborder属性を指定し、table:before, table:after,
tr:before, tr:afterにcontent:""を指定すると、セルの数が増える
【ソース】
table:before, table:after, tr:before, tr:after
{
content: "";
}
<table border="5">
<tr>
<td>A1</td><td>B1</td>
</tr>
<tr>
<td>A2</td><td>B2</td>
</tr>
</table>


366:Name_Not_Found
07/11/12 17:57:28 .net
なんか必死にoperaのバグ探ししてるけどさ、
フィードバックした方がいいんでね?

367:Name_Not_Found
07/11/12 20:21:40 .net
探しているわけではなくて、Operaを使い出したらバグをいろいろ見つけてし
まったというだけのこと。一応こっちにも書き込みながら、フィードバックも
するようにします。
>>365みたいなのも送っていいんだよね。

368:Name_Not_Found
07/11/14 18:58:40 .net
見つけてしまったので一応報告。
【環境】Opera 9.24, 9.50 beta
【症状】ブロックレベル要素の:first-line疑似クラスにwhite-space:normal
を指定すると、:before疑似要素のcontentプロパティの値が表示されない
【ソース】
.foo div:first-line { white-space: normal }
div { display: block }
div:before { content: "text:" }
<div>div</div>
CSSの1行目を削除すると表示されます。
>>323のバグと関係しているかもしれません。

369:Name_Not_Found
07/11/28 02:57:30 .net
IE7のバグ二つ。
検証ファイル:URLリンク(doiob.net)
【環境】Internet Explorer 7
【症状】子要素でbackground-image:noneを指定すると親要素で指定した背景
画像が表示されない
【ソース】
div#boxA { background-image: url("bg.png") }
div#boxB { background-image: none }
<div id="boxA">
<div id="boxB">
<p>テスト</p>
</div>
</div>
【環境】Internet Explorer 7
【症状】子要素でbackground-image:noneを指定し、親要素にpadding-bottom
を設定すると、親要素で指定した背景画像が全面に表示される
【ソース】
div#boxA { background-image: url("bg.png"); padding-bottom: 1px }
div#boxB { background-image: none }
HTMLは上に同じです。
URLリンク(cssbug.at.infoseek.co.jp) と関係しているかも。


370:Name_Not_Found
07/11/30 12:58:11 .net
【環境】Opera 9.24, Opera 9.5 beta
【症状】フロートに後続する要素でフロートをクリアすると、その要素の
上マージンが無効になる
【ソース】
#boxA { background: yellow; }
#boxB {
float: left;
background: aqua;
}
#boxC {
clear: left;
margin-top: 100px;
background: lime;
}
<div id="boxA">boxA</div>
<div id="boxB">boxB</div>
<div id="boxC">boxC</div>


371:Name_Not_Found
07/11/30 13:46:57 .net
【環境】Opera 9.24, Opera 9.5 beta
【症状】間にフロートを挟んだ上マージンどうしが相殺するとき、フロートが
包含ブロックより上に配置される
#boxA { background: yellow; }
#boxB { background: orange; padding-right: 20px; }
#boxC {
float: left;
background: aqua;
}
#boxD {
margin-top: 100px;
background: lime;
}

<div id="boxA">boxA</div>
<div id="boxB">
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>


372:Name_Not_Found
07/12/09 19:53:46 .net
【環境】Opera 9.24, Opera 9.5
【症状】vertical-align:text-bottomを指定した要素のボックスが
親要素の内容領域の下にはみ出す
span.p {
background: lime
}
span.text-bottom {
vertical-align: text-bottom;
font-size: 15px;
background: yellow
}
<span class="p">parent
<span class="text-bottom">text-bottom</span>
</span>


373:Name_Not_Found
07/12/13 14:05:51 .net
【環境】Internet Explorer 7
【症状】全称セレクタがコメントにマッチする
div *:first-child { color: blue }
div + * { color: blue }
<div>foo
<!-- comment -->
<div>bar</div>
</div>
<!-- comment -->
<div>baz</div>

374:Name_Not_Found
07/12/15 01:07:11 .net
これはバグでしょうか
【環境】Internet Explorer 6
【症状】input要素内に「あ」「亜」「A」等、いわゆる全角文字を書くと、
その瞬間にinput要素の横方向サイズが変わる。
<head>
<title>テスト</title>
<style type="text/css">
div { border-left : blue 100px solid; }
input { width : 30%;}
</style>
</head>
<div><input type="text" /></div>
互換モードでも標準モードでも発生します。

375:Name_Not_Found
07/12/20 23:47:57 .net
【環境】Internet Explorer 6, 7
【症状】list-style-position:insideを指定すると、マーカーボックスと
li要素の主要ブロックボックスが重なる
ol { list-style-position: inside; }
<ol>
<li>test</li>
<li>test</li>
<li>test</li>
...
<li>test</li>
</ol>
ol要素(list-style-type:decimalなど)で、マーカーの桁数が増えても
マーカーボックスが大きくならないようです。
標準モード、後方互換モードどちらでも発生します。



376:Name_Not_Found
07/12/22 06:04:05 .net
【環境】Opera 9.24, Opera 9.5 beta
【症状】overflow:scrollとを指定した要素にボーダーやパディングを設定する
と、子ボックスの右側に指定された量の空白ができる
div.scroll {
overflow: scroll;
border: 10px solid gray;
}
div.scroll > div {
border: 4px solid silver;
}
<div class="scroll">
<div>
テスト テスト テスト...
</div>
</div>


377:Name_Not_Found
07/12/23 23:49:05 .net
*{ margin : 0 ; padding : 0 ; }
<h1>test</h1>
<h2>test</h2>
これをIE6で見るとh1とh2要素の間に謎の空白が生まれてるんですけど
どうすれば解消されるでしょうか
FFではともに0で計算されて表示されてたのですが・・・。

378:Name_Not_Found
07/12/23 23:49:59 .net
すみません誤爆りましたほんとすみません

379:Name_Not_Found
07/12/27 18:53:57 .net
既出または何処かのバグ症状と重なってる可能性が高いと思うけど・・気になったので一応。
【環境】IE7
【症状】CSSバグリスト@CSSバグ辞典スレッド(URLリンク(cssbug.at.infoseek.co.jp)) の
h1要素が左に伸びてしまっているが、バナーにマウスカーソルを持っていくと縮む(正しい長さになる)。
しかし、他のリンクにマウスカーソルを持っていくと元に戻る(伸びる)。

380:Name_Not_Found
07/12/27 21:10:23 .net
上と同じ者ですが・・
【環境】IE7
【症状?】2-362(URLリンク(cssbug.at.infoseek.co.jp))の
症状は、Shift_JIS,EUC-JPでは再現されるが、UTF-8にすると再現出来ない(正しく表示される)。
文字コードによるCSSの差異って起こるものなんですね・・。

381:Name_Not_Found
07/12/27 21:17:31 .net
意味不明

382:Name_Not_Found
07/12/27 23:43:46 .net
>>381
ソースプログラムの文字コードを変更するとってことです・・。

383:Name_Not_Found
07/12/29 01:41:59 .net
>>379はこんなソースで再現できた。
a:hover {
background: white;
}
#bar {
margin: 1em -3%;
background: yellow;
text-align: center;
}
<body>
<div><a href="foo">foo</a></div>
<div id="bar">bar</div>
<div><a href="baz">baz</a></div>
</body>
・fooにマウスポインタを合わせるとbarが短くなる
・barが短いときはfooとbazの文字列の右側がクリックできる
・bazの右側にマウスポインタを合わせると最初の長さに戻る
・標準モードのIE7のみで発生する

384:Name_Not_Found
08/02/03 01:18:30 .net
hage

385:Name_Not_Found
08/03/12 15:47:17 .net
Operaって最前面の要素しかhoverしない?
<dl><dt><a href="...">Link</a></dt><dd>リンク</dd></dl>
に対して
dd{ display:none; }
dt:hover + dd{ display:block; }
a{ display:block; }
としても、dd要素が見えるようにならない。
IE7/FireFox2では見えるようになったのだが。
Operaのバージョンは9.26
OSはWindowsVista

386:385
08/03/12 16:20:16 .net
>>385修正
× としても、dd要素が見えるようにならない。
○ としても、dt要素(=a要素)にマウスカーソルを載せてもdd要素が見えるようにならない。

387:Name_Not_Found
08/03/13 18:48:10 .net
>>385
WinXP+Opera 9.26で見えるが…

388:Name_Not_Found
08/03/13 19:33:09 .net
>>387
まじか・・・。じゃああとでzipでソース上げるから検証してほしい。
そのまえでこっちでミスがないかよく見直して見るけど。

389:385
08/03/14 10:13:59 .net
使用中のCSS+テスト用HTMLファイル
URLリンク(www11.axfc.net)
pass: 404

390:Name_Not_Found
08/03/14 10:47:33 .net
>>385
a:active{color: red;}
を加えると再現できた。


391:385
08/03/14 11:19:32 .net
擬似クラスを指定した複数の要素を重ねると発生するのか。

392:Name_Not_Found
08/03/22 03:38:46 .net
Win版Safari(ver3.1)で、CSS内に@charsetを指定した場合、
直後のスタイルプロパティが無効になるってのは、既出ですか?
例:
@charset "Shift_JIS";
* {
margin: 0;
padding: 0;
}
↑の例だと、* {}内のプロパティが無視されちゃいます...
既出だったらすみません...

393:Name_Not_Found
08/03/24 12:27:56 .net
再現しないよ。WinXP SP2+Safari 3.1で確認。

394:Name_Not_Found
08/03/24 21:16:32 .net
>>393
今確認したんですが、どうも以下の条件で発生するようです。
1. @importで外部CSSファイルを読み込む
2. 1.で読み込んだCSSファイルに@charsetが指定されていれば、直後のプロパティを無視
Shift_JISとUTF-8では確認しました。

395:Name_Not_Found
08/03/25 01:40:13 .net
>>394
試してみたけど再現しなかった。検証したファイルを上げてもらうと
助かります。

396:394
08/03/25 08:40:07 .net
>>395
@charsetを絶対指定しなければいけないわけでもなく、ホントに些細な問題ですが、
ご協力感謝いたします。
URLリンク(www37.tok2.com)
上記URLで確認可能です。
バグが発生しない限り、背景色が青(#0080ff)になります。
バグが発生した場合は、背景色はデフォルトのはずです。
ちょっと見づらいでしょうが、宜しくお願いし居ます。
[検証環境]
OS: Windows XP Home Edition SP2
Browser: Safari 3.1

397:Name_Not_Found
08/03/25 11:12:58 .net
@charsetをファイル先頭に書かないと、次にある宣言や@規則が無視される
みたいだね。@importで読み込まなくても発生した。
@charsetはファイル先頭に書かないといけないので、正しくCSSを書いて
いれば特に問題はないんだけれど、仕様通りの動作ではないね。

398:Name_Not_Found
08/03/25 12:07:28 .net
VistaのBusinessのSafari 3.1でも再現

399:394
08/03/25 13:18:23 .net
>>397
そうでした、@charsetは先頭でしたね。お恥ずかしい・・・orz
IE7やFirefox2ではきちんと表示されていたので、疑問に思ってたんですが、
まさか、自分の間違いだったとは・・・
ご協力、ありがとうございました!

400:Name_Not_Found
08/04/13 19:25:48 tBpxFebe.net
・DHTML、IE5
別エレメントに既存エレメントをappendChildした後で、既存エレメントの子エレメントをdocument.getElementByIdで参照し、innerHTMLを設定するとエラーが発生するっぽい。
ソース?
別エレメント.appendChild(既存のエレメント);
document.getElementById(既存のエレメントの子エレメントのID).innerHTML=""
・結果
「未知の実行時エラーです」

401:Name_Not_Found
08/04/13 21:23:23 .net
それってJSじゃ・・・

402:Name_Not_Found
08/04/13 21:57:49 .net
キター

403:Name_Not_Found
08/04/18 22:36:59 .net
まとめwiki亡くなってるやん

404:Name_Not_Found
08/04/20 16:35:54 .net
最初のまとめサイト管理人が失踪してるから、結局何も出来ず更新もされず、という現状
いつまでも検索も更新も出来ない超不便まとめを使うハメになってる


405:Name_Not_Found
08/05/16 06:06:15 .net
すみません。しばらくウェブから離れていあたら、まとめサイトが
エロサイトにorz 失効したドメインを取得されてしまったみたいです。
データは残っているので引き継いでいただける方がいましたら
差し上げたいと思います。迷惑をかけてしまい本当に申し訳ありません。

406:Name_Not_Found
08/06/08 21:42:30 .net
既出かどうか知らないが報告
<h2><a id="honya" name="honya">ほにゃらら</a></h2>
<p><a href="#honya">タイトルに飛ぶ</a></p>
でh2にdisplay:none;
IE6   → 消しているのに、なぜかh2の位置へ飛ぶことができる
Fox2.0 → 消しているので、当然飛べない

407:Name_Not_Found
08/06/08 22:19:10 .net
IEは「なぜか」ってあるけど
どっちが正しいと言うわけではないのでは?
「display(表示)」に関する指定だから
レイアウトには影響するけどhtml文書側のid属性まで無効にさせるかどうかはまた別な気が

408:Name_Not_Found
08/06/08 23:48:02 .net
display:noneのときは何も生成されないんだから
参照不可能なんじゃね?

409:Name_Not_Found
08/06/09 00:41:45 .net
生成されないのはレイアウトボックスだろ?

410:Name_Not_Found
08/06/09 00:43:25 .net
そういやOperaはdisplay:none;を指定した要素または要素内にimg要素やscript要素があった場合
IEやFirefoxと違ってロードすらしないらしいけど
デフォルトスタイルがdisplay:none;なhead要素内にobject要素があった場合はこれもロードしないのだろうか
head要素内にobject要素を置くことは可能だけど

411:Name_Not_Found
08/06/13 13:48:22 .net
Opera 9.50は読みに行かないみたいだね。

412:Name_Not_Found
08/06/16 10:50:23 KE/tsnbA.net
IE6、7でリストの文字サイズが小さいとへんなマージン出来ちゃうんだけど
liにfloat:leftかけると消える firefoxではマージンはできない
既出?
<ul>
<li style="background-color:#0000FF;height:10px;font-size:1px;list-style-type:none;"></li>
<li style="background-color:#0000DD;height:10px;font-size:2px;list-style-type:none;"></li>
<li style="background-color:#0000CC;height:10px;font-size:3px;list-style-type:none;"></li>
<li style="background-color:#0000BB;height:10px;font-size:4px;list-style-type:none;"></li>
<li style="background-color:#0000AA;height:10px;font-size:5px;list-style-type:none;"></li>
<li style="background-color:#000099;height:10px;font-size:6px;list-style-type:none;"></li>
<li style="background-color:#000088;height:10px;font-size:7px;list-style-type:none;"></li>
<li style="background-color:#000077;height:10px;font-size:8px;list-style-type:none;"></li>
<li style="background-color:#000066;height:10px;font-size:9px;list-style-type:none;"></li>
<li style="background-color:#000055;height:10px;font-size:10px;list-style-type:none;"></li>
<li style="background-color:#000044;height:10px;font-size:11px;list-style-type:none;"></li>
<li style="background-color:#000033;height:10px;font-size:12px;list-style-type:none;"></li>
<li style="background-color:#000022;height:10px;font-size:13px;list-style-type:none;"></li>
<li style="background-color:#000011;height:10px;font-size:14px;list-style-type:none;"></li>
<li style="background-color:#000000;height:10px;font-size:15px;list-style-type:none;"></li>
<li style="background-color:#001100;height:10px;font-size:16px;list-style-type:none;"></li>
<li style="background-color:#002200;height:10px;font-size:17px;list-style-type:none;"></li>
</ul>

413:Name_Not_Found
08/06/16 17:18:30 .net
IEでくっついてみえるのはこれが関係してそう
URLリンク(cssbug.at.infoseek.co.jp)

414:Name_Not_Found
08/06/18 10:06:41 fBjG2qeg.net
>>413
line-height:1pxにしたら詰まった!
font-sizeだけじゃだめなのね

415:Name_Not_Found
08/06/21 16:21:40 8lzEhjx7.net
<html xmlns="URLリンク(www.w3.org)" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>test1</title>
</head>
<body bgcolor="#ff0000">
<br>
<br>
<br>
<img src="./test.jpg" style="filter: alpha(opacity=100);" />
</body>
</html>
サンプル
URLリンク(h-t-t-p.hp.infoseek.co.jp)
filter:opacityを設定すると画像によって部分的に透過率が0になってしまう。
ここでは御大の顔の右側の赤いドット。
URLリンク(h-t-t-p.hp.infoseek.co.jp)
画像そのものは普通。に見える。
ならない画像もあるので現状再現が難しいがFireworksから縮小かけて書き出すと結構な確率でなる。
数十ドットが欠けることもある。
IE6,IE7のみで。filterが独自拡張だから当然だけど。
これ今結構こまってて、誰か解決法知ってたら教えてください。
質問スレみたいに使って怒られるかもしれんけど質問スレ機能してないから許して

416:Name_Not_Found
08/06/21 16:42:43 8lzEhjx7.net
自己レス
URLリンク(forums.microsoft.com)
URLリンク(www.alexjudd.com)
探し回ってこれ見つけた
imagemagickを使って画像生成してるから回避難しいかも・・・

417:Name_Not_Found
08/06/21 17:51:59 .net
imagemagickでの生成時に-gamma 1.5/1.5/1.5をかけることで
なんとか回避できたっぽい
不本意だけどとりあえずこれで急場をしのぎます
誰かスマートな解決法知ってたら教えてください

418:Name_Not_Found
08/08/12 19:42:24 erOejHqY.net
【OS】WindowsXP Home Edition
【ブラウザ】Firefox3.0.1(恐らく3.0以降で同じ症状)
【症状】input要素のtype属性値がfile/checkbox/radioの場合に限り
    CSSで設定した背景色が反映されずシステム(Windows)設定色になる
StrictでもTransitionalでも試しましたが、同様のようです。
配色設定は「Webページが指定した配色を優先する」になっています。
Fx自体の背景基本色とは別の色に設定してありますが、
適用されているのはWindowsのウィンドウシステム設定色のようです。
特に問題なのがtype="file"の場合で、なまじ文字色はCSSどおり反映されているので、
白地に白字というようになると見えなくなります。
その他のinput要素については背景色が設定されます。
checkbox/radioについては3未満のバージョンでも同様だったと思われますが、
fileについては確実に2と3で動作が異なっています。

419:Name_Not_Found
08/10/23 17:33:11 82vzWFus.net
スレッド要約を拝見したのですが、ieのバグリストで
[4-313]フロートに隣接する要素は親要素との間で上下マージンが相殺されない
ですが、ie6.0の互換モードでは正しく動作しませんか?
(とはいえ上端に1pxの空白は開きますが)


420:Name_Not_Found
08/11/02 01:02:06 .net
もしかしてまとめサイト死んだ?
403なるんだが。

421:Name_Not_Found
08/11/11 21:15:46 .net
あちゃー
そろそろ亡くなるかもしれないから浚っておかないとと思ってたら・・・
俺のバカ


422:Name_Not_Found
08/11/12 00:05:22 .net
ドメイン失効させちゃって今は別の人に取得されている状態なんです,
ごめんなさい. 過去のデータは残っているのでほしい方がいましたら
どこかにアップロードできます.

423:Name_Not_Found
08/11/12 12:57:13 .net
ありゃま
欲しいな
うちでホスティングしてもいいなら適当なドメインとってupするよ
容量どのくらい?

424:Name_Not_Found
08/11/12 14:10:24 .net
あのデータベースは本当に助かってた
きたいあげ

425:Name_Not_Found
08/11/12 16:14:02 .net
うぎゃー!
まとめがまさかまさかの403!!!!!
だれかうpおながいしまつ。。

426:Name_Not_Found
08/11/13 00:37:57 .net
>>423 氏とは別人ですが、
infoseek のまとめサイトが 403 になってしまったのと
他の Wiki 等も機能されていないようだったので
既にドメインを取得して新しいまとめサイトを準備中の者です。
先にこちらでご報告すべきでしたよね・・・ごめんなさい。
infoseek まとめサイトの管理者様にはメールを送りましたが
エラーで戻ってきてしまいました。
>>422
是非データほしいです!よろしくお願いします。

427:Name_Not_Found
08/11/13 00:51:16 .net
ドメイン取らんくていいよ
そしてスペースは放置してても消されないフリーサーバでいいよ
と思ってしまう

428:Name_Not_Found
08/11/13 02:45:03 oUQGtqWL.net
フリーサーバーなんかでやったら余計長続きしないと思うのは俺だけ?
残るには残るが更新されないんじゃあ・・・

429:Name_Not_Found
08/11/13 11:21:56 .net
レンタルwikiでよくね

430:Name_Not_Found
08/11/13 18:10:51 kGx2d91t.net
サーバースペースがガッチリ確保できてたらいいし
ドメインが「バグ辞典スレッドって分かる」みたいなのとってくれてるなら
それにこしたことないんじゃまいか。
やる気ある人にまかせてみよ

431:Name_Not_Found
08/11/13 18:23:24 .net
基本文字情報+数色程度のインデックスカラーな画像
だろうから容量はいらないよね
Wiki借りてまとめWikiという形が無難かな

432:Name_Not_Found
08/11/13 18:53:59 .net
放置じゃなくてちゃんと
メンテナンスしてくれる人がやってほしい。
ついでにいうと、もっと見やすくしてくれ。。

433:Name_Not_Found
08/11/13 19:27:48 .net
バックアップしてなかったオバカな俺みたいなのを助ける、急場凌ぎの為にも、
過去データ取っているなら適当なアプロダに上げてくれると嬉しいな……。
まとめサイトは存続して、メンテナンスされるのであれば、形式はどんなものでも良いと思う。
個人的にはDokuWikiとか好きだけど、
単にWikiというだけだと板人口的にも廃墟になることが有り得そうでちょっと怖い。
ドメインとかを取ってまで運用しよう、と考えるくらいにやる気のある人がいるなら、
個人的には超歓迎。応援してます。

434:422
08/11/13 19:56:31 .net
遅くなって済みません. アップロードしました.
URLリンク(www.csync.net)
infoseekのほうはInternet Archiveからzipのアーカイブが落とせるみたいです.
(気づかずにすごく無駄な作業をしてしまった…)

435:426
08/11/13 21:00:24 .net
>>434
ダウンロードさせていただきました。ありがとうございます!
というわけで、一通りのデータ入力が終わって公開の目処がたちましたら
URL をお知らせにきます。

436:Name_Not_Found
08/11/13 21:07:28 .net
>>434
アップロードありがとう。感謝。
>>435
応援してます。頑張って!


437:Name_Not_Found
08/11/14 03:59:36 .net
>>434
ありがたやありがたやー!

438:Name_Not_Found
08/11/17 19:48:27 .net
なんという団結力

439:Name_Not_Found
08/12/13 15:11:33 rSsSwkVF.net
で, どんな調子?
これか? URLリンク(d.hatena.ne.jp)


440:Name_Not_Found
08/12/24 09:34:23 .net
HTML 5とCSS3が使われだしたらまたバグ辞典が活躍するかも.
しかし,昔みたいにバッドノウハウな回避法でなんとか動かすなんて
ことにならないでほしい.

441:Name_Not_Found
08/12/28 10:44:57 qgnOL99g.net
期待 age.

442:Name_Not_Found
08/12/31 00:37:46 .net
何でIE6とOperaでうまくいくのにFireFoxだとダメなんだよ。
頭きたからページ丸ごと画像にしてやった。
そしたらCSSでシコシコやってたら何日かかるかっていうようなページがすぐ完成。
画像だから角丸なんてアッという間。イメージマップでリンクもちゃんと張れるし
どんなブラウザでも絶対崩れない。
SEO?音声ブラウザ?そんなもん知るか。
どーせ遊びのサイトだからこれで十分だよ。
お前らも画像でやれ。

443:Name_Not_Found
08/12/31 22:32:39 .net
なんだこいつ('A`)

444:Name_Not_Found
09/01/01 17:57:58 .net
更新マンドクセ('A`)

445:Name_Not_Found
09/01/03 17:33:42 .net
        /| /l
 シャキン   ||//ミ
  シャキーン! ||/
      /Oヽ
     ((/∧ヘ))
     /⌒)/つ′
     / /~||
    / / || >>442のレスを見てると、子供のころに戻ったようで。安心する。
   / /_ / /  自分が馬鹿だからなのか、馬鹿になりたいからなのか、
   f /^o^)/   常識とか捨てて適当に生きていきたいと強く思う。
   |   /
   |  /⌒)
   | // /
   丶_| /
   | ||
   ノ (_ 丶
  / ノ し′
 / /
( i
 丶つ

446:Name_Not_Found
09/01/03 22:25:13 .net
Flashレイアウトが存在するんだから画像レイアウトもアリだな。
重要なテキスト部分だけcssで被せればいい。

447:Name_Not_Found
09/01/04 04:15:44 .net
<jien></jien>

448:Name_Not_Found
09/01/05 22:04:44 .net
jien { display: none !important; }

449:Name_Not_Found
09/01/06 02:06:01 .net
>>442
OperaとIEでうまくいってFxでうまくいかないってどんなデザインだよw
もうちょっと釣りの勉強してこい
>>448
!importantw

450:Name_Not_Found
09/01/22 12:24:57 .net
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 7
【症状】兄要素に文字列やbrタグが入ってるときに、
font-style: italic;を指定した要素にmargin-topを指定すると、
親要素の背景色が上から150pxのところで消える。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"URLリンク(www.w3.org)">
<html xmlns="URLリンク(www.w3.org)" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
</head>
<body style="margin: 0px;">
<div style="background-color:#fcc;">
<div>CSS Rendering Test</div>
<div style="margin-top:200px;font-style:italic;">CSS Rendering Test</div>
</div>
</body>
</html>
表示させた後、ウインドウサイズを変更したり最小化最大化を行う必要があります。

451:Name_Not_Found
09/01/22 12:47:45 .net
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 7
【症状】親要素がインライン要素のとき子要素にdisplay: list-item;を指定すると、
親要素の背景色が浮き出る。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"URLリンク(www.w3.org)">
<html xmlns="URLリンク(www.w3.org)" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
</head>
<body style="margin: 0px;">
<span style="background-color:#fcc; display:inline;">
<span style="background-color:#ccf; display:list-item;">CSS Rendering Test</span>
</span>
</body>
</html>
inlineの子要素にlist-itemが来ちゃってるので、
正当なバグといえるか分からないですが。

452:Name_Not_Found
09/01/22 13:20:25 .net
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 8 beta 2(IETester)
【症状】親ブロック要素に背景色が指定してあるとき、
子インライン要素にoutlineを指定すると、何も現れない。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"URLリンク(www.w3.org)">
<html xmlns="URLリンク(www.w3.org)" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE8" />
<title>CSS Rendering Test No.04887</title>
</head>
<body style="margin: 0px;">
<div style="background-color:#fcc;">
<span style="outline: 10px solid #000;">CSS Rendering Test</span>
</div>
</body>
</html>
親ブロック要素にmarginを指定すると回避できます。
このバグは、marginがデフォルト設定してないdiv要素やaddress要素だと発生し、
p要素やblockquote要素だと発生しません。

453:momo
09/03/04 11:55:41 .net
【OS】Mac OS 10.5.6 【ブラウザ】Safari 3.2.1 【症状】10列のテーブル。一番左端のTDにだけ、border-top: 1pxを指定。 それ以外のTDにはborderをつけたくないのに、全て反映されてしまう。 ちなみに、ほかのブラウザでは問題無しです。
どなたか、詳しい方が居たら、教えて下さい(><;)ぉねがいします

454:Name_Not_Found
09/03/04 12:14:45 .net
>>452
IE8 RC1 (build 18372) WinXP SP3 では Fix されてるよ

455:Name_Not_Found
09/03/04 12:23:12 IeLHLW2u.net
〉〉453
そうそう、それわたしも前にはまった(ノ△T) 教えてジョブズ!

456:Name_Not_Found
09/03/04 13:53:42 .net
>>453
実証コードキボン
手元でてきとーに作ってみたけど、これで意図どおり?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"URLリンク(www.w3.org)">
<html xmlns="URLリンク(www.w3.org)" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>table > tbody > tr > td:first-child のみ border-top:1px 指定</title>
</head>
<body>
<table border="1" summary="td テスト">
<tbody>
<tr>
<td style="border-top:1px solid #f00">1</td>
<td>2</td><td>3</td><td>4</td><td>5</td>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</tbody>
</table>
</body>
</html>

457:453 momo
09/03/04 20:44:10 .net
>>456さん
早々にありがとぅござぃます!!ホントですね、このソースなら上手く行きますね。
参考にして勉強します!ありがとうございました☆

458:Name_Not_Found
09/03/04 21:57:35 .net
>>457
どんな XHTML 文書だったのかがすげー気になる・・・

459:457 さくら
09/03/04 23:38:21 IeLHLW2u.net
>>456
なるほど~ 一つ目のtdにborder-topを設定すると良かったんですね!
参考になりました。私も今度も試してみます!o(^-^)o

460:455 さくら
09/03/04 23:43:09 .net
457さん、すみません間違えました。 私は455でした…(>_<)

461:momo
09/03/05 02:02:39 .net
>>460
きにしないでくださぃ☆

462:Name_Not_Found
09/03/05 14:04:43 .net
確かにどうやって失敗したのか書いてほしいな

463:Name_Not_Found
09/03/06 01:02:26 .net
>>462
同意
ここはバグ辞典スレなんだから、情報があるに越したことはない

464:450-452
09/03/06 02:25:56 .net
>>454
IE8 RC1 (build 18372),WinVista Home Premium / Bussinessにて、こちらでも確認しました。

465:Name_Not_Found
09/03/14 11:42:41 o8JxV32E.net
バグか?!
URLリンク(hp.vector.co.jp)

補足:フォントサイズはユーザにまかせよう って見出し付いてる本文2行目
「指定すべきではありません。特定の環境では文字サイズの変更を面倒にさせるかもしれません。文書著者はユーザ設定の基本フォントサイズに対して相対」
の35文字目の 「る」が動く。
この一行 左からポインタでくくって 文字反転していくと、
左から29文字目の 「を」を くくった瞬間に 「る」が左に1px動くのは
仕様ですか?
ちなみに動作確認ブラウザ Firefox
発見時間 2009/03/14 am11:39

466:Name_Not_Found
09/04/13 20:11:28 .net
テンプレの
URLリンク(cssbug.at.infoseek.co.jp)
が403で開けないんだけど自分だけ?

467:Name_Not_Found
09/04/18 12:22:36 y+hIu1SM.net
バグじゃなくて正常な動作かも分からんですが。
OS:WinXP SP3
ブラウザ:IE8
現象:overflow:autoでスクロールバーが表示されない。
状況:HTML4.01Strict、IE8標準表示モード
大雑把なソース:
<div style="overflow:auto;width:800px;height:18px;">
  <div style="width:1200px;height:1px;"> </div>
</div>
IE8互換表示モード、Firefox3、Opera9.6、Safari3、Google Chrome1.0では
水平スクロールバーが表示されるものの、IE8標準表示モードのみ表示されず。
対処:親側のdivをoverflow:autoからoverflow-x:scrollに変更したところ、IE8標準表示モードでも表示された。
業務系のwebアプリで、横スクロールするテーブルの上にもスクロールバーを付けてくれと
言われたもんで、上に空っぽのスクロールバーを作ってonscrollで連動させようとしたら発生しますた。

468:Name_Not_Found
09/04/19 17:57:08 .net
IE8ってまだベータだろうが

469:Name_Not_Found
09/04/19 18:31:06 .net
楽天もヤフーも使えないIE8、役にたたなすぎる

470:Name_Not_Found
09/04/19 21:30:06 .net
IE8 正式版が出てからもう一ヶ月近くになりますね。
皆様いかがおすごしでしょうか。

471:Name_Not_Found
09/04/19 23:29:17 .net
正式版になってたのか・・・

472:Name_Not_Found
09/04/20 19:03:25 .net
うちの会社のシステム担当がIE7自動更新をブロックしてたのが
つい最近だから、IE8なんて遠い未来の話だと思ってた。

473:Name_Not_Found
09/04/30 17:43:51 .net
で、結局CSSバグ辞典はどうなったん?

474:Name_Not_Found
09/04/30 18:09:08 .net
てか>>435の人はアップしたんだろうか?
もしアレだったら>>434のアップロードしようか?

475:473=474
09/04/30 19:01:27 .net
URLリンク(cssbug.xii.jp)
とりあえずやってみた。誰かと被ってたorまずかったらスマソ。そのときは消します。
需要あればいいんだが…。

476:Name_Not_Found
09/04/30 19:31:53 .net
>>475
GJ

477: ◆nZyEXz4sno
09/05/01 10:31:34 .net
とりっぷてすつ

478:Name_Not_Found
09/05/01 12:23:02 .net
>>435です。
かなり遅くなってしまいましたが公開しました。
URLリンク(css-bug.jp)
>>475氏と思いっきり被ってしまって涙目ですごめんなさい。

479:Name_Not_Found
09/05/01 12:46:08 .net
>>478
おつです!
本家(?)が来たようなのでサイトたたみますかw
これからは>>478さんにおまかせします~。

480:Name_Not_Found
09/05/01 12:52:55 .net
ふと思ったけどIE5.xのバグってどうやって再現させるんだ?
ほとんどIE6以降だろうし。

481:Name_Not_Found
09/05/01 19:45:14 .net
IEtester

482:Name_Not_Found
09/05/04 00:24:40 .net
URLリンク(www.google.com)
Googleページのリンク2個だけがリンク切れしてるかと思って
ソース見たらカーソルをcursor: text; にしている。
<a href="" style="color: rgb(0, 0, 204); cursor: text; ">利用ガイド</a>
これは、何かのバグ対策なの? 何の意味があるの?

483:Name_Not_Found
09/05/04 02:10:09 .net
>>478
自分も作ってたけど、どう見てもこっちの方が出来がいいな
>>475も合わせておつ

484:Name_Not_Found
09/05/04 12:27:47 .net
>>478
乙です
が、IEとの比較にNetscape7.1標準モードってのはさすがにもうそろそろやめませんか…www

485:Name_Not_Found
09/05/04 22:54:34 .net
しかも、MTだから管理者しか編集できないな
スレッド第4版のレス314以降も対応して欲しいです

486:Name_Not_Found
09/05/05 13:01:29 .net
wikiの方がいいな・・・
更新頑張ってくれるならいいんだけどさ

487:478
09/05/05 13:23:10 .net
>>484
以前有志の方が制作されたバグ辞典スレッドまとめサイトの内容をそのまま移植したので古い内容のままになっています。
>>485
ぼちぼちがんばります
>>486
wikiマスターが身近におらずMTになってしまいました。
おすすめのwikiなどありますでしょうか。

488:Name_Not_Found
09/05/20 00:40:42 fYqozEmw.net
ガイシュツ?
OS:WinXP SP3
ブラウザ:Firefox3.0.5
現象:overflow-y:scrollを指定したエリアの高さが34px以下にならない。
簡単なソース:
(HTML4.01Strict)
<table style="width:200px;">
 <tr>
  <th>ほげ</th><th>ほげ</th><th>ほげ</th>
 </tr>
<table>
<div style="width:217px;overflow-x:auto;overflow-y:scroll;">
 <table style="width:200px;">
  <tr>
   <td>ぴよ</td><td>ぴよ</td><td>ぴよ</td>
  </tr>
 <table>
</div>
<table style="width:200px;">
 <tr>
  <th>ほげ</th><th>ほげ</th><th>ほげ</th>
 </tr>
<table>
いわゆるヘッダとフッタが固定されたスクロールテーブルを作ろうとしたところ、
IE8、Opera9.6、GoogleChromeなどではスクロールバーの上下に付いている三角ボタンが
縮小表示されて3つのテーブルが密着するのに、Firefoxだけ高さ17pxのいつもの三角ボタンが
レンダリングされるため、真ん中のスクロールエリアが縮んでくれずに隙間ができる。

489:Name_Not_Found
09/05/20 00:44:35 .net
あ、申し訳ない。真ん中のdivにheight:auto;max-height:100px;を指定してる状態で。

490:Name_Not_Found
09/05/20 00:45:17 .net
最小単位のソースで出しましょう

491:Name_Not_Found
09/05/21 23:10:36 .net
ああすまん。
普通に<div style="height:auto;max-height:100px;width:217px;overflow-x:auto;overflow-y:scroll;"></div>だけでも良いわな。

492:Name_Not_Found
09/05/21 23:29:57 .net
>>491
高さを指定してやればOK

493:Name_Not_Found
09/05/22 18:52:23 z1i3aaj8.net
【環境】WinVista IE8
【現象】和文OpenTypeフォントを指定すると、印刷時に行の折り返しなどで乱れが起きる。
下記のソースで実験した。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css"> BODY {font-family:"小塚明朝 Pr6N R";} </style>
<body>
<p>あいうえおかきくけこ、「アイウエオ」一二三四五六七八九〇。あいうえおかきくけこ、「アイウエオ」一二三四五六七八九〇。……※以下十回繰り返し</p>
</body></html>
これを印刷プレビューで見ると、カギ括弧とアが重なってるし、右端が不揃になるし、また
 ……あいうえおかきくけこ
 きくけこ、「アイウエオ」……
と、折り返した後でテキストに無い重複を勝手にしたりする。
FireFox3だと問題無し。
実験したOTFの小塚明朝は、Adobe Readerを入れると
C:\Program Files\Adobe\Reader 9.0\Resource\CIDFont
にある。
他に"ヒラギノ明朝 ProN W3","ヒラギノ明朝 Pro W3","FOT-筑紫明朝 Pro LB"で試したが結果は同じ。
なぜか市販でないフリー・フォントの"みかちゃん"ではこの不具合は起きなかった。
また不思議なことに、DOCTYPE宣言をTransitionalでなく
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
とすると、この印刷時の不具合は生じなくなる。下記でもよし。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "URLリンク(www.w3.org)">
<html xmlns="URLリンク(www.w3.org)" xml:lang="ja">
cf.OpenTypeフォントを用いて2バイト文字を表示することができない
URLリンク(css-bug.jp)
URLリンク(page.freett.com)

494:Name_Not_Found
09/05/22 18:57:08 .net
>>493追記
問題が起きるのは印刷時(印刷プレビュー)だけで、ブラウザ表示だけだと支障無し。

495:Name_Not_Found
09/05/22 23:22:44 .net
ぶっちゃけフォントの問題までカバーする必要は・・・・

496:Name_Not_Found
09/05/23 00:25:34 .net
フォントの所為ではない。FireFoxならOKってことは、WinIEの問題でしょ。

497:Name_Not_Found
09/05/23 00:34:25 .net
>>492
うーむ、でも高さを指定するとmax-heightを指定した意味が……。

498:Name_Not_Found
09/05/23 05:10:06 .net
「自分がそうしたくない」ことをバグにしたがる奴が増えてんな・・・

499:Name_Not_Found
09/05/23 05:28:11 .net
>>493はWin2000・IE6でも再現した。試したOTFは「ヒラギノ明朝 Pro W3」。

500:Name_Not_Found
09/05/25 09:28:38 .net
>>499
IE の仕様かもね
印刷まわりは鬼門

501:Name_Not_Found
09/05/25 23:39:07 .net
仕様ねえ。互換モードでなければ正常印刷ってのがワケわからんな。

502:Name_Not_Found
09/05/27 00:37:38 .net
>>487
DokuWiki
別にMTでもいいんだけど、更新速度やらまとめリストやら考えると、Wikiの方が利便性良くないかな。
二重運営でも大して手間かからないかもしれないし。
Wikiでも管理者以外更新しなけりゃ意味ないんだけどね。

503:Name_Not_Found
09/05/27 04:14:47 .net
ここ最近の流れを見ていると
バグでないものでも更新しそうな人が多そうでgkbr

504:Name_Not_Found
09/05/31 00:28:07 .net
ファイアフォックスなんていう重たいだけの糞ブラウザを使ってる奴が悪い。

505:Name_Not_Found
09/06/10 10:53:29 .net
新まとめサイトだけどさ
一番上のIE8、IE7クリックしたときに
「現在、IE*のバグに関するデータが登録されていません」
みたいなコメントつけておいて欲しい
必然的に「バグ一覧」クリックしてしまうけど
あれはIE全てのバグ一覧なんでしょ?
とりあえず、それだけ要望です

506:Name_Not_Found
09/06/10 11:00:35 .net
ついでに、IE8のCSS に関する記事
IE8で修正されたCSSとHTMLおよびXHTML関連のバグ - builder by ZDNet Japan
URLリンク(builder.japan.zdnet.com)

507:Name_Not_Found
09/06/11 03:43:42 .net
>>505
css-bug.jpの者です、ご指摘ありがとうございます
バグが登録されていないのか不具合なのか紛らわしいですね
後ほどコメントを追加しておきます
バグ一覧はIEに限らず登録されているすべてのバグ一覧となっています
Wikiにしてみんなで編集できるようにしてほしいというご意見をいただき
DokuWikiとMediaWikiをダウンロードしたところで時が止まっています
スレ4レス315以降に報告されたバグをまとめる作業も進んでおりません
手際の悪い管理人で申し訳ないです

508:Name_Not_Found
09/06/22 19:00:57 .net
IE8 と Firefox3 で起きている拡大縮小に関するバグ
URLリンク(blog.webcreativepark.net)
IE8 でa要素内に画像があり、背景を指定した時に位置がずれる
URLリンク(css-happylife.com)

509:Name_Not_Found
09/06/22 19:03:40 .net
連投スマソ
>>507
管理人さん、何か手伝えることはないですか?
バグの情報を事前に html で書き起こして、まとめるくらいなら
できます。

510:zQYnIYjLd
09/06/24 02:51:06 .net
into the cigar likethe blood are open.<a href=www.youtube.com/orderviagraonline1>order viagra online</a>the penis; in thisarteries going topenis fast. The
[url=www.youtube.com/orderviagraonline1]order viagra here[/url]then gets trapped instiffens. That means

511:Name_Not_Found
09/06/24 03:28:49 .net
>>509
・個人サイト張り付けるな
・バグの前にwikiを調べてこい

512:Name_Not_Found
09/06/30 23:18:54 .net
IE8で3つぐらいの入れ子にしたリストで
リストマークがおかしくなるのですが
報告はこちらでもよろしいのでしょうか?

513:Name_Not_Found
09/07/01 00:32:00 .net
IETesterのバグみたいです
すみませんでした

514:Name_Not_Found
09/07/06 12:43:24 .net
MS純正IE8でもう一度確認したけど
やはりリストマークがおかしくなる
とりあえず比較画像
URLリンク(nagamochi.info)
発生条件が確定してないけど
IE8だけおかしくて、IE7以下は問題ない

515:Name_Not_Found
09/07/06 13:31:06 .net
おかしいっていうかマーカーの描画ってそこまで厳密に決められた仕様じゃないから
8のデカいスクウェアでも「そうなんです」と言われたら「そうなんですか」と納得するしかないような

516:Name_Not_Found
09/07/06 16:24:01 .net
>>514
テストページうp 希望
フォント絡みの問題かもしれない
Microsoft Connectに報告あったかもしれないからちょっと探してくる
URLリンク(connect.microsoft.com)


517:516
09/07/06 16:34:31 .net
>>514
なんかそれっぽいの見つけた
URLリンク(connect.microsoft.com)
テストケース:
URLリンク(connect.microsoft.com)
IE7 Standards Mode と IE8 Standards Mode で見比べるとわかるが、やっぱフォント絡みだった
これと同一の現象?

518:516
09/07/06 16:35:36 .net
テストケースの URL 間違えた
正しくはこっち:
URLリンク(www.rollerorgans.com)


519:Name_Not_Found
09/08/14 13:01:45 sSYDhfE7.net
んー、つまりIE8でlist-style-type : square;にするとマーカーが大きく表示されるのは仕様なのかな?
よくわからないけど、フォントの指定によって改善される?
ユニコードキャラクタが云々って書いてるけど、よくわかんないや。
気になったのでageで。

520:Name_Not_Found
09/08/14 20:53:22 .net
>>519
URLリンク(connect.microsoft.com)
にはおおむね次のようなことが書いてあるみたい:
・CSS 仕様ではビュレットに「この Unicode 文字使うように」と書いてある(註1)
・IE8 は U+25A0(■) → U+25AA → U+25FC → U+25FE の順に見つかったものを使う
・Courier フォントには Unicode 文字が含まれてない
・フォールバックして U+25A0 があるフォントを使う(?)
つまるところ:
・マーカーの表示は li 要素が継承した font-family のフォントに依存
・前述した Unicode フォントがあるかどうかで大きさが決まる
ってことらしい
註1:
CSS List Module Level 3 のことらしい
URLリンク(dev.w3.org)


521:Name_Not_Found
09/08/16 22:38:23 .net
なるほど。
Verdanaが好きでいつも使ってるけど、それだと■がでかくなっちゃうんだよな。
ただCSSの仕様上これが正しいって言われると我慢するしかないか・・・

522:Name_Not_Found
09/08/31 16:16:44 .net
>>39 と同じと思われる現象が Windows Safari 4.0.3 で出ました。
回避方法は見付かっていないのでしょうか?

523:competition
09/09/04 19:50:29 0eS9ANId.net
デザイナーのみなさん、現在CSS Creatorでは、サイトLogoの competitionを行っています。
興味のある方はRead the Briefからどうぞ。
URLリンク(99designs.com)


524:Name_Not_Found
09/09/05 19:29:16 .net
relative要素がある場合、bodyにもrelativeを設定しないと
IE系でズームアップ・ダウンした際に正常動作しない

525:Name_Not_Found
09/09/05 23:47:01 .net
>>524
それってウィンドウリサイズ時にrelative要素の配置がおかしくなる問題と一緒?

526:UwxNeMFxGMMdSsLCd
09/10/23 22:42:24 .net
Base on that and your blog posts, I hope to catch him on tour. ,

527:Name_Not_Found
10/02/05 00:02:30 .net
【Google Chrome 4.0】
ruby要素が親ブロック要素へのインデント指定を反映する
URLリンク(www.google.com)
ruby要素・rb要素はインライン要素、
だから親ブロック要素に適用されるtext-indentプロパティーは継承しない筈だが、
ルビ附き文字の前にインデント指定した分だけ空白ができる。

p {text-indent:1em;}
<p>対応ブラウザでは<RUBY><RB>ルビ</RB><RP>(</RP><RT>ふりがな</RT><RP>)</RP></RUBY>が表示される。</p>
「対応ブラウザでは  ルビが表示される。」とルビ附き文字の前が無意味に一字空きになる。

528:Name_Not_Found
10/02/05 00:13:44 .net
【Google Chrome 4.0】
インライン・テーブルにしたruby要素内のrb要素・rt要素を
displayプロパティーで表と同様に表示させようとすると、文字列が消えて見えなくなる。
URLリンク(www.akatsukinishisu.net)
URLリンク(fswiki.org)
上記にある通り、
rb要素(ルビベース)にはdisplay:table-row-group;を、
rt要素(ルビテキスト)にはdisplay:table-header-group;をスタイル指定してある場合。
Chrome 4では、rb要素もrt要素もなぜかdisplay:none;状態になって不可視になる。
これを回避するには、
ruby { display: inline; }
rt { display: block; }
rb { display: block; }
をChrome4に適用させればルビ表示は元に戻るみたい。
但しその場合Safariでルビ表示にならなくなるが。

529:Name_Not_Found
10/03/17 11:50:06 a//ADYW9.net
Opera10.5x
vertical-align text-bottomが、他のブラウザと違って位置がずれる。
Opera10.1x
画像より小さい、line-heightに設定して、その画像にvertical-align bottomを設定すると、正常に表示されない。(他のブラウザと挙動が違う。)

530:Name_Not_Found
10/03/25 18:03:48 .net
Opera10.51
Opara10のみ適用させるための属性セレクタ・ハックが利用できなくなった。
下記はOpera10.50までOperaのみ有効だったが、ver.10.51ではOperaでもスタイル指定は無効になる。
html[lang*=""] body:last-child p {color:red;}
cf. URLリンク(www.atmarkit.co.jp)
代用として、Opera9.51ハックと呼ばれるものはまだ有効。
p:not(\*|*) {color: red;}
cf. URLリンク(d.hatena.ne.jp)

531:Name_Not_Found
10/04/07 21:06:39 +rQZcCMQ.net
そういえば、CSSバグ辞典のwikiは、誰か引き継いんだんですか?

532:Name_Not_Found
10/04/26 18:50:10 .net
【OS】Windows7 Home Prenium 64bit版
【ブラウザ】Firefox3.6.3
【ソース】
<CSS>
body {
background:url(p001.png) #ff0;}
select#s1 {
background:url(002.png);}
<HTML>
<form action="#">
<fieldset>
<select id="s1">
<option>1</option>
<option>2</option>
</select>
<select id="s2">
<option>1</option>
<option>2</option>
</select>
</fieldset>
</form>
【症状】
selectに背景画像を設定しない場合、システム背景色が適応される。
しかしselectのみに背景画像を指定しoptionは無指定すると、
selectを開いたときのoptionの背景が何故かルート要素の背景色
(上記例の場合、001.pngですらなく#f00)になる。
また、select#1に背景画像と共にbackground:url(002.png) #f00;のような背景色の指定をした場合、
selectを開く前からselectの背景が何故かselectの背景色(この場合#f00)になる。
(後者のこの症状についてはOpera10.51でも同様だったので、もしかして仕様?)

533:Name_Not_Found
10/04/27 21:48:21 .net
IE8の標準準拠モード
a要素の中にimg要素があると、
a要素に付けたactive疑似クラスの挙動がおかしい。
<a><img src="hoge.jpg"></a>
a{
display:block;
padding:5px;
}
a:active{
background:red;
}
a要素をクリックした場合は、マウスボタンを押さえている間
active疑似クラスの設定が反映されて背景色が赤くなるはずだが
img要素の上でクリックした場合は、無反応。a要素のpadding領域で
クリックした場合は、正常に背景色が赤く変わる。
ただしリンクとしての動作はいずれの箇所をクリックしても正常。
また、レンダリングモードがIE7なら指示通りの挙動になる。

534:Name_Not_Found
10/04/27 22:04:58 .net

>519
Ie9以外はbulletを文字でなくて絵でかいてるよ


535:Name_Not_Found
10/09/20 11:36:47 .net
Opera10.62
inline-block、border、min-widthを同時に指定すると幅の計算がおかしくなる。
Firefox、Chrome、Safari、IEでは改行されないけど、Opera10.62だと改行される。
Opera9.52では改行されなかった。
<style>
ul, li {
display: inline-block;
}
ul {
background-color: red;
}
li {
border: 1px solid #000000;
min-width: 4em;
}
</style>
<ul>
<li>ああああ</li>
<li>いいい</li>
<li>ううううう</li>
</ul>


536:Name_Not_Found
11/01/24 01:35:34 .net
Opera11
従来のOpera用CSSハックが効かなくなった。

537:Name_Not_Found
12/04/19 17:14:30.59 .net
IE 6, 7で、a要素の中に別な要素があってそいつがfloatしてると、cursorがpointerじゃなくtextになる
<a href=".">
<span style="float: left;">
ここのカーソルが……
</span>
</a>

538:Name_Not_Found
12/09/15 18:13:20.70 .net
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね


539:Name_Not_Found
12/11/07 16:57:05.80 .net
久々に見に来たら
3年前の俺のレスからほとんど進んでないとは・・・
需要なくなった感じだな


540:Name_Not_Found
12/12/04 13:23:48.19 .net
css-bug.jp 活動終了ですか。
だとしたら残念ですが、事情あっての事でしょう。
お世話になりました、ありがとうございました。

541:Name_Not_Found
12/12/07 23:39:49.39 hGmqQyRw.net
RUN
URLリンク(www.youtube.com)

542:Name_Not_Found
12/12/13 23:27:20.83 mmAfCJBg.net
flashの上にz-indexを使って画像を重ねたのですが
アンドロイドだけ正しく表示されず、flashが上にきてしまいます。
下記記述をしましたが解決されません。
<param name="wmode" value="transparent" />
<embed src="main.swf" wmode="transparent" />
なにか良い解決方法はないでしょうか。

543:Name_Not_Found
12/12/18 17:33:54.01 .net
URLリンク(answers.microsoft.com)
ルビ(rb要素)を含む文書を標準モードで縦書き表示させたら、IE9ではひどいことになる、ト。
URLリンク(f.hatena.ne.jp)

544:Name_Not_Found
13/10/20 18:24:37.67 .net
IE10で確認。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE10">
.tategaki {
writing-mode:vertical-rl;
writing-mode:tb-rl; /*For under IE8*/
-ms-writing-mode:tb-rl;/*IE9互換だと無効*/
height:25%;
width:100%;
}
<div class="tategaki" id="COL1">
<p>ここに一段目の縦書きのテキストが入ります。</p>
</div>
<div class="tategaki" id="COL2">
<p>ここは二段目になります。</p>
</div>
width:100%;を入れないと、縦書き表示なのに画面左に行が寄って、段の右から始まらない。
しかしwidthを指定すると、heightの%指定が画面表示領域横幅に対する割合になるバグが生じた。

545:Name_Not_Found
13/10/23 23:53:07.57 .net
directionプロパティを指定した要素に背景色を指定すると文字テキストが消える。
IE10strict/Quirksで確認。
span {
background:#ccc;
color:#000;
direction:rtl;
unicode-bidi:bidi-override;
}
<p>なぜか<span>この文字テキスト</span>が消える。</p>
<p><span>これだとカーソルでドラッグ選択もできなくなる。</span></p>

546:Name_Not_Found
13/10/24 04:11:12.85 .net
だいたいdirectionプロパティって、日本語組版だと利用する場面が無くない?
URLリンク(blog.imagedrive.jp)
古くから扁額とかに見られた右横書きだって、あれは一字一行の縦書きなのであって、複数行にわたることないし。

547:Name_Not_Found
13/10/25 07:14:36.32 .net
Internet Explorer 5.5 における縦書きレイアウトの使用
URLリンク(msdn.microsoft.com)(v=vs.85).aspx
BODY要素は常に水平方向にレイアウトされ、ブラウザは常にマークアップ内の
最上位要素の原点をビューポートの開始点として整列します。
上記の例では、この原点がページの左上隅になります。読み込んだページに
テキストが表示されるようにするには、ページ本体を右にスクロールする必要があります。
これを回避するには、BODY 要素の direction プロパティを RTL (右から左) に設定し、
グローバルな DIV 要素の direction プロパティを LTR (左から右) に戻します。
この結果、原点は右上隅になります。

548:Name_Not_Found
13/10/26 01:26:28.34 .net
取り消し線(del要素等)の色が一定しない【Safari5~/Google Chrome 30(Webkit系)】
a:link, a:hover, a:visited {color:blue;}
del {
text-decoration:line-through;
color:gray;
}
<p><del>取り消し<a href="link.htm">リンク</a>抹消<del>通常テキスト</p>
上記の例をWinIE10・Firefox24・Opera12で見ると、
A要素部分にリンク文字色(青色)の上から灰色の取り消し線が引かれる。
しかし、Safari5.1.7やGoogle Chrome 30やOpera17等のWebkit系のみ挙動が異なる。
A要素の部分は文字色と同色で取り消し線が引かれる。
かつて似た例に、親要素のtext-decorationの効果を子孫要素で取り消せない事例があった。
これは取り消せる方がバグであった。
URLリンク(pentan.info)
URLリンク(www.mozilla.gr.jp)
すると解釈としては、Webkit系だけが正しく解釈してるのか?

549:Name_Not_Found
13/10/27 02:41:55.84 .net
word-breakがブロックレベル要素以外で効かない
URLリンク(pentan.info)
word-break:break-all;をインライン要素に指定しても、
半角英数字から成る長い単語(URLとかソースコードも)は次行に送られ、右端で改行してくれないことがある。
横幅によっては文字列中のハイフン「-」の位置で改行すればいいのに、してくれなかったりとか。
.break {word-break:break-all;}
p {width:38em;}
<p>文章中に出てくるURLとか、長く連続した英数字(→<span class="break">LongLongLongVeryLongWordByRomanAlphabet</span>)にだけスタイルを適用させたいのだけど……。</p>
親ブロックに指定せずともきっちり折り返して行の右端が揃ったのは、下記だけだった。
Google Chrome 30.0.1599.101 m
Safari5.1.7
IE10は「→」の右で改行、Firefox24・Opara12は「英数字」の右で改行した。

550:Name_Not_Found
13/10/30 03:23:53.30 .net
Windows版Safari5.1.7で確認。
Webkit独自実装の縦書きプロパティーの-webkit-writing-mode:vertical-rl;
これの適用時、DOCTYPEスイッチがQuirksモードだと、
width:100%;みたいな%指定の横幅が短くなって表示が乱れる。
中でどんな計算しとるのかは解らんかった。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
body {
direction:rtl; unicode-bidi:bidi-override;
margin:0;
}
.tategaki {
direction:ltr; unicode-bidi:bidi-override;
writing-mode:vertical-rl;
writing-mode:tb-rl; /*For under IE8*/
-webkit-writing-mode:vertical-rl;
overflow-x:auto;
height:50%;
width:95%;
}
<div class="tategaki" id="COL1">
<p>ここに一段目の縦書きのテキストが入ります。長文</p>
<p>以下繰り返しで横スクロールが生じるだけの長文にする。</p>
</div>
<div class="tategaki" id="COL2">
<p>ここは二段目になります。</p>
</div>
逆に、標準モードでもwidthが%指定だと問題が起きる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "URLリンク(www.w3.org)
多段組で縦書きボックスが複数ある場合、中身が長文でも各縦書き領域に横スクロールバーが出ない。表示領域全体に対してしか横スクロールできない。
overflow-x:auto;でなくoverflow-x:scroll;と指定してすら、
バーは表示されてもスクロールのつまみが出てこないから動かせないって理不尽な状態になる。

551:Name_Not_Found
13/10/31 17:27:10.18 .net
Google Chrome30
折り返しを抑制した文字列を含むテーブルが横方向にはみ出すことがある。
例)
nowrapを指定してないA要素以外の文字列で折り返す筈だが……?
navbar1 a:link, .navbar1 a:visited {white-space:nowrap;}
.navbar1, .navbar1 table {width:80%;}
<div class="navbar1">
<table width="100%" border="1"><tr>
<td>
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/<a
href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>
</td>
</tr></table>
</div>
但し、HTMLソースでの改行の仕方を変更すると、nowrapを指定してない文字列でちゃんと折り返す。
<td>
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>/
<a href="./index.html">折り返し抑制折り返し抑制折り返し抑制</a>
</td>
cf. 「テーブルがはみ出しても横スクロールバーが表示されない」
URLリンク(pentan.info)

552:551
13/10/31 17:58:13.75 .net
類似現象はむしろこっちか。
「表セル内要素への折り返し禁止指定がセル自体に作用する」
URLリンク(pentan.info)
あと、折り返し禁止してない文字列「/」を2文字にすると、
ちゃんと折り返して、テーブルが横に伸びる現象を回避できる。

553:551
13/10/31 18:22:17.29 .net
これも該当か。
「インライン要素への折り返し禁止指定が当該要素の外のブロックに作用する」
URLリンク(pentan.info)
>折り返しが行われるべき場所に空白類文字を挿入するとこのバグを回避できます。
何年も前のNetsacape7.0で発生してその後修正されたバグが、今になってChromeに再来するとは……。

554:Name_Not_Found
13/11/04 20:26:07.56 .net
IE10/Chrome30/Firefox24/Safari5.1.7/Opera12
リンク疑似クラスで、font-weightプロパティーの上書き指定を反映しない。
A:link {
color:red;
font-weight:900;/* bolderでも可 */
}
A:visited {
color:blue;
font-weight:100 !important;/* lighterかnormalでも可 */
}
<p>未訪問と既訪問済みを比較→
<a href="./001.html">未訪問リンク</a>/
<a href="./index.html">既訪問リンク</a>
</p>
リンク文字列の色は変ったのに、字の太さは太くなったまま変化しない。
font-weightに限っては擬似クラスA:linkでの指定が強くて、A:visitedでは上書きできない罠。
これは全ブラウザで一致するみたいなので、バグでなく仕様なのか?
と思ったが、該当する記述は仕様書に見当らなかった。
URLリンク(www.asahi-net.or.jp)
URLリンク(momdo.s35.xrea.com)
URLリンク(momdo.s35.xrea.com)

555:Name_Not_Found
13/11/04 20:30:19.86 .net
>>554
>IE10/Chrome30/Firefox24/Safari5.1.7/Opera12
>これは全ブラウザで一致するみたいなので
間違った。
Opera12.16だけは、a:visitedでのfont-weightの上書き指定が有効だった。

556:Name_Not_Found
13/11/04 20:31:12.61 .net
それは仕様。
URLリンク(www.w3.org)
Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.
の範囲内の動作。

557:Name_Not_Found
13/11/04 21:12:19.47 .net
>>556
邦訳だと、ここだね。
URLリンク(standards.mitsue.co.jp)
Note: スタイルシート製作者は :link, :visited 擬似クラスを悪用し、ユーザーがどのサイトにアクセスしたかをそのユーザーの承諾なしに知ることができる。
このため、UA はすべてのリンクを未訪問として扱う、もしくはそれぞれのリンクを表示する際ユーザーのプライバシーに配慮した方法を実装するなどの方法をとることができる。

でも、それなら、色は変化するのに太さは変化しないって、整合性がないよ。
やっぱちょっと異常な挙動ではある。

558:Name_Not_Found
13/11/14 07:15:01.69 .net
Chrome 30.0.1599.101 m / Safari5.1.7
>>550のソースで、縦書き段内の横スクロールをした場合。
その文中にA要素があると、a:hoverをセレクタにした指定が効かなくなる。
横スクロールを動かさない初期状態だと、リンク・アンカーにカーソル乗せれば指定通りに背景色等が変化した。
.tategakiへのwidth指定でoverflowが発生するとこのバグが生じる。
普通の横書きでは段落ボックス内でoverflowの縦スクロールを動かしても、問題無し。

559:Name_Not_Found
13/11/15 10:14:25.03 .net
>>543
IE11も縦書き指定でルビありだと表示が乱れるとさ。
URLリンク(togetter.com)
URLリンク(answers.microsoft.com)
URLリンク(social.msdn.microsoft.com)
縦組みに限っては、IE6までが一番マシだったかも。

560:Name_Not_Found
13/11/19 22:53:03.13 .net
Windows8.1+IE11
font-family:"欧文フォント","和文フォント",sans-serif;とすると、和文フォントの指定が無視される。
body {font-family:"Verdana","MS Pゴシック",sans-serif;}
→MS Pゴシックが無視され、sans-serifのメイリオで表示される。
Verdanaを後ろにする(もちろん半角英数はVerdanaでなくなる)か、
sans-serifを取り除くとMS Pゴシックが反映される。

561:Name_Not_Found
13/11/20 00:19:11.56 .net
>>560
和文フォント名を"MS Gothic"とかアルファベット表記にしたらどうなります?
Cf. URLリンク(blog.sakurachiro.com)

562:Name_Not_Found
13/11/20 22:30:07.69 .net
Google Chrome 31.0.1650.57m
Safari5.1.7
list-style-image指定時に画像非表示にするとリストマーカーまで消える。
<ul style="list-style-image:url(mark.jpg); list-style-type:square;">
<li>AAA</li>
<li>BBB</li>
</ul>
代替表示されるはずのlist-style-typeプロパティで指定したリストマーカーも表示されない。
IE10やFirefox25では、画像非表示でもリストマーカーは表示された。
仕様書には「画像が利用可能の場合、'list-style-type'で設定したマーカーと置き換える」とある。
URLリンク(momdo.s35.xrea.com)
画像が利用可能でない場合は置換せずにマーカーを表示すべき筈。
Cf.存在しない画像をリストマーカーに指定するとリストマーカーが完全に消える
URLリンク(pentan.info)


次ページ
最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch