CSS/DHTMLバグ辞典スレッド【第５版】
【Google Chrome 4.0】
ruby要素が親ブロック要素へのインデント指定を反映する
ttp://www.google.com/support/forum/p/chrome/thread?tid=1cf875b455ef1bc7&hl=ja
ruby要素・rb要素はインライン要素、
だから親ブロック要素に適用されるtext-indentプロパティーは継承しない筈だが、
ルビ附き文字の前にインデント指定した分だけ空白ができる。
例
p {text-indent:1em;}
<p>対応ブラウザでは<RUBY><RB>ルビ</RB><RP>（</RP><RT>ふりがな</RT><RP>）</RP></RUBY>が表示される。</p>
「対応ブラウザでは ルビが表示される。」とルビ附き文字の前が無意味に一字空きになる。
ruby要素が親ブロック要素へのインデント指定を反映する
ttp://www.google.com/support/forum/p/chrome/thread?tid=1cf875b455ef1bc7&hl=ja
ruby要素・rb要素はインライン要素、
だから親ブロック要素に適用されるtext-indentプロパティーは継承しない筈だが、
ルビ附き文字の前にインデント指定した分だけ空白ができる。
例
p {text-indent:1em;}
<p>対応ブラウザでは<RUBY><RB>ルビ</RB><RP>（</RP><RT>ふりがな</RT><RP>）</RP></RUBY>が表示される。</p>
「対応ブラウザでは ルビが表示される。」とルビ附き文字の前が無意味に一字空きになる。
|
|
|
528 ：Name_Not_Found：2010/02/05(金) 00:13:44 ID:???
【Google Chrome 4.0】
インライン・テーブルにしたruby要素内のrb要素・rt要素を
displayプロパティーで表と同様に表示させようとすると、文字列が消えて見えなくなる。
http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.html
http://fswiki.org/wiki.pl?page=BugTrack-theme%2F23
上記にある通り、
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でルビ表示にならなくなるが。
インライン・テーブルにしたruby要素内のrb要素・rt要素を
displayプロパティーで表と同様に表示させようとすると、文字列が消えて見えなくなる。
http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.html
http://fswiki.org/wiki.pl?page=BugTrack-theme%2F23
上記にある通り、
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：2010/03/17(水) 11:50:06 ID:a//ADYW9
Opera10.5x
vertical-align text-bottomが、他のブラウザと違って位置がずれる。
Opera10.1x
画像より小さい、line-heightに設定して、その画像にvertical-align bottomを設定すると、正常に表示されない。（他のブラウザと挙動が違う。）
vertical-align text-bottomが、他のブラウザと違って位置がずれる。
Opera10.1x
画像より小さい、line-heightに設定して、その画像にvertical-align bottomを設定すると、正常に表示されない。（他のブラウザと挙動が違う。）
530 ：Name_Not_Found：2010/03/25(木) 18:03:48 ID:???
Opera10.51
Opara10のみ適用させるための属性セレクタ・ハックが利用できなくなった。
下記はOpera10.50までOperaのみ有効だったが、ver.10.51ではOperaでもスタイル指定は無効になる。
html[lang*=""] body:last-child p {color:red;}
cf. http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack03/03.html#13
代用として、Opera9.51ハックと呼ばれるものはまだ有効。
p:not(\*|*) {color: red;}
cf. http://d.hatena.ne.jp/momizine/20090108/1231397816
Opara10のみ適用させるための属性セレクタ・ハックが利用できなくなった。
下記はOpera10.50までOperaのみ有効だったが、ver.10.51ではOperaでもスタイル指定は無効になる。
html[lang*=""] body:last-child p {color:red;}
cf. http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack03/03.html#13
代用として、Opera9.51ハックと呼ばれるものはまだ有効。
p:not(\*|*) {color: red;}
cf. http://d.hatena.ne.jp/momizine/20090108/1231397816
531 ：Name_Not_Found：2010/04/07(水) 21:06:39 ID:+rQZcCMQ
そういえば、CSSバグ辞典のwikiは、誰か引き継いんだんですか？
532 ：Name_Not_Found：2010/04/26(月) 18:50:10 ID:???
【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でも同様だったので、もしかして仕様？）
【ブラウザ】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：2010/04/27(火) 21:48:21 ID:???
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なら指示通りの挙動になる。
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：2010/04/27(火) 22:04:58 ID:???
＞５１９
Ie9以外はbulletを文字でなくて絵でかいてるよ
535 ：Name_Not_Found：2010/09/20(月) 11:36:47 ID:???
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>
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：2011/01/24(月) 01:35:34 ID:???
Opera11
従来のOpera用ＣＳＳハックが効かなくなった。
従来のOpera用ＣＳＳハックが効かなくなった。
537 ：Name_Not_Found：2012/04/19(木) 17:14:30.59 ID:???
IE 6, 7で、a要素の中に別な要素があってそいつがfloatしてると、cursorがpointerじゃなくtextになる
<a href=".">
<span style="float: left;">
ここのカーソルが……
</span>
</a>
<a href=".">
<span style="float: left;">
ここのカーソルが……
</span>
</a>
538 ：Name_Not_Found：2012/09/15(土) 18:13:20.70 ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
539 ：Name_Not_Found：2012/11/07(水) 16:57:05.80 ID:???
久々に見に来たら
3年前の俺のレスからほとんど進んでないとは・・・
需要なくなった感じだな
3年前の俺のレスからほとんど進んでないとは・・・
需要なくなった感じだな
540 ：Name_Not_Found：2012/12/04(火) 13:23:48.19 ID:???
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" />
なにか良い解決方法はないでしょうか。
アンドロイドだけ正しく表示されず、flashが上にきてしまいます。
下記記述をしましたが解決されません。
<param name="wmode" value="transparent" />
<embed src="main.swf" wmode="transparent" />
なにか良い解決方法はないでしょうか。
543 ：Name_Not_Found：2012/12/18(火) 17:33:54.01 ID:???
http://answers.microsoft.com/ja-jp/ie/forum/ie9-windows_other/ie9%E3%81%A7%E3%83%AB%E3%83%93%E4%BB%98%E3%81%8D/9af8e8dc-c878-e011-9b4b-68b599b31bf5
ルビ（rb要素）を含む文書を標準モードで縦書き表示させたら、IE9ではひどいことになる、ト。
http://f.hatena.ne.jp/rti7743/20110324040014
ルビ（rb要素）を含む文書を標準モードで縦書き表示させたら、IE9ではひどいことになる、ト。
http://f.hatena.ne.jp/rti7743/20110324040014
544 ：Name_Not_Found：2013/10/20(日) 18:24:37.67 ID:???
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の%指定が画面表示領域横幅に対する割合になるバグが生じた。
<!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：2013/10/23(水) 23:53:07.57 ID:???
directionプロパティを指定した要素に背景色を指定すると文字テキストが消える。
IE10strict/Quirksで確認。
span {
background:#ccc;
color:#000;
direction:rtl;
unicode-bidi:bidi-override;
}
<p>なぜか<span>この文字テキスト</span>が消える。</p>
<p><span>これだとカーソルでドラッグ選択もできなくなる。</span></p>
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：2013/10/24(木) 04:11:12.85 ID:???
だいたいdirectionプロパティって、日本語組版だと利用する場面が無くない？
http://blog.imagedrive.jp/2011/01
古くから扁額とかに見られた右横書きだって、あれは一字一行の縦書きなのであって、複数行にわたることないし。
http://blog.imagedrive.jp/2011/01
古くから扁額とかに見られた右横書きだって、あれは一字一行の縦書きなのであって、複数行にわたることないし。
547 ：Name_Not_Found：2013/10/25(金) 07:14:36.32 ID:???
Internet Explorer 5.5 における縦書きレイアウトの使用
http://msdn.microsoft.com/ja-jp/library/bb250415(v=vs.85).aspx
BODY要素は常に水平方向にレイアウトされ、ブラウザは常にマークアップ内の
最上位要素の原点をビューポートの開始点として整列します。
上記の例では、この原点がページの左上隅になります。読み込んだページに
テキストが表示されるようにするには、ページ本体を右にスクロールする必要があります。
これを回避するには、BODY 要素の direction プロパティを RTL (右から左) に設定し、
グローバルな DIV 要素の direction プロパティを LTR (左から右) に戻します。
この結果、原点は右上隅になります。
http://msdn.microsoft.com/ja-jp/library/bb250415(v=vs.85).aspx
BODY要素は常に水平方向にレイアウトされ、ブラウザは常にマークアップ内の
最上位要素の原点をビューポートの開始点として整列します。
上記の例では、この原点がページの左上隅になります。読み込んだページに
テキストが表示されるようにするには、ページ本体を右にスクロールする必要があります。
これを回避するには、BODY 要素の direction プロパティを RTL (右から左) に設定し、
グローバルな DIV 要素の direction プロパティを LTR (左から右) に戻します。
この結果、原点は右上隅になります。
548 ：Name_Not_Found：2013/10/26(土) 01:26:28.34 ID:???
取り消し線（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系だけが正しく解釈してるのか？
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系だけが正しく解釈してるのか？
549 ：Name_Not_Found：2013/10/27(日) 02:41:55.84 ID:???
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は「英数字」の右で改行した。
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は「英数字」の右で改行した。
550 ：Name_Not_Found：2013/10/30(水) 03:23:53.30 ID:???
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;と指定してすら、
バーは表示されてもスクロールのつまみが出てこないから動かせないって理不尽な状態になる。
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;と指定してすら、
バーは表示されてもスクロールのつまみが出てこないから動かせないって理不尽な状態になる。
551 ：Name_Not_Found：2013/10/31(木) 17:27:10.18 ID:???
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
折り返しを抑制した文字列を含むテーブルが横方向にはみ出すことがある。
例）
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
類似現象はむしろこっちか。
「表セル内要素への折り返し禁止指定がセル自体に作用する」
http://pentan.info/stylesheet/bug/opera008.html
あと、折り返し禁止してない文字列「／」を２文字にすると、
ちゃんと折り返して、テーブルが横に伸びる現象を回避できる。
「表セル内要素への折り返し禁止指定がセル自体に作用する」
http://pentan.info/stylesheet/bug/opera008.html
あと、折り返し禁止してない文字列「／」を２文字にすると、
ちゃんと折り返して、テーブルが横に伸びる現象を回避できる。
これも該当か。
「インライン要素への折り返し禁止指定が当該要素の外のブロックに作用する」
http://pentan.info/stylesheet/bug/mozilla029.html
＞折り返しが行われるべき場所に空白類文字を挿入するとこのバグを回避できます。
何年も前のNetsacape7.0で発生してその後修正されたバグが、今になってChromeに再来するとは……。
「インライン要素への折り返し禁止指定が当該要素の外のブロックに作用する」
http://pentan.info/stylesheet/bug/mozilla029.html
＞折り返しが行われるべき場所に空白類文字を挿入するとこのバグを回避できます。
何年も前のNetsacape7.0で発生してその後修正されたバグが、今になってChromeに再来するとは……。
554 ：Name_Not_Found：2013/11/04(月) 20:26:07.56 ID:???
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では上書きできない罠。
これは全ブラウザで一致するみたいなので、バグでなく仕様なのか？
と思ったが、該当する記述は仕様書に見当らなかった。
http://www.asahi-net.or.jp/~BD9Y-KTU/htmlrel_f/W3Ccss1/index.html#anchor-pseudo-classes
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#link-pseudo-classes
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/fonts.html#font-boldness
リンク疑似クラスで、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では上書きできない罠。
これは全ブラウザで一致するみたいなので、バグでなく仕様なのか？
と思ったが、該当する記述は仕様書に見当らなかった。
http://www.asahi-net.or.jp/~BD9Y-KTU/htmlrel_f/W3Ccss1/index.html#anchor-pseudo-classes
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#link-pseudo-classes
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/fonts.html#font-boldness
555 ：Name_Not_Found：2013/11/04(月) 20:30:19.86 ID:???
>>554
>IE10／Chrome30／Firefox24／Safari5.1.7／Opera12
>これは全ブラウザで一致するみたいなので
間違った。
Opera12.16だけは、a:visitedでのfont-weightの上書き指定が有効だった。
>IE10／Chrome30／Firefox24／Safari5.1.7／Opera12
>これは全ブラウザで一致するみたいなので
間違った。
Opera12.16だけは、a:visitedでのfont-weightの上書き指定が有効だった。
556 ：Name_Not_Found：2013/11/04(月) 20:31:12.61 ID:???
それは仕様。
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#the-link-pseudo-classes-link-and-visited
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.
の範囲内の動作。
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#the-link-pseudo-classes-link-and-visited
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：2013/11/04(月) 21:12:19.47 ID:???
>>556
邦訳だと、ここだね。
http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited
Note: スタイルシート製作者は :link, :visited 擬似クラスを悪用し、ユーザーがどのサイトにアクセスしたかをそのユーザーの承諾なしに知ることができる。
このため、UA はすべてのリンクを未訪問として扱う、もしくはそれぞれのリンクを表示する際ユーザーのプライバシーに配慮した方法を実装するなどの方法をとることができる。
でも、それなら、色は変化するのに太さは変化しないって、整合性がないよ。
やっぱちょっと異常な挙動ではある。
邦訳だと、ここだね。
http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/#the-link-pseudo-classes-link-and-visited
Note: スタイルシート製作者は :link, :visited 擬似クラスを悪用し、ユーザーがどのサイトにアクセスしたかをそのユーザーの承諾なしに知ることができる。
このため、UA はすべてのリンクを未訪問として扱う、もしくはそれぞれのリンクを表示する際ユーザーのプライバシーに配慮した方法を実装するなどの方法をとることができる。
でも、それなら、色は変化するのに太さは変化しないって、整合性がないよ。
やっぱちょっと異常な挙動ではある。
558 ：Name_Not_Found：2013/11/14(木) 07:15:01.69 ID:???
Chrome 30.0.1599.101 m ／ Safari5.1.7
>>550のソースで、縦書き段内の横スクロールをした場合。
その文中にA要素があると、a:hoverをセレクタにした指定が効かなくなる。
横スクロールを動かさない初期状態だと、リンク・アンカーにカーソル乗せれば指定通りに背景色等が変化した。
.tategakiへのwidth指定でoverflowが発生するとこのバグが生じる。
普通の横書きでは段落ボックス内でoverflowの縦スクロールを動かしても、問題無し。
>>550のソースで、縦書き段内の横スクロールをした場合。
その文中にA要素があると、a:hoverをセレクタにした指定が効かなくなる。
横スクロールを動かさない初期状態だと、リンク・アンカーにカーソル乗せれば指定通りに背景色等が変化した。
.tategakiへのwidth指定でoverflowが発生するとこのバグが生じる。
普通の横書きでは段落ボックス内でoverflowの縦スクロールを動かしても、問題無し。
559 ：Name_Not_Found：2013/11/15(金) 10:14:25.03 ID:???
>>543
IE11も縦書き指定でルビありだと表示が乱れるとさ。
http://togetter.com/li/562466
http://answers.microsoft.com/ja-jp/ie/forum/ie11_pr-windows8_1_pr/win81preie11/36d8f830-518c-4b0c-a49f-c15662b0b466
http://social.msdn.microsoft.com/Forums/ja-JP/e721ea0a-ff57-45c3-b728-31e2cc7618ad/win81preie11-?forum=internetexplorerja
縦組みに限っては、IE6までが一番マシだったかも。
IE11も縦書き指定でルビありだと表示が乱れるとさ。
http://togetter.com/li/562466
http://answers.microsoft.com/ja-jp/ie/forum/ie11_pr-windows8_1_pr/win81preie11/36d8f830-518c-4b0c-a49f-c15662b0b466
http://social.msdn.microsoft.com/Forums/ja-JP/e721ea0a-ff57-45c3-b728-31e2cc7618ad/win81preie11-?forum=internetexplorerja
縦組みに限っては、IE6までが一番マシだったかも。
560 ：Name_Not_Found：2013/11/19(火) 22:53:03.13 ID:???
Windows8.1＋IE11
font-family:"欧文フォント","和文フォント",sans-serif;とすると、和文フォントの指定が無視される。
body {font-family:"Verdana","ＭＳ Ｐゴシック",sans-serif;}
→ＭＳ Ｐゴシックが無視され、sans-serifのメイリオで表示される。
Verdanaを後ろにする（もちろん半角英数はVerdanaでなくなる）か、
sans-serifを取り除くとＭＳ Ｐゴシックが反映される。
font-family:"欧文フォント","和文フォント",sans-serif;とすると、和文フォントの指定が無視される。
body {font-family:"Verdana","ＭＳ Ｐゴシック",sans-serif;}
→ＭＳ Ｐゴシックが無視され、sans-serifのメイリオで表示される。
Verdanaを後ろにする（もちろん半角英数はVerdanaでなくなる）か、
sans-serifを取り除くとＭＳ Ｐゴシックが反映される。
561 ：Name_Not_Found：2013/11/20(水) 00:19:11.56 ID:???
>>560
和文フォント名を"MS Gothic"とかアルファベット表記にしたらどうなります？
Cf. http://blog.sakurachiro.com/2012/10/font-family/
和文フォント名を"MS Gothic"とかアルファベット表記にしたらどうなります？
Cf. http://blog.sakurachiro.com/2012/10/font-family/
562 ：Name_Not_Found：2013/11/20(水) 22:30:07.69 ID:???
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'で設定したマーカーと置き換える」とある。
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html#propdef-list-style-image
画像が利用可能でない場合は置換せずにマーカーを表示すべき筈。
Cf.存在しない画像をリストマーカーに指定するとリストマーカーが完全に消える
http://pentan.info/stylesheet/bug/mozilla026.html
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'で設定したマーカーと置き換える」とある。
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html#propdef-list-style-image
画像が利用可能でない場合は置換せずにマーカーを表示すべき筈。
Cf.存在しない画像をリストマーカーに指定するとリストマーカーが完全に消える
http://pentan.info/stylesheet/bug/mozilla026.html
563 ：Name_Not_Found：2013/11/20(水) 22:43:31.39 ID:???
>>561
「font-family:"Verdana","ＭＳ Ｐゴシック","MS PGothic",sans-serif;」ではダメだった。
sans-serifを外したり、monospaceに書き換えるとちゃんとＭＳ Ｐゴシックで表示されることから、
「sans-serif」の処理に問題がありそうな感触。
「font-family:"Verdana","MS PGothic",sans-serif;」だとどうなるかは、今度試してみる。
「font-family:"Verdana","ＭＳ Ｐゴシック","MS PGothic",sans-serif;」ではダメだった。
sans-serifを外したり、monospaceに書き換えるとちゃんとＭＳ Ｐゴシックで表示されることから、
「sans-serif」の処理に問題がありそうな感触。
「font-family:"Verdana","MS PGothic",sans-serif;」だとどうなるかは、今度試してみる。
564 ：Name_Not_Found：2013/11/20(水) 23:21:50.25 ID:???
>>563
>monospaceに書き換えるとちゃんとＭＳ Ｐゴシックで表示される
総称ファミリー名をmonospaceと指定した場合、「ＭＳ Ｐゴシック」でなく「ＭＳ ゴシック」で表示されるべきなのでは？
Pはプロポーショナル・フォントだから、固定幅でない。
Cf. http://momdo.s35.xrea.com/web-html-test/spec/CSS21/fonts.html#monospace-def
>monospaceに書き換えるとちゃんとＭＳ Ｐゴシックで表示される
総称ファミリー名をmonospaceと指定した場合、「ＭＳ Ｐゴシック」でなく「ＭＳ ゴシック」で表示されるべきなのでは？
Pはプロポーショナル・フォントだから、固定幅でない。
Cf. http://momdo.s35.xrea.com/web-html-test/spec/CSS21/fonts.html#monospace-def
565 ：Name_Not_Found：2013/11/21(木) 22:27:50.54 ID:???
>>564
何だかんだ試してみて、以下のことが分かった。>>560を訂正。
Windows8.1+IE11
・「font-family:"欧文フォント", "和文フォント";」とすると、和文フォントの指定が一切無視される。
欧文フォントについては適用されるが和文フォントの指定が無視されて、
和文はIEの標準フォント（ツール＞インターネットオプション＞フォントで指定したフォント）で表示される
（>>560のケースは標準フォントもMS PGothicだったから、指定が効いたんだと勘違いしていた）。
ただし欧文フォントの後ろに「sans-serif」と「serif」が指定されると無視されず、
sans-serifはメイリオで、serifは（おそらく）MS P明朝で表示される。
それ以外のmonospaceやfantasyなどについても無視されて、IEの標準フォントで表示される。
何だかんだ試してみて、以下のことが分かった。>>560を訂正。
Windows8.1+IE11
・「font-family:"欧文フォント", "和文フォント";」とすると、和文フォントの指定が一切無視される。
欧文フォントについては適用されるが和文フォントの指定が無視されて、
和文はIEの標準フォント（ツール＞インターネットオプション＞フォントで指定したフォント）で表示される
（>>560のケースは標準フォントもMS PGothicだったから、指定が効いたんだと勘違いしていた）。
ただし欧文フォントの後ろに「sans-serif」と「serif」が指定されると無視されず、
sans-serifはメイリオで、serifは（おそらく）MS P明朝で表示される。
それ以外のmonospaceやfantasyなどについても無視されて、IEの標準フォントで表示される。
566 ：Name_Not_Found：2013/11/22(金) 21:09:54.35 ID:???
【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のレンダリングはちょっと問題含みか。
代替スタイルシートによって縦書き指定（-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のレンダリングはちょっと問題含みか。
567 ：Name_Not_Found：2013/11/22(金) 21:28:11.99 ID:???
>>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>ＡＢＣＤＥ</li>
<li>あいうえお<br>ああああ<br>aaaaa</li>
</ul>
ところが、これでもGoogle Chrome（とSafari）で別の不具合が生じた。
代替スタイルシート適用直後、リスト一行目のリストマーカー画像が消えたり、右半分欠けたりする。
そこでdefaultスタイルに戻してから再度代替シートに切換すると、まともに表示される。
しかしページ再読み込みして、また代替スタイルシートで縦書きを適用すると、やはり一行目のliの背景画像だけ消える。
なにこれ？
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>ＡＢＣＤＥ</li>
<li>あいうえお<br>ああああ<br>aaaaa</li>
</ul>
ところが、これでもGoogle Chrome（とSafari）で別の不具合が生じた。
代替スタイルシート適用直後、リスト一行目のリストマーカー画像が消えたり、右半分欠けたりする。
そこでdefaultスタイルに戻してから再度代替シートに切換すると、まともに表示される。
しかしページ再読み込みして、また代替スタイルシートで縦書きを適用すると、やはり一行目のliの背景画像だけ消える。
なにこれ？
568 ：Name_Not_Found：2013/11/22(金) 22:15:59.31 ID:???
>>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要素にも指定すると、バグは解消した。
しかし、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要素にも指定すると、バグは解消した。
569 ：Name_Not_Found：2013/11/23(土) 11:52:59.97 ID:???
>>550のSafari5.1.7の縦書きでのバグについて。
Safariブラウザのウィンドウを垂直に伸ばすと縦書きボックスの横幅も増えてゆく。
つまり>>544のIEバグと似て、縦の高さ（height）がなぜか横幅の長さにまで影響するバグだった。
そこで>>568の解決法を試して、body, html {height:100%;} としてみた。
すると>>550後半のStrictモード時に縦書きの各段毎の横スクロールが出なくなる不具合だけは解消した。
しかし依然としてbody内の縦書きボックスのwidthが画面表示領域の高さと連動するバグは出る。
Safari6以降では修正されたのかな。
Safariブラウザのウィンドウを垂直に伸ばすと縦書きボックスの横幅も増えてゆく。
つまり>>544のIEバグと似て、縦の高さ（height）がなぜか横幅の長さにまで影響するバグだった。
そこで>>568の解決法を試して、body, html {height:100%;} としてみた。
すると>>550後半のStrictモード時に縦書きの各段毎の横スクロールが出なくなる不具合だけは解消した。
しかし依然としてbody内の縦書きボックスのwidthが画面表示領域の高さと連動するバグは出る。
Safari6以降では修正されたのかな。
570 ：Name_Not_Found：2013/11/24(日) 02:54:41.24 ID:???
【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が効いて横並びに戻った。
定義リスト（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が効いて横並びに戻った。
571 ：Name_Not_Found：2013/11/25(月) 09:37:02.67 ID:???
572 ：Name_Not_Found：2013/11/28(木) 01:53:22.39 ID:???
よくremを使ったフォントサイズ指定で
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
なんていうのがブログ等で紹介されているけど、
現状バージョンのChromeでフォントサイズの継承かおかしいのか
変更になったのかわからんがフォントサイズがおかしくなってしまう。
ttp://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
なんていうのがブログ等で紹介されているけど、
現状バージョンのChromeでフォントサイズの継承かおかしいのか
変更になったのかわからんがフォントサイズがおかしくなってしまう。
ttp://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag
573 ：Name_Not_Found：2013/12/06(金) 16:08:46.35 ID:???
Safariでテーブルにダッシュのボーダーの要素thやtdに幅いれると隙間あくのバグかな
574 ：Name_Not_Found：2013/12/24(火) 15:00:14.92 ID:???
とりあえずこのスレでいいのかな…ちょっとコレ見て欲しい。
(1<<32)-1は0になるので(1<<30)*4-1で読み替えてもらうとして、
環境によっては49.7日問題が出ない代わりに上限が0x7fffFFFFミリ秒までになる。
0x7fffFFFFミリ秒あれば普通は十分だろうけど、32ビットフルで使えないのはバグな気もする。
JavaScript 3
http://toro.2ch.net/test/read.cgi/tech/1380177260/124
124 名前：デフォルトの名無しさん[sage] 投稿日：2013/12/22(日) 03:38:15.71
ググっても
http://ap.atmarkit.co.jp/bbs/core/fjava/20589
http://ap.atmarkit.co.jp/bbs/core/fdotnet/20546
しか話が出てこないけどさ、JScriptのsetTimeoutって普通に49.7日問題発生するよな？
多分、timeout+starttime<GetTickCount()的な判定なんだと思うけど、
setTimeout("alert(0);",(1<<32)-1);とかだと普通に0秒でタイムアウトしてしまう。
応用すれば対象PCの起動からの時間も49.7日以下なら計測可能という。
例：http://jsbin.com/aBegAMI/2
WindowsXP SP3(32bit)+IE8はコレでシステム起動時間もどきを取れるの確認したけど、他だとどーよ？
(1<<32)-1は0になるので(1<<30)*4-1で読み替えてもらうとして、
環境によっては49.7日問題が出ない代わりに上限が0x7fffFFFFミリ秒までになる。
0x7fffFFFFミリ秒あれば普通は十分だろうけど、32ビットフルで使えないのはバグな気もする。
JavaScript 3
http://toro.2ch.net/test/read.cgi/tech/1380177260/124
124 名前：デフォルトの名無しさん[sage] 投稿日：2013/12/22(日) 03:38:15.71
ググっても
http://ap.atmarkit.co.jp/bbs/core/fjava/20589
http://ap.atmarkit.co.jp/bbs/core/fdotnet/20546
しか話が出てこないけどさ、JScriptのsetTimeoutって普通に49.7日問題発生するよな？
多分、timeout+starttime<GetTickCount()的な判定なんだと思うけど、
setTimeout("alert(0);",(1<<32)-1);とかだと普通に0秒でタイムアウトしてしまう。
応用すれば対象PCの起動からの時間も49.7日以下なら計測可能という。
例：http://jsbin.com/aBegAMI/2
WindowsXP SP3(32bit)+IE8はコレでシステム起動時間もどきを取れるの確認したけど、他だとどーよ？
WinXP・IE7
縦書きwriting-mode:tb-rl;適用時、font-familyで和文OpenTypeFontを指定すると、字間ピッチが変に詰まる。
縦書きwriting-mode:tb-rl;適用時、font-familyで和文OpenTypeFontを指定すると、字間ピッチが変に詰まる。