スポンサーサイト

■ スポンサー広告 Posted by ひぐま (Higmmer) on -------- at --:--:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

XHTMLに対応してみた

■ ネット Posted by ひぐま (Higmmer) on 2005-11-28 at 01:31:28

◆共有テーマ: HTML/CSS [コンピュータ]

思うところあってこのサイトのテンプレートをXHTML 1.0に対応するよう修正してみました(Strictは大変なのでとりあえずTransitional)。一応firefox 1.0.xとIE6 SP2で表示確認していますが、お使いのブラウザで表示が崩れたという方がいらっしゃいましたら教えて下さい。
(追記: 初出時不具合があったので修正しました。ご迷惑をおかけしました)
 
古い記事の一部にXHTML的にValidでないタグが含まれていますが、テンプレートとしてはXHTMLに対応させたつもりです。試しにこの記事をW3CでチェックすればValidになるはずです。ついでにCSSも若干修正しましたが、後述する理由のためValidにはなっていません。あと本当なら段落区切りは<br/>ではなく<p>~</p>を使うべきなんでしょうが、サーバーが自動的に入れてくれる<br/>が便利なのでそのままにしています。

後から思い出せるようにXHTML化に伴って私がハマった箇所についてメモしとこうかと思います。Webデザインをしたことがある方なら誰でも知っていると思われる、IEでの困った挙動に関するものなんですが。

・IE6ではXML宣言を書くと互換モードで動作する [→参考]

本来、XHTML(XML)文書では

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

などと書くべきですが、IE6では何故か冒頭にDOCTYPE宣言を持ってこないと互換モードで動作してしまうとのこと。互換モードになると色々とおかしなことになるのですが、当ひまグの場合以下の現象が起こりました。

 - コンテンツがセンタリングされない
 - フォントサイズが大きくなる

前者についてはブロック要素の左右マージンをautoに設定すればセンタリングされるはずが左端に寄ってしまうという現象です。定石に従ってbody要素でtext-align: centerを指定しているのですが、これが何故か効いてくれないようです。後者についても古いIE対応としてvoice-familyハックを使ってフォントサイズを指定しているつもりなのですが、これも意図に反して働いていないようです。どこが間違っているのか分かる方おられましたら指摘して頂けると助かります。

結局、単純にXML宣言を入れないことで標準モードで動作させるという方法で対処することにしました。何となく気持ち悪いですが仕方ありません。ここで不安になったのですが、IE5.xを使っておられる方にはちゃんと表示されているのでしょうか?こちらでは確認できないため、よろしければ該当の方はコメントで報告して頂けませんでしょうか? ちなみに手元のfirefoxでは以下のように表示されています。

スクリーンショット - Firefox 1.0.xでの表示

・英単語がボックスをはみ出すとボックス幅が拡張されてしまう [→参考]

現在サイドバーの「最近のトラックバック」欄に長い文字列が含まれているためfirefoxではサイドバーから文字がはみ出してしまっています。それだけならまぁいいのですがIEでは文字列に合わせてボックスがリサイズされてしまい、結果としてサイト全体のレイアウトが崩れてしまっていたようです(最近IEでの表示確認を怠っていたので気づいていませんでした。申し訳ありません)。これに対するうまい対処法が分からなかったため、とりあえずIEの独自属性であるword-break: break-allを指定して強制的に改行させています。この結果W3CでValidと判定されなくなってしまいました。不本意ですが見た目を良くするための苦渋の選択です(´・ω・`)

トラックバック

この記事について書く(FC2ブログユーザー)
※言及リンクの無いトラックバックは無効です

PageTop▲

コメント

PageTop▲

コメントの投稿

 
 
 
 
 
 (後で編集・削除したいなら必須)
 
  

PageTop▲

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。