<?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>#raynix# &#187; IE</title>
	<atom:link href="http://raynix.info/archives/tag/ie/feed" rel="self" type="application/rss+xml" />
	<link>http://raynix.info</link>
	<description>Welcome to the real world, it sux, but you gonna luv it.</description>
	<lastBuildDate>Thu, 09 Sep 2010 04:40:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>为IE6捉虫的一个小技巧</title>
		<link>http://raynix.info/archives/362</link>
		<comments>http://raynix.info/archives/362#comments</comments>
		<pubDate>Fri, 24 Oct 2008 06:11:21 +0000</pubDate>
		<dc:creator>raynix</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://raynix.cn/?p=362</guid>
		<description><![CDATA[按照设计稿做好了CSS，但是唯独在IE6里面有着意外的表现：左栏和中栏之间的宽度比设计中指定值要大。是什么原因呢？我一时没想明白。于是我根据经验把可能影响到宽度的那个div的背景色改为红色，这样一看就明显了： CSS里的设定是{padding:0; margin: 7px 0 0 10px;}，就是说上面留白7px，右和下不留，左边留白10px。根据经验，我怀疑是那个10px导致，于是为IE6单独写了ie6sux.css，并在里面补上{padding:0; margin: 7px -10px 0 10px;}，在右边给出-10px作为补偿。问题解决。 分析：IE6对留白（margin）的处理与众不同，留白的宽度似乎没有受到总宽度的限制，因此导致了右边超长出来。这应该算是个加减法级别的bug了。好在IE6用户会逐步转移到IE7，以后应该不必受此bug讨扰。 © raynix for #raynix#, 2008. &#124; Permalink &#124; 唉, 一个评论都没 &#124; Add to del.icio.us Post tags: css, IE Feed enhanced by Better Feed from Ozh]]></description>
			<content:encoded><![CDATA[<p>按照设计稿做好了CSS，但是唯独在IE6里面有着意外的表现：左栏和中栏之间的宽度比设计中指定值要大。是什么原因呢？我一时没想明白。于是我根据经验把可能影响到宽度的那个div的背景色改为红色，这样一看就明显了：</p>
<p><a href="http://picasaweb.google.com/lh/photo/bBjAsVlQzZCnvLFngC8rHw"><img src="http://lh5.ggpht.com/raynix/SQFiNX9-KoI/AAAAAAAAAs8/-1aleZr2z1w/s144/ie6-margin-bug.png" alt="" /></a></p>
<p>CSS里的设定是{padding:0; margin: 7px 0 0 10px;}，就是说上面留白7px，右和下不留，左边留白10px。根据经验，我怀疑是那个10px导致，于是为IE6单独写了ie6sux.css，并在里面补上{padding:0; margin: 7px -10px 0 10px;}，在右边给出-10px作为补偿。问题解决。</p>
<p>分析：IE6对留白（margin）的处理与众不同，留白的宽度似乎没有受到总宽度的限制，因此导致了右边超长出来。这应该算是个加减法级别的bug了。好在IE6用户会逐步转移到IE7，以后应该不必受此bug讨扰。</p>
<hr />
<p><small>© raynix for <a href="http://raynix.info">#raynix#</a>, 2008. |
<a href="http://raynix.info/archives/362">Permalink</a> |
<a href="http://raynix.info/archives/362#comments">唉, 一个评论都没</a> |
Add to
<a href="http://del.icio.us/post?url=http://raynix.info/archives/362&title=为IE6捉虫的一个小技巧">del.icio.us</a>
<br/>
Post tags: <a href="http://raynix.info/archives/tag/css" rel="tag">css</a>, <a href="http://raynix.info/archives/tag/ie" rel="tag">IE</a><br/>
</small></p>
<p><small>Feed enhanced by <a href='http://planetozh.com/blog/my-projects/wordpress-plugin-better-feed-rss/'>Better Feed</a> from  <a href='http://planetozh.com/blog/'>Ozh</a></small></p>
]]></content:encoded>
			<wfw:commentRss>http://raynix.info/archives/362/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>问候同被IE家族折腾的人们</title>
		<link>http://raynix.info/archives/271</link>
		<comments>http://raynix.info/archives/271#comments</comments>
		<pubDate>Fri, 11 Apr 2008 03:32:53 +0000</pubDate>
		<dc:creator>raynix</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[W3C]]></category>

		<guid isPermaLink="false">http://raynix.cn/?p=271</guid>
		<description><![CDATA[这几天看内森被IE8折腾的不善，在此深表慰问。 其实，我也被IE家族折腾了很多年了。作为一个网虫，我可以一直使用FireFox浏览器，但是作为一个webmaster，我却绝对不能撇开IE不管，因为现实就是这样，我这有90%的网站访客使用IE。有选择么，没有。 技术层面上没什么好说的，在IE一统江湖的年代，IE就是事实标准，而W3C跟WC也差不多少了。这其实和其他行业（例如电信、广电）的垄断是一个道理：举个例子，如果IE说float: left是靠右边对齐，那所有写了float: left的图文就都会显示在窗口右边，而不管设计者的初衷是什么，也不管left这个词的含义是什么了。你可以站出来说IE你错了，但是所有IE用户会说你网页写错了。你只好昧着良心写float: right来使你的网页在IE上看起来是float: left的。于是你的网站被IE“支持”了。 好在现在很多人用上了FireFox、Opera、Safari这些捍卫W3C标准的浏览器，M$终于也（被迫）开始向W3C靠拢了。于是webmaster们再一次被IE折腾，因为IE一点一点的向标准靠拢，也就是说新版IE和原来IE是不一样的。于是你昧着良心写的float: right居然在新版IE上靠右对齐了！你哭笑不得。 好在M$自己也有网站，为了让自己网站在IE6/7/8上看起来一样，M$是如此做的： 以下片段来自http://www.microsoft.com/ &#60;style type="text/css"&#62; @import url('http://i2.microsoft.com/shared/core/1/css/core.css'); &#60;/style&#62; &#60;!--[if lt IE 7]&#62; &#60;style type="text/css"&#62; @import url('http://i2.microsoft.com/shared/core/1/css/ie6.css'); &#60;/style&#62; &#60;![endif]--&#62; 就是说，如果版本&#60;IE 7，则装入ie6.css。看得出，M$主站是为IE7设计了，兼容IE &#60;7。 上面的&#60;!--[if lt IE 7]&#62;html仅仅会被IE家族识别，而被其他浏览器忽略。这样，webmaster就可以把单独写给IE甚至是IE某个版本的css有选择的装上去了。当然，希望有一天，webmaster们不再需要这样的小技巧。 参考链接： How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers) © raynix [...]]]></description>
			<content:encoded><![CDATA[<p>这几天看<a href="http://nathanzhong.spaces.live.com/Blog/cns!9DE868A7C9B0C604!1471.entry" target="_blank">内森被IE8折腾的不善</a>，在此深表慰问。</p>
<p>其实，我也被IE家族折腾了很多年了。作为一个网虫，我可以一直使用FireFox浏览器，但是作为一个webmaster，我却绝对不能撇开IE不管，因为现实就是这样，我这有90%的网站访客使用IE。有选择么，没有。</p>
<p>技术层面上没什么好说的，在IE一统江湖的年代，IE就是事实标准，而W3C跟WC也差不多少了。这其实和其他行业（例如电信、广电）的垄断是一个道理：举个例子，如果IE说float: left是靠右边对齐，那所有写了float: left的图文就都会显示在窗口右边，而不管设计者的初衷是什么，也不管left这个词的含义是什么了。你可以站出来说IE你错了，但是所有IE用户会说你网页写错了。你只好昧着良心写float: right来使你的网页在IE上看起来是float: left的。于是你的网站被IE“支持”了。</p>
<p>好在现在很多人用上了<a href="http://www.mozilla.com/firefox/" target="_blank">FireFox</a>、<a href="http://www.opera.com" target="_blank">Opera</a>、<a href="http://www.apple.com/safari/" target="_blank">Safari</a>这些捍卫W3C标准的浏览器，M$终于也（被迫）开始向W3C靠拢了。于是webmaster们再一次被IE折腾，因为IE一点一点的向标准靠拢，也就是说新版IE和原来IE是不一样的。于是你昧着良心写的float: right居然在新版IE上靠右对齐了！你哭笑不得。</p>
<p>好在M$自己也有网站，为了让自己网站在IE6/7/8上看起来一样，M$是如此做的：</p>
<blockquote>
<pre>以下片段来自http://www.microsoft.com/
&lt;<span class="start-tag">style</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/css"</span>&gt;
@import url('http://i2.microsoft.com/shared/core/1/css/core.css');
&lt;/<span class="end-tag">style</span>&gt;
<span class="comment">&lt;!--[if lt IE 7]&gt;
&lt;style type="text/css"&gt;
@import url('http://i2.microsoft.com/shared/core/1/css/ie6.css');
&lt;/style&gt;
&lt;![endif]--&gt;
就是说，如果版本&lt;IE 7，则装入ie6.css。看得出，M$主站是为IE7设计了，兼容IE &lt;7。</span></pre>
</blockquote>
<p>上面的<span class="comment">&lt;!--[if lt IE 7]&gt;</span>html仅仅会被IE家族识别，而被其他浏览器忽略。这样，webmaster就可以把单独写给IE甚至是IE某个版本的css有选择的装上去了。当然，希望有一天，webmaster们不再需要这样的小技巧。</p>
<p>参考链接：</p>
<p><a href="http://www.thesitewizard.com/css/excludecss.shtml" target="_blank">How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)</a></p>
<hr />
<p><small>© raynix for <a href="http://raynix.info">#raynix#</a>, 2008. |
<a href="http://raynix.info/archives/271">Permalink</a> |
<a href="http://raynix.info/archives/271#comments">唉, 一个评论都没</a> |
Add to
<a href="http://del.icio.us/post?url=http://raynix.info/archives/271&title=问候同被IE家族折腾的人们">del.icio.us</a>
<br/>
Post tags: <a href="http://raynix.info/archives/tag/ie" rel="tag">IE</a>, <a href="http://raynix.info/archives/tag/w3c" rel="tag">W3C</a><br/>
</small></p>
<p><small>Feed enhanced by <a href='http://planetozh.com/blog/my-projects/wordpress-plugin-better-feed-rss/'>Better Feed</a> from  <a href='http://planetozh.com/blog/'>Ozh</a></small></p>
]]></content:encoded>
			<wfw:commentRss>http://raynix.info/archives/271/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
