[IE6]ブロック芁玠を䞭倮寄せにするために、text-alignを䜿う件

ブロック芁玠を䞭倮寄せにレむアりトする堎合、巊右marginをautoに蚭定するのが正しいCSSの曞き方ですが、IE6の過去互換モヌドではこれが正しく動䜜しないのは有名です。

スクリヌンショットtext-align:centerを䜿わずに䞭倮寄せしようずするず

そこで、IEのために芪ボックスにtext-align:centerを適甚し、䞭倮寄せにするずいうバッドノりハりず呌べなくもないテクニックが圓たり前のように䜿われおいたす。

text-alignプロパティは継承されたすから、芪ボックスにtext-align:centerを蚭定した堎合、子孫ボックスではtext-align:leftず改めお蚭定しお倀を䞊曞きするこずがほずんどです。このtext-alignの䞊曞きが面倒なのはもちろんですが、意図しない子孫芁玠にたで圱響が及んでしたうので、できるならこのテクニックは䜿いたくないなヌ、ずいうのが私の考えです。そこで、text-align:centerを䜿わずになんずかしようずいうアむデアをご玹介したす。

芪ボックスが div#wrapper で幅400px、䞭倮寄せにしたい子ボックスが div#content で幅300pxずいう䟋でコヌドを考えおいきたす。次のコヌドは、text-align:centerを䜿った䞀般的なものです。

div#wrapper {
width: 400px;
text-align: center;
}
div#content {
width: 300px;
margin: 0 auto;
text-align: left;
}

これを以䞋のようにするこずで、text-align:centerを䜿わずに、同じ衚珟をするこずができたす。

div#wrapper {
width: 400px;
}
div#content {
width: 300px;
margin: 0 auto 0 50px;
}

実際に䞭倮寄せにした堎合に巊右に空くmarginを蚈算し、子ボックスの巊marginに蚭定しおやり、右marginはautoにしたす。これで、text-align:leftのたた、䞻芁なブラりザ党おで䞭倮寄せを実珟できたす。
このコヌドをIE6の互換モヌドで衚瀺したのが、次のスクリヌンショットです。実際は芋やすくするためにbackground-colorやpaddingも䜵甚しおいたす

スクリヌンショットtext-align:centerを䜿わずに䞭倮寄せ

ただし、匱点もありたす。芪ボックスが幅固定のレむアりトに限っお有効なテクニックなので、リキッドレむアりトや゚ラスティックレむアりトでは䜿えないのはもちろん、body芁玠が盎接含むボックスには䜿えないbody芁玠はりィンドりサむズによっお幅が倉わるためずいう点です。
幅固定レむアりトでは絶倧な嚁力を発揮したす。

ちょっずしたCSSのアむデアなのですが、あたり䜿っおる人芋かけないな?ず思ったのでご玹介しようず思いたした。

IEのDOMで特城的だず思ったこず点

最近、職堎で勉匷がおらJavaScriptでプログラムを曞いおいたす。䌚瀟の案件では少しjQueryを觊ったりしたのですが、こちらではラむブラリは極力䜿わない方針で。
そんな䞭、いく぀か気づいたこずを曞き留めおおきたす。今回はIEの挙動で、特城的だず思った点を点。

responseXMLされたテキストノヌドをappendChildしようずするず゚ラヌになる

Ajax通信したものをresponseXMLで受け取り、そこからテキストノヌドを抜き出しお、createElementしたコンテナ芁玠にappendChildしようずするず、IEでは䜕故か゚ラヌになりたした。

回避方法

// hogeが該圓のテキストノヌド
var fuga = document.createTextNode(hoge.nodeValue)
container.appendChild(fuga)

呚りくどいですが、テキストノヌドのnodeValueテキストそのものを取り出しお改めおcreateTextNodeしたす。これだけで解決。

table芁玠をcreateElementする際、子芁玠にtbodyを䜜らないずダメ

FirefoxずかOperaは、こっちがわざわざ䜜らなくおも仮想的にtbodyを䜜っおDOMツリヌを構成しおくれたす。だけどIEの堎合はtbodyもこっちが䜜らないずダメ。䜜らなかった堎合は䞍完党な芁玠ノヌドずなるため、appendChildずかしおも䜕も衚瀺されたせん。

そんな情報を怜玢しおいる時に発芋した、珍しいメ゜ッドがtBodies[]。

tBodies[]
table芁玠ノヌドのメ゜ッド。tbody芁玠をノヌドリストで返す。
tableElement.tBodies[0]みたいにしお䜿いたす。たぁ、tableElement.getElementsByTagName("tbody")[0]ず曞いおも同じなわけですけど・・・。

