<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>今日の覚え書き Tickler's bunkum days &#187; IE</title>
	<atom:link href="http://blog.open-arms.biz/tag/ie/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.open-arms.biz</link>
	<description>ただのメモです、メモ。</description>
	<lastBuildDate>Tue, 07 Apr 2009 07:55:23 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.open-arms.biz/tag/ie/feed" />
		<item>
		<title>width解釈の違いへの対応策</title>
		<link>http://blog.open-arms.biz/200411/2431.php</link>
		<comments>http://blog.open-arms.biz/200411/2431.php#comments</comments>
		<pubDate>Wed, 24 Nov 2004 14:05:41 +0000</pubDate>
		<dc:creator>もそ</dc:creator>
				<category><![CDATA[Customize]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[mac]]></category>

		<guid isPermaLink="false">http://open-arms.sakura.ne.jp/wordpress/200411/24_%postid%.php</guid>
		<description><![CDATA[最近、「ブラウザによって見え方が違う。」と年中ごねておりましたが、どうにか問題が解決したので、このことで二度と悩まないように覚え書きしておこうと思います。
このサイトはメインコンテンツの周りをサイドバーの背景色と同じ色で [...]]]></description>
			<content:encoded><![CDATA[<p>最近、「ブラウザによって見え方が違う。」と年中ごねておりましたが、どうにか問題が解決したので、このことで二度と悩まないように覚え書きしておこうと思います。</p>
<p>このサイトはメインコンテンツの周りをサイドバーの背景色と同じ色で囲うという作りになっています。<br />
（さらに前は本文部（白背景）も枠で囲ってあったのですが、borderで囲えば囲うほどサイドタイトル横のマークの位置がずれてくるのでやめました。）<br />
この設定だとサイドバーの左右の余白がきっちりと揃い、見た目が美しくなるのでご満悦だったのですが、どうもIEとFirefox（以下FF）で見た目が違うんですね。<br />
あれこれ数値をいじってみた結果、どうやらIE6とFFではwitdhの解釈が違うらしいと言う事が判明。<br />
ボックスにborderを設定する場合、IEだとボックスの外側をborderでぐるっと囲む形になるのに対し、FFではボックスの内側にborderが入り込む形になっているっぽいのです。</p>
<p>私の場合、幅800pxのボックスに10pxのborderを設定していたので、結果IE6とFFでは20pxのずれができてしまい、それがデザイン崩れの大きな原因であるようでした。<br />
contents要素にborderを加えると、FFで微妙にデザイン崩れを起こしていたのも同じ理由のようです。</p>
<pre>＜幅:820pxの場合＞
IE6：正常に表示。
FF：右サイドの横に20pxの余白ができる。

＜幅:800pxの場合＞
IE6：ボックス幅が足りないので、右サイド要素が左サイド下に回り込んでくる。
FF:正常に表示。
</pre>
<p>ようやく原因が分かったので調べた結果、理由と対策をビシッと説明してくださっている神のようなサイトさんを発見しました。</p>
<h3><a href="http://adp.daa.jp/" target="_blank">Alternative Design Project</a>さん：<a href="http://adp.daa.jp/archives/000265.html" target="_blank">IE6のwidth解釈バグ対処法</a></h3>
<p>胸がす～っとするほどの、非常にわかりやすい説明でした。<br />
要点だけかいつまむと、正式なcssの解釈ではFFのように、borderはボックスの内のりに配置されなければいけないのですが、IE6にはボックス幅とborder幅を分けて考えてしまうという、かなり致命的なバグがある為に、レイアウト崩れが起こってしまうそうです。<br />
<strong>IE最悪</strong>です。<br />
このような問題を起こさないためには、基本的には、きっちりwidth設定をするcssを使用する場合、border要素を使わないのが一番だそうで…。<br />
（「XML宣言をしない」と言う対処法もあるみたいですが、これはこれで問題があるようです。詳しくはリンク先記事参照。）</p>
<p>こちらの記事には、　<br />
「それでもborder使いたいんだよ(ﾟДﾟ)!! 」<br />
と言う私のようなヤツにうってつけの対処法もちゃんと紹介されています。</p>
<p>border設定したいボックスの外に、さらにボックスを設置し、内側のボックスだけにpaddingを設定する事により、擬似的にborderをつけた時と同じように表示させる方法です。<br />
この方法を採用した結果、うちのサイトのid要素はこんな具合になりました。</p>
<p><a href="http://blog.open-arms.biz/archives/images/sitemap.png"><img alt="うちのサイトのid要素の図" src="http://blog.open-arms.biz/archives/images/sitemap-thumb.png" width="300" height="187" /></a></p>
<p>何だか囲いだらけです…。<br />
3カラムを囲う#boxの外にもう一つボックスをつけて、外側のボックスに幅を、内側のボックスにpaddingを設定してみました。<br />
こうする事によりcssを認識するブラウザであれば、だいたい同じように表示できるようになるそうです。</p>
<p>どうにかこのサイトも、レイアウト崩れを起こさないで見られるようになりました。<br />
macだとどう見えるのか分からないのが玉に瑕ですが、多分大丈夫だと思いたいです。<br />
肩の荷が一つ下りて、今日はいい気分で寝られそうです。<br />
もしレイアウト崩れに悩んでいる方がいらっしゃったら、是非リンク先の記事を読んで見てくださいませ。<br />
目から鱗がぼろぼろ落ちます。</p>
<img src="http://blog.open-arms.biz/?ak_action=api_record_view&id=31&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://blog.open-arms.biz/200411/2431.php/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.open-arms.biz/200411/2431.php" />
	</item>
		<item>
		<title>レイアウト崩れ修正（その2）</title>
		<link>http://blog.open-arms.biz/200411/1121.php</link>
		<comments>http://blog.open-arms.biz/200411/1121.php#comments</comments>
		<pubDate>Thu, 11 Nov 2004 02:19:53 +0000</pubDate>
		<dc:creator>もそ</dc:creator>
				<category><![CDATA[Customize]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[Opera]]></category>

		<guid isPermaLink="false">http://open-arms.sakura.ne.jp/wordpress/200411/11_%postid%.php</guid>
		<description><![CDATA[昨日のコメントでやっぱりsafariでデザイン崩れがあるようだ、と教えて頂いたので、頭を抱えつつ、次の打開策を検索していた所、こちらのページにたどり着きました。
MSM-03Cさん：表示の崩れない3段カラム
左サイドバー [...]]]></description>
			<content:encoded><![CDATA[<p>昨日のコメントでやっぱりsafariでデザイン崩れがあるようだ、と教えて頂いたので、頭を抱えつつ、次の打開策を検索していた所、こちらのページにたどり着きました。</p>
<h3><a href="http://www.stupid-net.com/" target="_blank">MSM-03C</a>さん：<a href="http://www.stupid-net.com/x/mt/archives/000188.shtml" target="_blank">表示の崩れない3段カラム</a></h3>
<p>左サイドバーとメインを専用の箱に入れてあげる事により、css対応ブラウザであればデザイン崩れが起こらなくなるとの事。<br />
大きな2カラムの中に小さな2カラムを入れてあげる、という事みたいです。<br />
基本的に3カラムというのは、どのブラウザでも綺麗に表示させる、というのは難しいみたいですね。<br />
でもせっかく3カラムにしたんだし、あきらめずに頑張りたいヨ(｀･ω･´)</p>
<p>というわけで、わらにもすがる思いで早速やってみました。<br />
ついでにアドバイスに従って、今まで「左カラム→本文→右カラム」の順に表示されるようにしていたのを、「本文→左カラム→右カラム」の順に表示されるように変更。<br />
CSS非対応ブラウザの場合に、とりあえず本文から表示されるので、見る人に優しいとの事。<br />
そんな事は思いもかけていなかったので、なるほどと感心してしまいました。<br />
　<br />
そんなこんなで作業終了。<br />
IE6でいけそうなのを確認後、<s>エラーでまくりだけどここしかない</s><a href="http://danvine.com/iecapture/" target="_blank">「ieCapture」</a>で、チェックをかけてみました。<br />
　<br />
とりあえずIE系はオールクリア。safari・OPERA・Firefoxもどうにか見られるっぽいです。<br />
今度こそ終わりだといいんだけど…。</p>
<p>引き続きIE系以外のブラウザをお使いの方からのご意見をお待ちしてます。<br />
見た目崩れがありましたらコメントで是非教えてください。</p>
<img src="http://blog.open-arms.biz/?ak_action=api_record_view&id=21&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://blog.open-arms.biz/200411/1121.php/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.open-arms.biz/200411/1121.php" />
	</item>
	</channel>
</rss>
