2006/03/10(Fri)ブラウザ互換性

はてブ数 2006/03/10 5:27 サイト運営::HTML つーさ

主にIEの不具合ネタです。また長めです。

IEでXHTMLを標準モードで見てもらおうと思ったら、
<?xml version="1.0" encoding="UTF-8" ?>
って、書いちゃだめなんですよ!

この文を見て「何を今更」だとか「それ何のタグ?」とか思われる方は
続きを読まれる必要はございません。

IEには、イメージを回り込ませるとテキストが消える不具合と
borderが消える不具合があるよってこと。
あと、文字サイズを固定することや、レイアウトの横幅を固定することについての考え。
も、ちらっと書いちゃいました。

標準モードってのはDTD宣言で切り替わるアレのことです。

最近のブラウザでは、
"今までの正しくないブラウザ向けに書かれたHTMLを解釈するための互換モード" と
"最近の正しいブラウザ向けに書かれたHTMLを解釈する標準モード" とがあります。

HTML先頭のDTD宣言()を見て、
宣言なしや、HTML3.2、URL部分のない 4.01 Transitional は前者、
4.01 Strict や XHTML では後者ってことになります。

その二つはどう違うか。
とりあえず目に見える範囲で。
CSSの文字サイズについて予約語を使っている場合、IEではサイズが変わってしまいます。
互換モードに比べて標準モードが一回り小さいです。
標準モードの text-size:medium; は であり、
互換モードの text-size:medium; は です。
また、他ブラウザもCSSのwidthがborderを含むか含まないか、みたいなとこが変わります。

ちなみに、いい加減な指定も「好意的な解釈」か「冷たい解釈」かが変わります(笑
width:800;(単位がない!) は
互換モードでは800pxを指定したものとして解釈されますが、
標準モードではwidth指定自体がなかったことになります。

で。

問題はIE6なんですが、
より前になんかがあると強制的に互換モードになってしまいます。
「なんか」って言うのは「なんでも」です。「XML宣言でさえも」です。
正しい文書型宣言をしてるのに互換モードになってしまうとは情けない><;;

他のブラウザは標準モードなのに、IEだけ互換モードになってしまう。
widthの解釈が変わったり、文字のサイズが変わったりするわけです。
場合によっては、せっかくのデザインが崩れてしまいまうんですね。

どうしたらいいかといえば、Unicode使ってXML宣言取っ払うしかないです。
そんなこんなで、うちはXML宣言してないです。したいですが。。
# つか、XHTML1.1にVaildじゃない時点でDTD宣言もしちゃだめな気が……

あとは……

スタイルシートでイメージの回り込みを行うと
テキストが正常に描画されなくなるIEの不具合。
→ 悲しいことですが、

を使いました。

どういうときにか、細かいことは調べていないのですが、
ボックス要素内の最初のボックス要素に関連づけたborderが
正常に描画されなくなるという不具合もあるみたいです、IE。
→ 空っぽの

<<を書くことで解決します。あり得ません。

その辺が頭痛いよって言いたかったです。
こんなことより、横幅を何pxにしようかと悩んだ方が数倍有意義です。

文字サイズが変わってしまうことに関して、ですが。
たまに、pt指定やpx指定してるサイトを見かけます。
私は好きになれません。
ブラウザの「文字のサイズ」切り替えが効かなくなり、ユーザビリティが低下します。
ブラウザの横幅を固定するのも似たような理由であまり好きじゃないです。
というか、文字サイズ9pxを指定してるサイトも見たことあります。
「読まないでください!><;」って言ってるようなもんです。
それに気づかず、小さい文字がCOOL!を盲信している人たち、
「いい加減目覚めなさい。」(笑

最近ブログで横幅固定のページ増えてきましたね。
それでは何のためにブラウザのサイズが変えられるのかわかりません。
だから、あんまり、固定やりたくないです。
が、もし、固定するのであれば、横幅は700pxかそこらにしとくのがいいかなと思っています。
自分がブラウザをそのくらいのサイズにして使っているので(笑

昼間読んだ記事ですが、
「25%程度の人が800px以下の横幅でブラウザを使っている」
「40%程度の人が850px以下の横幅でブラウザを使っている」
なんてアクセス解析の結果が書いてありました。
私のような小さい画面派も決して少なくはないんですネ。
大きい画面にブラウザをめいっぱい広げて使う人は希だと思います。
大概のサイトで余白が出来て、無意味に画面を占領することになるからかも?
そこまで小さい画面まで面倒見ることもないと思いますが、そういうことらしいです。

ちなみに、CSS2には max-width や min-width という指定があって、
最大widthと最低widthが指定できます。デザインの幅も広がりそうですね。
現在対応してるのはGeckoだけかな?
Opera7はわかりませんが、IEは対応していません(ほんとダメですね、IE)

話が脱線しました。

とにかく、IE6で標準モードにしたけりゃ、
文字コードをUTF-8かUTF-16にしてXML宣言を外すしかありません。
XHTML1.1+他文字コードで標準モードを使う道はありません、残念ながら。
IE7で直ってるといいですね。