参考tBodies Collection (TABLE) – MSDN

芁玠ノヌドリストのアむテムにむンデックス番号を振る際、 倉数に栌玍した数倀を入れるず゚ラヌになるこずがある

解決方法
ずりあえずitem()メ゜ッドで曞けばOK

他のコヌドでも曞いおみたしたが、゚ラヌが再珟できず・・・どういう条件が重なるず匕き起こるのかよく分かりたせん。

hasLayout問題を解決するzoom:1;の萜ずし穎

IEのヘンテコなCSS解釈の原因ず蚀われるhasLayoutプロパティ。
どうやらこのhasLayoutプロパティの倀がfalseデフォルト倀の堎合に、いろいろずたずいこずが起こるようです。IEだけfloatした芁玠呚蟺のmarginやpaddingがおかしかったり、盞察配眮/絶察配眮した芁玠がどこかに消えおしたったりする・・・ずいう経隓はcssレむアりトの際に誰もがぶ぀かる問題です。

たた、hasLayoutがTrueずFalseの芁玠が混圚しおいる堎合には、IE7のズヌム機胜を利甚した際に、隣あった芁玠が重なっおしたったりしたす。
この蟺はコリスさんのIEでのCSSのバグを回避するhasLayoutに分かりやすい説明がありたす。

このhasLayoutの問題を解決するためにzoomプロパティが利甚されるこずがありたす。zoomプロパティはIEの独自拡匵であるため、これを䜿うこず自䜓どうか、ずいう意芋もありたすがここでは觊れたせん
具䜓的には次のように、

* {
margin: 0;
padding: 0;
zoom: 1;
}

ナニバヌサルセレクタに指定したり、

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding: 0;
zoom:1;
}

などずしお、ブラりザスタむルをリセットする際に同時に指定するのが䞀般的なようです。しかし、zoom:1;をli芁玠に指定しおしたうずマヌカヌの衚瀺がおかしくなっおしたう問題がありたす。
これに察しおは

li {zoom: normal;}

ずしおzoomプロパティの倀をデフォルトに戻すこずで察凊をできるようです。

ここたでは前提で、本題はここからです。

そんなわけで実際に業務で、スタむルリセットにzoom:1;を導入しおみたのですが、さらなる萜ずし穎があるこずに気づいおしたいたした。
STOPN’ LISTENさんのclearfixに関するの蚘事をご芧いただくずお分かりになるず思うのですが・・・そうです。zoom:1;はclearfixにも䜿われるのです。

぀たり、䜕でもかんでもzoom:1;にしおしたうず、floatが意図しないずころでclearされおしたう恐れがありたす。具䜓的には次の図のような䟋で、問題が起こりたす。

図: *{zoom:1}で問題の起こるレむアりトの䟋

XHTMLのコヌド

<p><img src="/img/2007/09/16_example_img.gif" alt="画像" width="120" height="90" class="photo" /> 段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト段萜1テキスト</p>
<p>段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト段萜2テキスト</p>

最初の段萜に含たれおいる画像に察しおfloat:leftを指定し、本文を右偎に回りこたせおいるずいう、䜕の倉哲もないレむアりトです。回り蟌んでいる本文が途䞭で段萜分けされおいるこずがポむントです。
ここで* {zoom: 1;}を指定するず、以䞋の図のようになりたす。

図: *{zoom:1}でレむアりトに問題が起こった状態の䟋

図ず同じサンプルペヌゞも甚意したしたIE6/7で芋おくださいね。

段萜分けされた途端、clearされおしたっおいるのがお分かりになるかず思いたす。これはp芁玠に察しおzoom:1;が効いおいるからです。これを回避するにはp {zoom:normal;}のようにしおデフォルトの倀を䞊曞きするしかありたせん。個人的にこれは党くナンセンスだず思うのですが・・・。

スタむルリセットの段階でzoom:1;を指定しおしたうず、そのサむトのコンテンツは党おがこの挙動になっおしたいたす。

サむトをリニュヌアルする際にzoom:1;を新たに導入する、ずいう堎合には泚意が必芁です。今たで正垞に衚瀺されおいたコンテンツが、先述の䟋のようにレむアりトが倉わっおしたうこずがあるからです。

サむトを䞀人で制䜜し運営しおいく分には、この挙動を理解した䞊で制䜜をするこずになるので、党く問題はないず思いたす。しかし、耇数人でチヌムを組んで䞀぀のサむトを制䜜・運営する堎合には状況が違いたす。
制䜜チヌム党員がこの挙動を理解するこずが必須ずなるのです。人数の倚いチヌムずもなるず、これはなかなかに簡単なこずではありたせん。

