CSS/DHTMLバグ辞典スレッド【第５版】
- 1 ：Name_Not_Found：2006/04/08(土) 20:05:59 ID:FsSaRr1T.net
- CSS（とDHTML）のバグ報告、お待ちしてます。
※報告の際はOS・ブラウザ名とそのヴァージョンを明記して下さい。
再現条件をつきとめるため、必要に応じてソースを出して下さい。
第４版レス314までのバグは下記に登録済み（前々366◆E3CSS.J95U／◆B7TCOttEさんに感謝）。
【CSSバグリスト＠CSSバグ辞典スレッド】
http://cssbug.at.infoseek.co.jp/index.html
（もうずっと更新休止、誰かwikiででも引き継がないか？）
プロパティ別にバグを調べたいときは――
・K@tsukun's PAGE! ＞ CSS対応状況表 （の各プロパティ「関連バグ情報」）
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSSプロパティ別トラブルの索引
http://dhr.at.infoseek.co.jp/stylebug_index1.htm
【バグ説明・回避法などを載せた参考サイトへのリンク】
http://cssbug.at.infoseek.co.jp/link.html
【過去ログ】
1 http://mentai.2ch.net/hp/kako/987/987003410.html
2 http://pc2.2ch.net/hp/kako/991/991666454.html
3 http://2ch-library.com/hp/1050844510.html
4 http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
【関聯スレッド】
・/* CSS・スタイルシート質問スレッド*/
http://web2ch.s31.xrea.com/?CSSLog
・代替スタイルシートに萌え〜
http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
その他あれば、>>2-5あたりで。
- 566 ：Name_Not_Found：2013/11/22(金) 21:09:54.35 ID:???.net
- 【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のレンダリングはちょっと問題含みか。
- 567 ：Name_Not_Found：2013/11/22(金) 21:28:11.99 ID:???.net
- >>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の背景画像だけ消える。
なにこれ？
248 KB
新着レスの表示
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★