<?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>落雪实验室 &#187; IE6.0</title>
	<atom:link href="http://www.fallensnow.net/index.php/archives/tag/ie60/feed" rel="self" type="application/rss+xml" />
	<link>http://www.fallensnow.net</link>
	<description>收藏分享精品软件与技术-关注互联网、操作系统与搜索引擎</description>
	<lastBuildDate>Sat, 20 Nov 2010 16:33:30 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>CSS Hack 经验分享</title>
		<link>http://www.fallensnow.net/index.php/archives/91</link>
		<comments>http://www.fallensnow.net/index.php/archives/91#comments</comments>
		<pubDate>Tue, 31 Mar 2009 01:46:09 +0000</pubDate>
		<dc:creator>落雪</dc:creator>
				<category><![CDATA[网站开发设计]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS hack]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[IE6.0]]></category>
		<category><![CDATA[IE7.0]]></category>

		<guid isPermaLink="false">http://www.fallensnow.com.cn/?p=91</guid>
		<description><![CDATA[<p>CSS Hack</p><p><span style="font-size: small;"><span style="color: rgb(51, 102, 255);">由于 Firefox 的崛起和 IE 兄弟们的各自为政, <strong>CSS Hack</strong> 再次得到网页制作人员的重视. <strong>兼容浏览器</strong>对初学者来说绝对是一个苦活, 我的一些朋友就是因为烦这个没能坚持下来, 很是可惜.</span></span></p><p><span style="font-size: small;"><span style="color: rgb(51, 102, 255);">目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担. <img class="wp-smiley" alt=":cry:" src="http://www.neoease.com/wp-includes/images/smilies/icon_cry.gif" />  玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.</span></span></p><h4><span style="font-size: small;"><span style="color: rgb(51, 102, 255);">开发平台的选择</span></span></h4><p><span style="font-size: small;"><span style="color: rgb(51, 102, 255);">我很幸运, 我接触网页前台的时候 Firefox2 已经十分红火, 我的所有工作都是在 Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以我推荐<strong>以 Firefox 结合 Firebug 扩展作为平台</strong>.</span></span></p>]]></description>
			<content:encoded><![CDATA[<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">转载自：</span></span></span><a href="http://www.neoease.com" target="_blank"><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">www.neoease.com</span></span></span></a></p>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">由于 Firefox 的崛起和 IE 兄弟们的各自为政, <strong>CSS Hack</strong> 再次得到网页制作人员的重视. <strong>兼容浏览器</strong>对初学者来说绝对是一个苦活, 我的一些朋友就是因为烦这个没能坚持下来, 很是可惜.</span></span></span></p>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">目前我的机器上已经安装了 8 款浏览器, 听说 IE8 要发布了, 真叫人惊心动魄. 这不, 以后又多一个标准要兼容了, 感谢微软给我增加工作负担. <img class="wp-smiley" src="http://www.neoease.com/wp-includes/images/smilies/icon_cry.gif" alt=":cry:" /> 玩 WordPress 有一年多了, 做了很多主题, 自己从中也总结了一点心得体会, 在恶魔来世之前总结一下方便以后使用, 同时分享出来希望对初学者会有所帮助.</span></span></span></p>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;"> </span></span></span></p>
<h4><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">开发平台的选择</span></span></span></h4>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">我很幸运, 我接触网页前台的时候 Firefox2 已经十分红火, 我的所有工作都是在 Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以我推荐<strong>以 Firefox 结合 Firebug 扩展作为平台</strong>.</span></span></span></p>
<p><span id="more-91"></span></p>
<h4><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">Hack 的顺序</span></span></span></h4>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:<br />
<strong>Firefox -&gt; IE6 -&gt; IE7 -&gt; 其他</strong></span></span></span></p>
<h4><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">Hack 的方法</span></span></span></h4>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.</span></span></span></p>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;"><strong>1. 同一文件中处理.</strong><br />
如: id=&#8221;bgcolor&#8221; 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.</span></span></span></p>
<p><span style="font-size: small"><span style="color: #800000"><span>#bgcolor {<br />
</span></span></span></p>
<pre class="css" style="font-family: monospace"><span style="font-size: small"><span style="color: #800000">	<span style="font-weight: bold">background</span>:red !important; <span style="font-style: italic">/* Firefox 等其他浏览器 */</span>	<span style="font-weight: bold">background</span>:<span style="font-weight: bold">blue</span>; <span style="font-style: italic">/* IE6 */</span>}*+html #bgcolor {	<span style="font-weight: bold">background</span>:green !important; <span style="font-style: italic">/* IE7 */</span>}</span></span></pre>
<div><span style="font-size: small"></span></div>
<p><span style="font-size: small"><span style="color: #3366ff"> </p>
<p></span></span></p>
<div></div>
<p><span style="color: #cc00cc"> </p>
<p></span></p>
<div><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.</span></span></span></p>
<div><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高.</span></span></span></div>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;"><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">上述的优先符号均是 CSS3 标准允许的, 其他浏览器也还有其他的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见 (JavaScript 除外).</span></span></span></p>
<p></span></span></span></p>
<div><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;"><strong>2. 不同文件中处理.</strong></span></span></span></div>
<div><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入</span></span></span></div>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;"> </p>
<p></span></span></span></p>
<pre class="html" style="font-family: monospace"><span style="font-size: small"><span style="color: #800000">&lt;!-- 放置所有浏览器的样式 --&gt;&lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;&lt;!-- 只放置 IE 必须的, 而不能通过 W3C 的代码 --&gt;&lt;!--[if IE]&gt;	&lt;link rel="stylesheet" href="style_ie.css" type="text/css" /&gt;&lt;![endif]--&gt;</span></span></pre>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">浏览器的 CSS Hack 方法有很多, 比如 @import 引入, &gt; 过滤等等方法, 但以上就是我用过的全部.</span></span></span></p>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">网页前台的兼容不应该仅限于对过去的浏览器支持 (向前兼容), 更应该对未来的浏览器服务 (向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? <strong>只要符合标准你的网站就永远不会过时 (IE 系列除外).</strong> 所以我的宗旨是尽量做到标准, 不得已才 Hack, 并尽量使用比较简单的方法去解决.</span></span></span></p>
<p><span style="font-size: small"><span style="color: #3366ff"><span style="color: #ffffff;">最后骂一句收场: IE8 同样是垃圾!</span></span></span></div>
<p>IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) &gt; !important &gt; +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.</p>
<h2  class="related_post_title">落雪猜您还对以下文章感兴趣：</h2><ul class="related_post"><li>2009/08/15 -- <a href="http://www.fallensnow.net/index.php/archives/802" title="IIS连接数实验 从连接数上测试不同浏览器的访问效果">IIS连接数实验 从连接数上测试不同浏览器的访问效果</a></li><li>2009/12/07 -- <a href="http://www.fallensnow.net/index.php/archives/1120" title="CSS开发辅助工具 &#8211; TopStyle绿色版">CSS开发辅助工具 &#8211; TopStyle绿色版</a></li><li>2009/08/08 -- <a href="http://www.fallensnow.net/index.php/archives/671" title="手动为 Firefox 添加支付宝安全插件">手动为 Firefox 添加支付宝安全插件</a></li><li>2009/07/02 -- <a href="http://www.fallensnow.net/index.php/archives/561" title="FireFox 3.5 正式版 全新体验 超越IE8.0 感觉就一个字&ldquo;快&rdquo;">FireFox 3.5 正式版 全新体验 超越IE8.0 感觉就一个字&ldquo;快&rdquo;</a></li><li>2009/06/30 -- <a href="http://www.fallensnow.net/index.php/archives/548" title="Mozilla FireFox 3.5 正式版已经发布">Mozilla FireFox 3.5 正式版已经发布</a></li><li>2009/06/24 -- <a href="http://www.fallensnow.net/index.php/archives/528" title="Microsoft Web Platform微软基于Web开发平台与Web App Gallery">Microsoft Web Platform微软基于Web开发平台与Web App Gallery</a></li></ul>
	标签：<a href="http://www.fallensnow.net/index.php/archives/tag/ie70" title="IE7.0" rel="tag nofollow">IE7.0</a>, <a href="http://www.fallensnow.net/index.php/archives/tag/css" title="CSS" rel="tag nofollow">CSS</a>, <a href="http://www.fallensnow.net/index.php/archives/tag/ie60" title="IE6.0" rel="tag nofollow">IE6.0</a>, <a href="http://www.fallensnow.net/index.php/archives/tag/css-hack" title="CSS hack" rel="tag nofollow">CSS hack</a>, <a href="http://www.fallensnow.net/index.php/archives/tag/div" title="div" rel="tag nofollow">div</a>, <a href="http://www.fallensnow.net/index.php/archives/tag/firefox" title="firefox" rel="tag nofollow">firefox</a>, <a href="http://www.fallensnow.net/index.php/archives/category/web-design" title="网站开发设计" rel="tag nofollow">网站开发设计</a><br />
]]></content:encoded>
			<wfw:commentRss>http://www.fallensnow.net/index.php/archives/91/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