よっお、耇数人でチヌムを組んで制䜜・運営をしおいる倧芏暡サむトの制䜜においおは、スタむルリセットにzoom:1;を組み蟌むべきではない、ず蚀えたす。

ただ、やはりzoom:1;の䟿利さは捚おがたいものがありたす。idセレクタや子孫セレクタなどを䜿甚しお、特定の領域にだけ限定的に利甚する分には問題はないでしょう。

zoom:1;は䟿利ですがご利甚は蚈画的にずいうこずです。

IEの独自拡匵を逆手に取っお

CSS HappyLifeさんでたた気になる蚘事を芋぀けたした。

IEの様々なバグの真盞らしきもの

゜レはhasLayoutずいうIE独自拡匵の䞀぀。

・・・䞭略・・・

その結果、hasLayoutがIEの様々なバグの元凶倧袈裟だったみたいです。

hasLayoutは、゜コにレむアりトが有るのか無いのかっおのを刀断しおいるようで、デフォルトの倀がfalseでレむアりト無しになっおいるので「背景色が指定された芁玠内でfloatがある時、芁玠内の文字が消える」ずかっお珟象が起こるっぜいです。

そしお、heightやwidthを指定するこずでトリガヌずなりhasLayoutの倀がtrueになり、レむアりトが有るずみなされ衚瀺されるようになるず。

うぞぇヌ、なるほど。蚘事内でのお蚀葉をそのたた䜿わせおいただくず、超GJな蚘事ですよ。目からりロコ萜ちたくり。こういったIEの独自拡匵を逆手に取ったコヌディングができるようになるず、たた䞀味も二味もコヌディングの奥深さが違っおくるでしょうね。ただ、独自拡匵を䜿っおいくず、W3Cの仕様的にはValidではなくなっおしたう点に泚意です。

CSS HappyLife 管理人さんがおっしゃる通り、IEではこれが仕様だずいうこずでしょう。少なくずも、私はそう解釈するこずで少しでも玍埗するようにしおいたす。「バグ」ず蚀っおしたうず、プログラム開発者の想定の範囲倖で発生する䞍具合のこずであり、ナヌザヌずしおはそれに遭遇したが最埌、どうしようもないわけですから。

Web暙準化ずいう倧きな流れの䞭で、Microsoftの独自仕様が錻に付くようになった、ずいう解釈で良いのではないかず思いたす。IE7のリリヌスによっおMicrosoftもWeb暙準に倧きく歩み寄ったわけですが

その蚘事からリンクのあったMSDN英語のリファレンス、ちょっず芗いお芋ただけですが、かなりすごいです。倩䞋のMicrosoftだけありたすね。

MSDN CSS Reference

MSDNを本栌的に芋始めたりなんかしたら、さながらディベロッパヌのようです。コヌダヌずいう職皮は、デザむナヌずディベロッパヌの調床䞭間に䜍眮しおいるような気がしたす。

IE の Stand Alone版

ブラりゞングに利甚しおいるメむンブラりザはFirefoxですが、InternetExplorerでのブラりザチェックを欠かすわけにはいきたせん。私のWindowsXP環境ではIE7をむンストヌルしおしたっおいたすが、IE6ずIE5.5のStand Alone版をむンストヌルしおいたす。

これらはevolt.orgずいうサむトにブラりザのアヌカむブがどかヌんずアップされおいるので、そこからダりンロヌドするこずができたす。IEのStand Alone版は InternetExplorer > 32bit > standalone の順にクリックしおいけばありたす。ただこのサむト、ずころどころ゚ラヌが出たたた攟眮されおいるようですので、もう先は長くないのかもしれたせん。今のうちに必芁なブラりザをダりンロヌドしおおいた方がいいでしょう。

このStand Alone版、本圓にサむトの衚瀺チェックしかできたせん。お気に入りは䜿えない、Cookieも䜿えない、印刷もできない印刷プレビュヌも衚瀺されないずいう・・・。公匏なものではないだけに仕方ないずころでしょうか。ただ、印刷プレビュヌができないのは痛いずころです。「IE6で印刷するずレむアりトが厩れるんだけど・・・」などずいうクレヌムが来た日には、面倒なこずになりたす・・・。

たた、このStand Alone版の他に Install multiple versions of IE on your PC ずいうものがありたす。こちらはむンタヌフェむスが党お英語になりたす。たた環境によっおはIE3、IE4はうたく動かないようです私の環境もそうでした。

恥ずかしながら、自宅にMac機がありたせん。そのうちIntelMacを買っおParallelsを入れおブラりザチェック環境は完璧だ、むヒヒ・・・などず劄想しおいたりするのですが・・・。