<?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/"
	>

<channel>
	<title>sui &#187; IE</title>
	<atom:link href="http://suirakukai.com/tag/ie/feed/" rel="self" type="application/rss+xml" />
	<link>http://suirakukai.com</link>
	<description>tomorrow is another day.</description>
	<lastBuildDate>Thu, 17 Nov 2011 02:17:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>ブラウザ上で IE 各バージョンのレンダリング結果を表示する Firefox のアドオン</title>
		<link>http://suirakukai.com/web/29/firefox-add-on-ie-netenderer/</link>
		<comments>http://suirakukai.com/web/29/firefox-add-on-ie-netenderer/#comments</comments>
		<pubDate>Fri, 25 Jul 2008 19:50:45 +0000</pubDate>
		<dc:creator>maako</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[add-ons]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://suirakukai.com/?p=29</guid>
		<description><![CDATA[ウェブサイトを作る際に、誰もが必ずしているのが各ブラウザでの表示テスト。 その中でもどうしても避けて通れないのが、日本では圧倒的シェアを誇る Internet Explorer さんでのテストです。 私は Firefox [...]]]></description>
			<content:encoded><![CDATA[<p>ウェブサイトを作る際に、誰もが必ずしているのが各ブラウザでの表示テスト。<br />
その中でもどうしても避けて通れないのが、日本では圧倒的シェアを誇る Internet Explorer さんでのテストです。</p>
<p>私は Firefox をデフォルトで使い、IE でのテストは各バージョンごとに立ち上げるのが面倒極まりないので <a href="http://www.my-debugbar.com/wiki/IETester/HomePage" title="IETester">IETester</a> なるツールを使っていますが、Firefox のアドオンにこんな便利なものがあったんだーというものを知ったので、メモっときます。</p>
<p><span id="more-29"></span></p>
<ul>
<li class="refer"><a href="https://addons.mozilla.org/ja/firefox/addon/6455" title="IE NetRenderer 0.8">IE NetRenderer 0.8</a></li>
</ul>
<p>ブラウザ上にページを表示し、右クリック、コンテキストメニューの「描画」から 「IE8 Beta」、「IE7」、「IE6」、「IE5.5」 各バージョンを選ぶと、それにあわせた IE でのレンダリング結果を見せてくれるわけですわー。これは便利。<br />
（ツールバーもインストールされるようなんですが、なぜか私のとこには現れない…笑）</p>
<p><a href="http://suirakukai.com/blog/wp-content/uploads/2008/07/ie_netrenderer.jpg" rel="lightbox[29]"><img src="http://suirakukai.com/blog/wp-content/uploads/2008/07/ie_netrenderer.jpg" alt="IE NetRenderer" title="IE NetRenderer" width="300" height="226" class="size-medium wp-image-28" /></a></p>
<p>んでもって、「IE6 &#8211; IE7 （混合）」、「IE6 &#8211; IE7 （差分）」を選ぶと、IE6, IE7 それぞれのレンダリング結果をかぶせた形で見られます。</p>
<p>IE NetRenderer （混合）<br />
※クリックすると大きな画像でごらんいただけます。</p>
<p><a href="http://suirakukai.com/blog/wp-content/uploads/2008/07/ie_netrenderer_mix.jpg" rel="lightbox[29]"><img src="http://suirakukai.com/blog/wp-content/uploads/2008/07/ie_netrenderer_mix-300x225.jpg" alt="" title="IE NetRenderer　（混合）" width="300" height="225" class="aligncenter size-medium wp-image-49" /></a></p>
<p>IE NetRenderer （差分）<br />
※クリックすると大きな画像でごらんいただけます。</p>
<p><a href="http://suirakukai.com/blog/wp-content/uploads/2008/07/ie_netrenderer_diff.jpg" rel="lightbox[29]"><img src="http://suirakukai.com/blog/wp-content/uploads/2008/07/ie_netrenderer_diff-300x225.jpg" alt="" title="IE NetRenderer　（差分）" width="300" height="225" class="aligncenter size-medium wp-image-50" /></a></p>
<p>ズレてレンダリングされているのがわかりますねぃ。<br />
差分で見ると、テキスト部分は白い文字、リンク部分はピンクの文字で表示されているのが IE6 でのレンダリング結果のようです。レンダリング結果がこれだけズレてるのは、line-height の設定の違いですね。</p>
<p>ボックスのレイアウトはきっちり組みますが、テキストなどは多少のズレがあっても私はそれほど気にしていません（ブラウザによってデフォルトのフォントサイズが違うし、そもそもみんながデフォルトのサイズで見てるかといったら、決してそうではないと思うので）。しかし、時には雑誌や新聞などの組版のように、きっちり考えられた上でのデザインをブラウザごとに反映せねばならぬこともあるかと思いますので（それも Web 上では限界はあると思うけど…）、そんなときにはお役立ちになるかもしれんね、ということで。</p>
<p>しかしまぁ、ここであーだこーだいっても仕方ないと思うんで、あーだこーだいいませんが、IE6 ってさ…どこまでしぶといんだろう。</p>
<p>こんなアドオンを入れなくてもよくなる日が早くくればいいなぁ。ハハ…</p>
]]></content:encoded>
			<wfw:commentRss>http://suirakukai.com/web/29/firefox-add-on-ie-netenderer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

