続・HTML Techniques for WCAG 2.0 のページ

2003-12-12

先日のHTML Techniques for WCAG 2.0 のページで Mozilla Firebird での表示がおかしいという話しの続きです。

HTML Techniques for WCAG 2.0 では、techniques.css と W3C-WD という2つのcssファイルを使っているのですが、どうも techniques.css が怪しいとにらんでページ全体を css ファイルごとローカルに保存して調べてみることにしました。しかし、あの灰色のブロックがどの部分に起因しているのかわかりません。そこで css ファイルを適当な部分ごとにコメントアウトして、該当する部分を絞り込むことにしました。

その結果、以下の部分をコメントアウトすると症状が出ないことがわかりました。


div.code {
  white-space: pre;
  font-family: 'Andale Mono', Courier, monospace;
  font-size: 100%;
  line-height: 120%;
  display: block;
  overflow: auto;
  width: 100%;
}

さらに絞り込むと、 overflow:auto の部分だということがわかりました。

サンプルの html を書いてある部分ですね。ふーむと思いつつ、ここでちょっと閃くものがありました。:p)

もしやと思い、Mozilla Firebird の画面を広くしてみました。おお、灰色のブロックが消えるではないですか！私の通常のブラウザの画面は幅800pxもありません。どうも広い画面だと灰色のブロックは出ないようなのです。それで、症状が出る人と出ない人がいたのではないでしょうか?

ま、根本的な解決にはなっていませんが、これでなんとなく原因がわかって一安心と思って、一応こないだ症状が出なかった win2k の Mozilla Firebird 0.7 でも試してみました。

がーん、0.7@win2k では、画面を狭くしても再現しません。ということで振り出し戻りますた。:p)

「続・HTML Techniques for WCAG 2.0 のページ」へコメントをつける

この記事へのツッコミ

1: のり (2003-12-12T22:32:54+09:00): リンクミス修正age スマソ。
2: めざら (2003-12-13T19:16:12+09:00): うちのは，(Win98; ja-JP; rv:1.5) Gecko/20031007 Firebird/0.7
ですが，同様の現象が出ました。
表示している状態で窓のサイズを変えてみると，スクロールバーが
出たり，灰色マスクがかかったりして，楽しめました。
ローカルに保存したCSSのoverflow: auto;をoverflow: scroll;に
してみ実験したら，同じ現象が出るでしょうか？？
3: のり (2003-12-13T19:41:44+09:00): あ、じっちゃんのとこでも再現しましたか。
ローカル保存した css の overflow:auto を overflow:scroll にしてみる件ですが、これがまた不思議なことにscrollにしても再現するんですよ。うちでは。どうなっているんだろ。何か複雑に原因が絡み合っていそうでこれ以上の追求はほぼあきらめ状態です。:p)
4: 1215 (2003-12-15T09:41:20+09:00): 再現しました。原因はさっぱりわかりません。
このマスクの上へカーソルを置くとマウス中ボタンでスクロールができません。
17インチCRT、Windows98SE、解像度 800ｘ600、ウィンドウ最大でも、中途半端なサイズでも再現します。
ページの読み込み始めには表示されず、読み込み終わるとマスクが現れます。
Mozilla - 同じ幅と高さのマスク
Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.5) Gecko/20031007
・ページ最上部のW3Cのロゴに被さる部分から下の「HTML Techniques for WCAG 2.0」の上一行まで・「Abstract」の段落の3行目から下へ被さる部分に
Mozilla Firebird - 同じ幅で異なる高さのマスク
Mozilla/5.0 (Windows; U; Win 9x 4.90; ja-JP; rv:1.5) Gecko/20031007 Firebird/0.7
・ページ最上部のW3Cのロゴの上に「Abstract」の部分の1/3の高さ
・「Abstract」に被さる部分はのりさんと同じ
userContent.cssのカスタマイズで共通する部分は次の行ですが、全然関係無さそう。
a[href^="mailto:"]:before { content: "\\2709 " }
a[href^="javascript:"] { color: green !important }
:link, :visited { text-decoration: underline !important }
a[href^="javascript:"] { cursor: move;}
5: のり (2003-12-15T12:05:18+09:00): 1215さん、ご報告ありがとうございます。再現されましたか。
ブロックにかかるとマウスのスクロールボタンが効かなくなるのはうちも同様ですね。1215さんのところで全画面にしても症状が出るのはおそらく、800*600だからかもしれません。おそらくもっと解像度を上げると消えるのではないかと思います。
6: 1215 (2003-12-17T05:18:54+09:00): おっしゃるとおり、1024*768ではマスクは表示されませんでした。
しかし、この解像度ではフォントサイズを1.5倍にしたりグラフィックチップを買い換えたりしないと使い物になりません。
私の環境、Gekko系、W3Cのいずれかがアレなのでしょう。ちょっと残念です。

この記事の永続的 URI ならびにトラックバック ping URI: http://diary.noasobi.net/2003/12/diary_031212a.html

朝顔日記

「続・HTML Techniques for WCAG 2.0 のページ」へコメントをつける

この記事へのツッコミ