<?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>RuputerFan &#187; CSS</title>
	<atom:link href="http://sygnas.jp/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://sygnas.jp</link>
	<description>萌え産業とFlashの覚え書きサイト</description>
	<lastBuildDate>Sat, 04 Sep 2010 14:01:03 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://sygnas.jp/tag/css/feed/" />
		<item>
		<title>IE6で次の要素のmarginに影響をうけるバグ</title>
		<link>http://sygnas.jp/2010/01/27/ie6%e3%81%a7%e6%ac%a1%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%aemargin%e3%81%ab%e5%bd%b1%e9%9f%bf%e3%82%92%e3%81%86%e3%81%91%e3%82%8b%e3%83%90%e3%82%b0/</link>
		<comments>http://sygnas.jp/2010/01/27/ie6%e3%81%a7%e6%ac%a1%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%aemargin%e3%81%ab%e5%bd%b1%e9%9f%bf%e3%82%92%e3%81%86%e3%81%91%e3%82%8b%e3%83%90%e3%82%b0/#comments</comments>
		<pubDate>Wed, 27 Jan 2010 08:33:31 +0000</pubDate>
		<dc:creator>ダダ</dc:creator>
				<category><![CDATA[PC・デジタル]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[バグ]]></category>

		<guid isPermaLink="false">http://sygnas.jp/?p=187</guid>
		<description><![CDATA[




ちょっとハマったのでメモしておきます。

上記画像のように、ヘッダ部分にコンテンツ部分が食い込むようなレイアウトを作ろうとしたところ、IE6だけ下の要素の影響を受けるという不可思議な現象が起きました（IE7、8 [...]]]></description>
			<content:encoded><![CDATA[<div class="pie-gallery">
<div class="pie-item">
<div class="pie-img-wrapper"><img src="http://lh3.ggpht.com/_TVHmE_WLwoo/S1_5dp0NLWI/AAAAAAAADns/dQQRsJsABMI/ie6bug.jpg?imgmax=512" alt="ie6bug.jpg" width="512" height="320" class="pie-img"/></div>
</div>
</div>
<p>ちょっとハマったのでメモしておきます。<br />
<span id="more-187"></span><br />
上記画像のように、ヘッダ部分にコンテンツ部分が食い込むようなレイアウトを作ろうとしたところ、IE6だけ下の要素の影響を受けるという不可思議な現象が起きました（IE7、8は問題なし）。</p>
<p>htmlとcssはこんな感じ。</p>
<pre class="brush:php">&lt;div id="box1"&gt;
	&lt;div id="box1-inner"&gt;BOX 1&lt;/div&gt;
&lt;/div&gt;

&lt;div id="box2"&gt;BOX 2&lt;/div&gt;</pre>
<pre class="brush:css">#box1{
	width:		100%;
	position:	absolute;
}

#box1-inner{
	width:		400px;
	margin:		auto;
	border:		solid 4px red;
}

#box2{
	width:		200px;
	height:		300px;
	margin:		auto;
	border:		solid 4px blue;
}</pre>
<p>いろいろ試しててわかったのは、</p>
<ul>
<li>「#box2」の「margin:auto」を削除するとFFもIEも一致する</li>
<li>「#box1」の「position:absoulte」を削除するとFFもIEも一致する</li>
</ul>
<p>「margin:auto」と「position:absolute」の組み合わせで発生するようです。<br />
他にも条件はあるかもしれませんが。</p>
<p>「position:absolute」が次の要素の「margin」の影響を受けるのなら、間に別の要素を挟んでしまえばよいと思い立ち、下記のようにしてみました。</p>
<pre class="brush:php">&lt;div id="box1"&gt;
	&lt;div id="box1-inner"&gt;BOX 1&lt;/div&gt;
&lt;/div&gt;

&lt;!-- 空のDIVを挟む --&gt;
<div id="dummy"></div>

&lt;div id="box2"&gt;BOX 2&lt;/div&gt;</pre>
<p>釈然としないものがありますが、とりあえずこれで解決しました。（´ワ`）</p>
<table  border="0" cellpadding="5">
<tr>
<td valign="top"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4839929734/ruputerfan-22/ref=nosim/" target="_blank"><img src="http://ecx.images-amazon.com/images/I/410AyffjJOL._SL160_.jpg" border="0" alt="現場のプロから学ぶXHTML+CSS" /></a></td>
<td valign="top"><font size="-1"><a href="http://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%AE%E3%83%97%E3%83%AD%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6XHTML-CSS-%E7%9B%8A%E5%AD%90-%E8%B2%B4%E5%AF%9B/dp/4839929734%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Druputerfan-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4839929734" target="_blank">現場のプロから学ぶXHTML+CSS</a><img src='http://www.assoc-amazon.jp/e/ir?t=ruputerfan-22&#038;l=ur2&#038;o=9' width='1' height='1' border='0' alt='' /><br />CSS Nite </p>
<p>毎日コミュニケーションズ  2008-11-11<br />売り上げランキング : 2534<br />おすすめ平均  <img src="http://g-images.amazon.com/images/G/01/detail/stars-4-5.gif" /></p>
<p><a href="http://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%AE%E3%83%97%E3%83%AD%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6XHTML-CSS-%E7%9B%8A%E5%AD%90-%E8%B2%B4%E5%AF%9B/dp/4839929734%3FSubscriptionId%3D15SMZCTB9V8NGR2TW082%26tag%3Druputerfan-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4839929734" target="_blank">Amazonで詳しく見る</a></font> <font size="-2">by <a href="http://www.goodpic.com/mt/aws/index.html" >G-Tools</a></font></td>
</tr>
</table>
]]></content:encoded>
			<wfw:commentRss>http://sygnas.jp/2010/01/27/ie6%e3%81%a7%e6%ac%a1%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%aemargin%e3%81%ab%e5%bd%b1%e9%9f%bf%e3%82%92%e3%81%86%e3%81%91%e3%82%8b%e3%83%90%e3%82%b0/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://sygnas.jp/2010/01/27/ie6%e3%81%a7%e6%ac%a1%e3%81%ae%e8%a6%81%e7%b4%a0%e3%81%aemargin%e3%81%ab%e5%bd%b1%e9%9f%bf%e3%82%92%e3%81%86%e3%81%91%e3%82%8b%e3%83%90%e3%82%b0/" />
	</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->