もしかしてまとめサイト死んだ?
403なるんだが。
あちゃー
そろそろ亡くなるかもしれないから浚っておかないとと思ってたら・・・
俺のバカ
ドメイン失効させちゃって今は別の人に取得されている状態なんです,
ごめんなさい. 過去のデータは残っているのでほしい方がいましたら
どこかにアップロードできます.
ありゃま
欲しいな
うちでホスティングしてもいいなら適当なドメインとってupするよ
容量どのくらい?
あのデータベースは本当に助かってた
きたいあげ
うぎゃー!
まとめがまさかまさかの403!!!!!
だれかうpおながいしまつ。。
>>423 氏とは別人ですが、
infoseek のまとめサイトが 403 になってしまったのと
他の Wiki 等も機能されていないようだったので
既にドメインを取得して新しいまとめサイトを準備中の者です。
先にこちらでご報告すべきでしたよね・・・ごめんなさい。
infoseek まとめサイトの管理者様にはメールを送りましたが
エラーで戻ってきてしまいました。
>>422 是非データほしいです!よろしくお願いします。
ドメイン取らんくていいよ
そしてスペースは放置してても消されないフリーサーバでいいよ
と思ってしまう
428 :
Name_Not_Found:2008/11/13(木) 02:45:03 ID:oUQGtqWL
フリーサーバーなんかでやったら余計長続きしないと思うのは俺だけ?
残るには残るが更新されないんじゃあ・・・
レンタルwikiでよくね
430 :
Name_Not_Found:2008/11/13(木) 18:10:51 ID:kGx2d91t
サーバースペースがガッチリ確保できてたらいいし
ドメインが「バグ辞典スレッドって分かる」みたいなのとってくれてるなら
それにこしたことないんじゃまいか。
やる気ある人にまかせてみよ
基本文字情報+数色程度のインデックスカラーな画像
だろうから容量はいらないよね
Wiki借りてまとめWikiという形が無難かな
放置じゃなくてちゃんと
メンテナンスしてくれる人がやってほしい。
ついでにいうと、もっと見やすくしてくれ。。
バックアップしてなかったオバカな俺みたいなのを助ける、急場凌ぎの為にも、
過去データ取っているなら適当なアプロダに上げてくれると嬉しいな……。
まとめサイトは存続して、メンテナンスされるのであれば、形式はどんなものでも良いと思う。
個人的にはDokuWikiとか好きだけど、
単にWikiというだけだと板人口的にも廃墟になることが有り得そうでちょっと怖い。
ドメインとかを取ってまで運用しよう、と考えるくらいにやる気のある人がいるなら、
個人的には超歓迎。応援してます。
434 :
422:2008/11/13(木) 19:56:31 ID:???
435 :
426:2008/11/13(木) 21:00:24 ID:???
>>434 ダウンロードさせていただきました。ありがとうございます!
というわけで、一通りのデータ入力が終わって公開の目処がたちましたら
URL をお知らせにきます。
なんという団結力
439 :
Name_Not_Found:2008/12/13(土) 15:11:33 ID:rSsSwkVF
HTML 5とCSS3が使われだしたらまたバグ辞典が活躍するかも.
しかし,昔みたいにバッドノウハウな回避法でなんとか動かすなんて
ことにならないでほしい.
441 :
Name_Not_Found:2008/12/28(日) 10:44:57 ID:qgnOL99g
期待 age.
何でIE6とOperaでうまくいくのにFireFoxだとダメなんだよ。
頭きたからページ丸ごと画像にしてやった。
そしたらCSSでシコシコやってたら何日かかるかっていうようなページがすぐ完成。
画像だから角丸なんてアッという間。イメージマップでリンクもちゃんと張れるし
どんなブラウザでも絶対崩れない。
SEO?音声ブラウザ?そんなもん知るか。
どーせ遊びのサイトだからこれで十分だよ。
お前らも画像でやれ。
なんだこいつ('A`)
更新マンドクセ('A`)
/| /l
シャキン ||//ミ
シャキーン! ||/
/Oヽ
((/∧ヘ))
/⌒)/つ′
/ /~||
/ / ||
>>442のレスを見てると、子供のころに戻ったようで。安心する。
/ /_ / / 自分が馬鹿だからなのか、馬鹿になりたいからなのか、
f /^o^)/ 常識とか捨てて適当に生きていきたいと強く思う。
| /
| /⌒)
| // /
丶_| /
| ||
ノ (_ 丶
/ ノ し′
/ /
( i
丶つ
Flashレイアウトが存在するんだから画像レイアウトもアリだな。
重要なテキスト部分だけcssで被せればいい。
<jien></jien>
jien { display: none !important; }
>>442 OperaとIEでうまくいってFxでうまくいかないってどんなデザインだよw
もうちょっと釣りの勉強してこい
>>448 !importantw
【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"
"
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="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>
表示させた後、ウインドウサイズを変更したり最小化最大化を行う必要があります。
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 7
【症状】親要素がインライン要素のとき子要素にdisplay: list-item;を指定すると、
親要素の背景色が浮き出る。
<!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="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が来ちゃってるので、
正当なバグといえるか分からないですが。
【OS】Windows Vista Home Premium / Bussiness
【ブラウザ】IE 8 beta 2(IETester)
【症状】親ブロック要素に背景色が指定してあるとき、
子インライン要素にoutlineを指定すると、何も現れない。
<!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="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:2009/03/04(水) 11:55:41 ID:???
【OS】Mac OS 10.5.6 【ブラウザ】Safari 3.2.1 【症状】10列のテーブル。一番左端のTDにだけ、border-top: 1pxを指定。 それ以外のTDにはborderをつけたくないのに、全て反映されてしまう。 ちなみに、ほかのブラウザでは問題無しです。
どなたか、詳しい方が居たら、教えて下さい(><;)ぉねがいします
>>452 IE8 RC1 (build 18372) WinXP SP3 では Fix されてるよ
455 :
Name_Not_Found:2009/03/04(水) 12:23:12 ID:IeLHLW2u
〉〉453
そうそう、それわたしも前にはまった(ノ△T) 教えてジョブズ!
>>453 実証コードキボン
手元でてきとーに作ってみたけど、これで意図どおり?
<!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="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>
>>456さん
早々にありがとぅござぃます!!ホントですね、このソースなら上手く行きますね。
参考にして勉強します!ありがとうございました☆
>>457 どんな XHTML 文書だったのかがすげー気になる・・・
459 :
457 さくら:2009/03/04(水) 23:38:21 ID:IeLHLW2u
>>456 なるほど〜 一つ目のtdにborder-topを設定すると良かったんですね!
参考になりました。私も今度も試してみます!o(^-^)o
457さん、すみません間違えました。 私は455でした…(>_<)
461 :
momo:2009/03/05(木) 02:02:39 ID:???
確かにどうやって失敗したのか書いてほしいな
>>462 同意
ここはバグ辞典スレなんだから、情報があるに越したことはない
>>454 IE8 RC1 (build 18372),WinVista Home Premium / Bussinessにて、こちらでも確認しました。
465 :
Name_Not_Found:2009/03/14(土) 11:42:41 ID:o8JxV32E
467 :
Name_Not_Found:2009/04/18(土) 12:22:36 ID:y+hIu1SM
バグじゃなくて正常な動作かも分からんですが。
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で連動させようとしたら発生しますた。
IE8ってまだベータだろうが
楽天もヤフーも使えないIE8、役にたたなすぎる
IE8 正式版が出てからもう一ヶ月近くになりますね。
皆様いかがおすごしでしょうか。
正式版になってたのか・・・
うちの会社のシステム担当がIE7自動更新をブロックしてたのが
つい最近だから、IE8なんて遠い未来の話だと思ってた。
で、結局CSSバグ辞典はどうなったん?
とりっぷてすつ
>>478 おつです!
本家(?)が来たようなのでサイトたたみますかw
これからは
>>478さんにおまかせします〜。
ふと思ったけどIE5.xのバグってどうやって再現させるんだ?
ほとんどIE6以降だろうし。
IEtester
>>478 乙です
が、IEとの比較にNetscape7.1標準モードってのはさすがにもうそろそろやめませんか…www
しかも、MTだから管理者しか編集できないな
スレッド第4版のレス314以降も対応して欲しいです
wikiの方がいいな・・・
更新頑張ってくれるならいいんだけどさ
487 :
478:2009/05/05(火) 13:23:10 ID:???
>>484 以前有志の方が制作されたバグ辞典スレッドまとめサイトの内容をそのまま移植したので古い内容のままになっています。
>>485 ぼちぼちがんばります
>>486 wikiマスターが身近におらずMTになってしまいました。
おすすめのwikiなどありますでしょうか。
488 :
Name_Not_Found:2009/05/20(水) 00:40:42 ID:fYqozEmw
ガイシュツ?
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のいつもの三角ボタンが
レンダリングされるため、真ん中のスクロールエリアが縮んでくれずに隙間ができる。
あ、申し訳ない。真ん中のdivにheight:auto;max-height:100px;を指定してる状態で。
最小単位のソースで出しましょう
ああすまん。
普通に<div style="height:auto;max-height:100px;width:217px;overflow-x:auto;overflow-y:scroll;"></div>だけでも良いわな。
493 :
Name_Not_Found:2009/05/22(金) 18:52:23 ID:z1i3aaj8
【環境】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" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja">
cf.OpenTypeフォントを用いて2バイト文字を表示することができない
http://css-bug.jp/win/ie/ver6/0324/ http://page.freett.com/onlineuser/OTTest/OTTest.html
>>493追記
問題が起きるのは印刷時(印刷プレビュー)だけで、ブラウザ表示だけだと支障無し。
ぶっちゃけフォントの問題までカバーする必要は・・・・
フォントの所為ではない。FireFoxならOKってことは、WinIEの問題でしょ。
>>492 うーむ、でも高さを指定するとmax-heightを指定した意味が……。
「自分がそうしたくない」ことをバグにしたがる奴が増えてんな・・・
>>493はWin2000・IE6でも再現した。試したOTFは「ヒラギノ明朝 Pro W3」。
仕様ねえ。互換モードでなければ正常印刷ってのがワケわからんな。
>>487 DokuWiki
別にMTでもいいんだけど、更新速度やらまとめリストやら考えると、Wikiの方が利便性良くないかな。
二重運営でも大して手間かからないかもしれないし。
Wikiでも管理者以外更新しなけりゃ意味ないんだけどね。
ここ最近の流れを見ていると
バグでないものでも更新しそうな人が多そうでgkbr
ファイアフォックスなんていう重たいだけの糞ブラウザを使ってる奴が悪い。
新まとめサイトだけどさ
一番上のIE8、IE7クリックしたときに
「現在、IE*のバグに関するデータが登録されていません」
みたいなコメントつけておいて欲しい
必然的に「バグ一覧」クリックしてしまうけど
あれはIE全てのバグ一覧なんでしょ?
とりあえず、それだけ要望です
>>505 css-bug.jpの者です、ご指摘ありがとうございます
バグが登録されていないのか不具合なのか紛らわしいですね
後ほどコメントを追加しておきます
バグ一覧はIEに限らず登録されているすべてのバグ一覧となっています
Wikiにしてみんなで編集できるようにしてほしいというご意見をいただき
DokuWikiとMediaWikiをダウンロードしたところで時が止まっています
スレ4レス315以降に報告されたバグをまとめる作業も進んでおりません
手際の悪い管理人で申し訳ないです
連投スマソ
>>507 管理人さん、何か手伝えることはないですか?
バグの情報を事前に html で書き起こして、まとめるくらいなら
できます。
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
>>509 ・個人サイト張り付けるな
・バグの前にwikiを調べてこい
IE8で3つぐらいの入れ子にしたリストで
リストマークがおかしくなるのですが
報告はこちらでもよろしいのでしょうか?
IETesterのバグみたいです
すみませんでした
おかしいっていうかマーカーの描画ってそこまで厳密に決められた仕様じゃないから
8のデカいスクウェアでも「そうなんです」と言われたら「そうなんですか」と納得するしかないような
517 :
516:2009/07/06(月) 16:34:31 ID:???
518 :
516:2009/07/06(月) 16:35:36 ID:???
519 :
Name_Not_Found:2009/08/14(金) 13:01:45 ID:sSYDhfE7
んー、つまりIE8でlist-style-type : square;にするとマーカーが大きく表示されるのは仕様なのかな?
よくわからないけど、フォントの指定によって改善される?
ユニコードキャラクタが云々って書いてるけど、よくわかんないや。
気になったのでageで。
なるほど。
Verdanaが好きでいつも使ってるけど、それだと■がでかくなっちゃうんだよな。
ただCSSの仕様上これが正しいって言われると我慢するしかないか・・・
>>39 と同じと思われる現象が Windows Safari 4.0.3 で出ました。
回避方法は見付かっていないのでしょうか?
523 :
competition:2009/09/04(金) 19:50:29 ID:0eS9ANId
relative要素がある場合、bodyにもrelativeを設定しないと
IE系でズームアップ・ダウンした際に正常動作しない
>>524 それってウィンドウリサイズ時にrelative要素の配置がおかしくなる問題と一緒?
Base on that and your blog posts, I hope to catch him on tour. ,
529 :
Name_Not_Found:2010/03/17(水) 11:50:06 ID:a//ADYW9
Opera10.5x
vertical-align text-bottomが、他のブラウザと違って位置がずれる。
Opera10.1x
画像より小さい、line-heightに設定して、その画像にvertical-align bottomを設定すると、正常に表示されない。(他のブラウザと挙動が違う。)
531 :
Name_Not_Found:2010/04/07(水) 21:06:39 ID:+rQZcCMQ
そういえば、CSSバグ辞典のwikiは、誰か引き継いんだんですか?
【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でも同様だったので、もしかして仕様?)
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なら指示通りの挙動になる。
>519
Ie9以外はbulletを文字でなくて絵でかいてるよ
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>
Opera11
従来のOpera用CSSハックが効かなくなった。
IE 6, 7で、a要素の中に別な要素があってそいつがfloatしてると、cursorがpointerじゃなくtextになる
<a href=".">
<span style="float: left;">
ここのカーソルが……
</span>
</a>
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
久々に見に来たら
3年前の俺のレスからほとんど進んでないとは・・・
需要なくなった感じだな
css-bug.jp 活動終了ですか。
だとしたら残念ですが、事情あっての事でしょう。
お世話になりました、ありがとうございました。
541 :
Name_Not_Found:2012/12/07(金) 23:39:49.39 ID:hGmqQyRw
542 :
Name_Not_Found:2012/12/13(木) 23:27:20.83 ID:mmAfCJBg
flashの上にz-indexを使って画像を重ねたのですが
アンドロイドだけ正しく表示されず、flashが上にきてしまいます。
下記記述をしましたが解決されません。
<param name="wmode" value="transparent" />
<embed src="main.swf" wmode="transparent" />
なにか良い解決方法はないでしょうか。
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の%指定が画面表示領域横幅に対する割合になるバグが生じた。
directionプロパティを指定した要素に背景色を指定すると文字テキストが消える。
IE10strict/Quirksで確認。
span {
background:#ccc;
color:#000;
direction:rtl;
unicode-bidi:bidi-override;
}
<p>なぜか<span>この文字テキスト</span>が消える。</p>
<p><span>これだとカーソルでドラッグ選択もできなくなる。</span></p>
Internet Explorer 5.5 における縦書きレイアウトの使用
http://msdn.microsoft.com/ja-jp/library/bb250415(v=vs.85).aspx
BODY要素は常に水平方向にレイアウトされ、ブラウザは常にマークアップ内の
最上位要素の原点をビューポートの開始点として整列します。
上記の例では、この原点がページの左上隅になります。読み込んだページに
テキストが表示されるようにするには、ページ本体を右にスクロールする必要があります。
これを回避するには、BODY 要素の direction プロパティを RTL (右から左) に設定し、
グローバルな DIV 要素の direction プロパティを LTR (左から右) に戻します。
この結果、原点は右上隅になります。
取り消し線(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の効果を子孫要素で取り消せない事例があった。
これは取り消せる方がバグであった。
http://pentan.info/stylesheet/bug/winie040.html http://www.mozilla.gr.jp/standards/webtips0002.html すると解釈としては、Webkit系だけが正しく解釈してるのか?
word-breakがブロックレベル要素以外で効かない
http://pentan.info/stylesheet/bug/winie128.html 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は「英数字」の右で改行した。
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" "
http://www.w3.org/TR/html4/loose.dtd">
多段組で縦書きボックスが複数ある場合、中身が長文でも各縦書き領域に横スクロールバーが出ない。表示領域全体に対してしか横スクロールできない。
overflow-x:auto;でなくoverflow-x:scroll;と指定してすら、
バーは表示されてもスクロールのつまみが出てこないから動かせないって理不尽な状態になる。
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. 「テーブルがはみ出しても横スクロールバーが表示されない」
http://pentan.info/stylesheet/bug/mozilla051.html
552 :
551:2013/10/31(木) 17:58:13.75 ID:???
553 :
551:2013/10/31(木) 18:22:17.29 ID:???
>>554 >IE10/Chrome30/Firefox24/Safari5.1.7/Opera12
>これは全ブラウザで一致するみたいなので
間違った。
Opera12.16だけは、a:visitedでのfont-weightの上書き指定が有効だった。
Chrome 30.0.1599.101 m / Safari5.1.7
>>550のソースで、縦書き段内の横スクロールをした場合。
その文中にA要素があると、a:hoverをセレクタにした指定が効かなくなる。
横スクロールを動かさない初期状態だと、リンク・アンカーにカーソル乗せれば指定通りに背景色等が変化した。
.tategakiへのwidth指定でoverflowが発生するとこのバグが生じる。
普通の横書きでは段落ボックス内でoverflowの縦スクロールを動かしても、問題無し。
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 「font-family:"Verdana","MS Pゴシック","MS PGothic",sans-serif;」ではダメだった。
sans-serifを外したり、monospaceに書き換えるとちゃんとMS Pゴシックで表示されることから、
「sans-serif」の処理に問題がありそうな感触。
「font-family:"Verdana","MS PGothic",sans-serif;」だとどうなるかは、今度試してみる。
>>564 何だかんだ試してみて、以下のことが分かった。
>>560を訂正。
Windows8.1+IE11
・「font-family:"欧文フォント", "和文フォント";」とすると、和文フォントの指定が一切無視される。
欧文フォントについては適用されるが和文フォントの指定が無視されて、
和文はIEの標準フォント(ツール>インターネットオプション>フォントで指定したフォント)で表示される
(
>>560のケースは標準フォントもMS PGothicだったから、指定が効いたんだと勘違いしていた)。
ただし欧文フォントの後ろに「sans-serif」と「serif」が指定されると無視されず、
sans-serifはメイリオで、serifは(おそらく)MS P明朝で表示される。
それ以外のmonospaceやfantasyなどについても無視されて、IEの標準フォントで表示される。
【Google Chrome 31】【Sagari5.1.7】
代替スタイルシートによって縦書き指定(-webkit-writing-mode:vertical-rl)を適用すると、リストマーカー画像の位置が左にずれたり消えたりする。
<link rel="stylesheet" type="text/css" href="./default.css" hreflang="ja" charset="Shift_jis" media="screen,print,projection,tv">
<link rel="alternate stylesheet" type="text/css" href="./tate.css" hreflang="ja" charset="Shift_jis" media="print, screen" title="縦書き版">
<body>
<script type="text/javascript"><!--
ChangeStyle = function( name ){
// 代替スタイルシート切替スクリプトは右記を拝借→
http://www.usamimi.info/~geko/arch_web/02_sample/018/index.html }//-->
</script>
<select onchange="sn=this.options[this.selectedIndex].value;if(sn)ChangeStyle(sn);">
<option value="Main">default</option><option value="縦書き版">縦書き版</option>
</select>
<div class="tategaki">
<ul><li>あいうえお</li><li>ああああ</li><li>aaaaa</li></ul>
</div>
</body>
/* default.cssの中身 */
ul {list-style-image:url(./mark.jpg);}
/* tate.cssの中身 */
.tategaki {
-webkit-writing-mode:vertical-rl;/* Chrome用 */
writing-mode:vertical-rl;
writing-mode:tb-rl;/*For under IE8*/
}
tate.cssを読み込むlink要素でrel="alternate stylesheet"をrel="stylesheet"にして
最初から縦書きを適用すると、この不具合は起きない。
なぜか代替スタイルシートで適用した直後だけ、リストマーカー画像が左に半行分以上ズレて、本来上に来るべき行より左の行の上に掛かって表示される。
>>562もだが、Webkit系のlist-style-imageのレンダリングはちょっと問題含みか。
>>566の問題を下記で代用して解決できる。
tate.cssに下記を追記し、list-style-imageでなくbackground-imageでリストマーカーを画像にする。
/*===WebKitハックでGoogleChrome(とSafari)のみに適用===*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.tategaki ul {-webkit-padding-start:20px;}
.tategaki ul li {
list-style:none;
padding-top:20px;
background: url(./mark.jpg) no-repeat right top;
}
}/**Safari・Chrome対策**/
<ul>
<li>さしすせそ
<ul>
<li>たちつて</li>
<li>なにぬねの</li>
</ul>
</li>
<li>ABCDE</li>
<li>あいうえお<br>ああああ<br>aaaaa</li>
</ul>
ところが、これでもGoogle Chrome(とSafari)で別の不具合が生じた。
代替スタイルシート適用直後、リスト一行目のリストマーカー画像が消えたり、右半分欠けたりする。
そこでdefaultスタイルに戻してから再度代替シートに切換すると、まともに表示される。
しかしページ再読み込みして、また代替スタイルシートで縦書きを適用すると、やはり一行目のliの背景画像だけ消える。
なにこれ?
>>544の解決法。→ body {height:100%} を指定しておく。
しかし、WinIE7標準モードで発生する別のバグにはそれだけでは不足。
>>544のソースのDOCTYPE宣言を変更して標準モードにし、IE7で閲覧する。
<!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="X-UA-Compatible" content="IE=7;IE=emulateIE7">
またはIE8〜10でF12開発者ツールを使ってドキュメントモードをIE7標準にして閲覧する。
ソースは下記の通り。互換モードやIE8標準〜IE10標準だとこのバグは起きない。
.tategaki {
writing-mode:vertical-rl;
writing-mode:tb-rl; /*For under IE8*/
-webkit-writing-mode:vertical-rl;
overflow-x:auto;
height:50%;
width:95%;
}
<body>
<div class="tategaki" id="COL1">
<p>ここに一段目の縦書きのテキストが入ります。</p>
<p>折り返される長文にする。長文にする。長文にする。長文にする。長文にする。長文にする。長文にする。長文にする。</p>
<p>以下繰り返しで横スクロールが生じる幅を出す。</p>
<p>以下繰り返しで横スクロールが生じる幅を出す。</p>
<p>……横スクロールが出るまでコピー&ペースト繰り返し……</p>
</div>
<div class="tategaki" id="COL2">
<p>ここは二段目になります。</p>
</div>
すると、なぜか横スクロールが発生した分だけ長文が折り返されなくなるバグが発現した。したがって縦組み段の高さがどんどん伸びる。
これへの対処法としては、body {height:100%} だけでは足りない。
body, html {height:100%;} とhtml要素にも指定すると、バグは解消した。
>>550のSafari5.1.7の縦書きでのバグについて。
Safariブラウザのウィンドウを垂直に伸ばすと縦書きボックスの横幅も増えてゆく。
つまり
>>544のIEバグと似て、縦の高さ(height)がなぜか横幅の長さにまで影響するバグだった。
そこで
>>568の解決法を試して、body, html {height:100%;} としてみた。
すると
>>550後半のStrictモード時に縦書きの各段毎の横スクロールが出なくなる不具合だけは解消した。
しかし依然としてbody内の縦書きボックスのwidthが画面表示領域の高さと連動するバグは出る。
Safari6以降では修正されたのかな。
【IE5Quirks/IE7〜9互換モード】
定義リスト(dl要素)を横並びさせる際、dd要素内でem要素が折り返される長さだけあると横に並ばなくなる。
定義リストをfloatで横並びにして表組み風にするのは、よくある。
Cf.
http://blog.d-spica.com/entry/080512dtfloat.html その際、IE6において、dt要素の高さよりdd要素内の段が高い場合、dtの横に隣接するddの一行目テキストだけ3pxほど右にずれるバグがある。
これに対処するには、zoom:1; を指定してhasLayoutをtrueにすれば解消する。
Cf.
http://www.coolwebwindow.com/weblife_column/coolweb/000174.php しかし、或る条件下では、この横並びが崩れた。
dd要素内にemなど斜体(font-style:italic;)で表示される要素があり、且つその文字列が途中で行の右端に掛かって折り返しされるのがその条件。
下記の例で、横並びにならなくなって、ddがdtの一行下から表示された。
dt {clear:both; float:left; min-width:1em;}
dd {margin-left:1.2em; zoom:1;}
<dl>
<dt><a name="n25" href="#t25">註2</a></dt>
<dd><p>……著者名,<em>折り返される長さの書名</em>,出版社,刊年,pp29-31.</p></dd>
</dl>
zoom:1;を削るか、em {font-style:normal} とすると、floatが効いて横並びに戻った。
Safariでテーブルにダッシュのボーダーの要素thやtdに幅いれると隙間あくのバグかな
WinXP・IE7
縦書きwriting-mode:tb-rl;適用時、font-familyで和文OpenTypeFontを指定すると、字間ピッチが変に詰まる。