<?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>IE8.js &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/ie8-js/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Mon, 25 Apr 2011 18:14:34 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>IE8/9.jsで、ある条件が揃うとスタイルが飛んでしまう現象について</title>
		<link>https://blog.mach3.jp/2011/04/26/ie8js-ie9js-css-vanish.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Mon, 25 Apr 2011 18:14:34 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE7.js]]></category>
		<category><![CDATA[IE8.js]]></category>
		<category><![CDATA[IE9.js]]></category>
		<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=1808</guid>

					<description><![CDATA[ちょっとハマったので備忘録。 IE7.jsは、クラシックなIEでモダンブラウザの機能を使うためのライブラリですが、 その系列のIE8/IE9.jsを使ってある条件が整うと、スタイルが消えてしまう不具合に遭遇しました。 ※ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>ちょっとハマったので備忘録。<br />
<a href="http://code.google.com/p/ie7-js/">IE7.js</a>は、クラシックなIEでモダンブラウザの機能を使うためのライブラリですが、<br />
その系列のIE8/IE9.jsを使ってある条件が整うと、スタイルが消えてしまう不具合に遭遇しました。</p>



<p>※執筆当初のIE7.jsの最新バージョンは、7.2.1(beta4)</p>



<figure class="wp-block-image"><img decoding="async" src="https://lh6.googleusercontent.com/_JJkNs5Ixl70/TbW5kn_mmaI/AAAAAAAABRw/hUaEeHSK38g/201104260307.png" alt="IE8/9.jsで、ある条件が揃うとスタイルが飛んでしまう現象について"/></figure>



<p></p>



<span id="more-1808"></span>



<h2 class="wp-block-heading">条件</h2>



<ol class="wp-block-list">
<li>セレクタの一番はじめのプロパティの値が「<em>inherit</em>」</li>



<li>セレクタの一番はじめのプロパティと「<em>{</em>」の間にスペースや改行等がない</li>



<li>セレクタ内で「<em>inherit</em>」を値にもつプロパティが二つ以上ある</li>



<li><em>IE8.js</em>または<em>IE9.js</em>を読み込んでいる</li>
</ol>



<p>これらの条件を全て揃えると、<em>そのセレクタ以降のCSSが全て無効になってしまいます</em>。<br />
例えばこんなコードで再現出来ます。</p>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">input</span>,<span class="hljs-selector-tag">textarea</span>,<span class="hljs-selector-tag">select</span>{<span class="hljs-attribute">font-family</span>:inherit;<span class="hljs-attribute">font-size</span>:inherit;}
</code></span></pre>


<p>実は、このコードは<a href="http://developer.yahoo.com/yui/reset/">YUIのreset.css</a>の一部（圧縮済）。<br />
つまりyui-resetとIE8.js/IE9.jsを同時に使おうとすると、<br />
やられてしまう可能性があるということに。</p>



<h2 class="wp-block-heading">原因</h2>



<p>どうやら<em>inherit</em>の親の値を取りに行くプロセスの中で、<br />
プロパティ名が「<em>{</em>」と接触している場合にうまくパース出来ていない模様。<br />
この仕組は<em>:before</em>や<em>:after</em>を擬似的に実装する為の仕組みなので、<br />
それが必要ないIE7.jsでは発症しないようです。</p>



<h2 class="wp-block-heading">解決策</h2>



<p>IE8.js/IE9.jsのパーサを改善すれば治るかもですが、<br />
相当面倒そうなので、この条件を揃わせないように注意する方が良さそうです。</p>



<ol class="wp-block-list">
<li><em>「{」とはじめのプロパティの間にスペースや改行を挟む</em></li>



<li><em>はじめのプロパティの値をinheritにしない</em></li>



<li><em>IE8/IE9.jsの使用をやめる</em></li>
</ol>



<p>1.は<a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a>等で圧縮してしまうと避けづらいので、<br />
その場合は2.に従ってプロパティの順番を変えてしまうか、<br />
または適当なプロパティを頭に挟むかすれば回避する事が出来ます。<br />
上の例なら、こんな感じに。</p>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">input</span>,<span class="hljs-selector-tag">textarea</span>,<span class="hljs-selector-tag">select</span>{<span class="hljs-attribute">z-index</span>:auto;<span class="hljs-attribute">font-family</span>:inherit;<span class="hljs-attribute">font-size</span>:inherit;}
</code></span></pre>


<h2 class="wp-block-heading">まとめ</h2>



<p>IE8/IE9.jsは:afterと:beforeが便利なのでたまに使っているのですが、<br />
思わぬ落とし穴でした。IEは！本当にIEは！！</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
