<?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; css</title>
	<atom:link href="http://www.zhangpeng.info/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zhangpeng.info</link>
	<description>简单生活，分享快乐</description>
	<lastBuildDate>Sun, 15 Jan 2012 14:22:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>css hacks for IE and Firefox</title>
		<link>http://www.zhangpeng.info/2009/css-hacks-for-ie-and-firefox/</link>
		<comments>http://www.zhangpeng.info/2009/css-hacks-for-ie-and-firefox/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 08:50:33 +0000</pubDate>
		<dc:creator>张鹏</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://zhangpeng.info/?p=171</guid>
		<description><![CDATA[When designing your website, it&#8217;s annoying that your css file can not suit any browsers even though its writen under W3C standards. These errors occurs often in IE6. In contract, Firefox, opera, safari and chrome do well on css explaination. Now, I&#8217;d like to share my experiences on css hacks. This post will help you to distinguish IE6, [...]]]></description>
			<content:encoded><![CDATA[<p>When designing your website, it&#8217;s annoying that your css file can not suit any browsers even though its writen under W3C standards. These errors occurs often in IE6. In contract, Firefox, opera, safari and chrome do well on css explaination. Now, I&#8217;d like to share my experiences on css hacks. This post will help you to distinguish IE6, IE7 and Firefox.</p>
<p><span id="more-171"></span></p>
<h3>Choose browsers for css hack</h3>
<p>When choosing browsers to improve your css files, as many browsers can run standard css files, it would be better to pick one that can perfectly perform W3C standards. You can test your css file under this browser and then improve it to ensure all browsers work the same for you css. I sugest you test your css under this turn:</p>
<p>Opera-&gt;IE6-&gt;IE7</p>
<p>After testing css under this turn, most browsers can work perfectly for your site.</p>
<h3>Css Hacks  distinguish IE6, IE7 and Firefox</h3>
<p>I could come up with 2 ways to use CSS hacks or tricks: target only IE with an if statement, use special tags in your css.</p>
<h4>1.special tags to distinguish browsers</h4>
<p>Here is a list of special tags I know for css hack:</p>
<table style="width: 400px;" border="1">
<tbody>
<tr>
<td></td>
<td>IE6</td>
<td>IE7</td>
<td>Firefox</td>
</tr>
<tr>
<td>*</td>
<td>√</td>
<td>√</td>
<td>×</td>
</tr>
<tr>
<td>!important</td>
<td>×</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>*+html</td>
<td>×</td>
<td>√</td>
<td>×</td>
</tr>
<tr>
<td>_</td>
<td>√</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td>*:lang(zh)</td>
<td>×</td>
<td>×</td>
<td>√</td>
</tr>
</tbody>
</table>
<p><span style="font-family: Verdana;"><span style="line-height: normal; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;">Special </span></span>tags for IE7 has a priority like this: (*+html + !important) &gt; !important &gt; +html</p>
<p>As an example,  there is a piece of css file:</p>
<p><br class="spacer_" /></p>
<pre class="css">#bgcolor{
	background:red !important;/* Firefox and other standards browsers */
	background:blue;/* IE6 */
	}
*+html #bgcolor{
	background:green !important; /* IE7 */
	}</pre>
<p>In IE6, the color of element with id &#8216;#bgcolor&#8217; will be &#8216;blue&#8217;, IE7 will be green and Firefox will be red.</p>
<p>In addition, Firefox has its private css properties such as &#8216;-moz-border-radius-bottomright:5px;&#8217; . You can get more private properties at here: <a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions" target="_blank">https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions</a></p>
<h4>2.target only IE with an if statement</h4>
<p>Here is a list help you to trick IE serious:</p>
<p>&lt;!–[if IE]&gt; For IE serious&lt;![endif]–&gt;<br />
 &lt;!–[if IE 5.0]&gt; only IE5.0 canimport &lt;![endif]–&gt;<br />
 &lt;!–[if gt IE 5.0]&gt;IE5.0 and IE5.5 &lt;![endif]–&gt;<br />
 &lt;!–[if lt IE 6]&gt; only IE 6 &lt;![endif]–&gt;<br />
 &lt;!–[if gte IE 6]&gt; IE6 and IE5.x serious&lt;![endif]–&gt;<br />
 &lt;!–[if lte IE 7]&gt; only IE7&lt;![endif]–&gt;</p>
<p>Surely, you can use @import for css hack. But I don&#8217;t know how to use it.</p>
<p>At last, I recommend you a good tool for <a href="http://www.zhangpeng.info/2009/css-hack-ie6-ie7-ff/" target="_blank">css hack</a> : IETester. This is a free webbrowser that allows you to have the rendering and javascript engines of <strong>IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.</strong> You can get it here: <a href="http://www.my-debugbar.com/wiki/IETester/HomePage">http://www.my-debugbar.com/wiki/IETester/HomePage</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.zhangpeng.info/2009/css-hacks-for-ie-and-firefox/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS hack 区分兼容IE6,IE7,firefox等浏览器</title>
		<link>http://www.zhangpeng.info/2009/css-hack-ie6-ie7-ff/</link>
		<comments>http://www.zhangpeng.info/2009/css-hack-ie6-ie7-ff/#comments</comments>
		<pubDate>Sun, 26 Jul 2009 05:57:00 +0000</pubDate>
		<dc:creator>张鹏</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[技巧]]></category>
		<category><![CDATA[网络]]></category>

		<guid isPermaLink="false">http://zhangpeng.info/?p=169</guid>
		<description><![CDATA[在使用CSS进行网页布局设计的时候，最烦人的莫过于不同浏览器对于CSS属性的解释不同造成网页错位了，尤其有时候自己的CSS代码完全符合W3C标准，这种状况在IE6中出现的最多，而相对来说Firefox，opera，safari，chrome等标准浏览器问题相对较少，然而在中国，IE6或者说以其为核心的其他浏览器还是应用最为广泛的一个，这也就导致我们需要花费大量的时间来进行浏览器兼容工作，以下就来介绍一下张鹏在设计网页中总结到的CSS hack经验。 首先你需要了解一下CSS hack。 Css hack 翻译过来的话可以说是兼容浏览器的一种工作，对于一个优秀的网页设计人员，精通CSS hack知识是一个基础。CSS hack技术发展历史比较短，学习还是比较困难的，因为你能找到的借鉴资料并不多，而且需要兼容的浏览器非常多，需要兼容的主要包括IE，Firefox，Opera和Safari，而这些浏览器版本的不同有时也会对应CSS的解释方式不同，比如IE中的IE6,IE7对CSS的解释就不同。www.zhangpeng.info 学习CSS hack技术主要包括以下几点： 开发平台与 Hack 顺序 在进行网页设计或者说制作博客主题的时候，为了设计的页面效果能够更好的兼容各种浏览器，对CSS的书写就应当先遵循CSS标准，因为对于按标准书写的CSS能够被大多数的浏览器正确解释，当然，某些浏览器中标准CSS的解释也会有些不正常，这时候再根据特定浏览器进行Hack。对于各种浏览器，firefox、opera、chrome、safira、IE8基本能够正常解释标准CSS，于是我们在选择开发平台的时候可以按照以下的顺序： Opera-&#62;IE6-&#62;IE7 经过以上的步骤后，你的网页基本已经能够兼容各种浏览器了。 css hack 区分不同浏览器的方法 css hack 的方法有两种， 一种是在同一个文件中处理， 另一种则是在不同文件中处理。 1、在同一个文件中处理 通过为一个CSS文件的某项属性添加特定浏览器识别的标识来区别对待。hack 的一些标示如下表： IE6 IE7 Firefox * √ √ × !important × √ √ *+html × √ × _ √ × × *:lang(zh) × × √ 在IE7的hack中，优先度(*+html + !important) &#62; !important &#62; [...]]]></description>
			<content:encoded><![CDATA[<p>在使用CSS进行网页布局设计的时候，最烦人的莫过于不同浏览器对于CSS属性的解释不同造成网页错位了，尤其有时候自己的CSS代码完全符合W3C标准，这种状况在IE6中出现的最多，而相对来说Firefox，opera，safari，chrome等标准浏览器问题相对较少，然而在中国，IE6或者说以其为核心的其他浏览器还是应用最为广泛的一个，这也就导致我们需要花费大量的时间来进行浏览器兼容工作，以下就来介绍一下<a href="http://www.zhangpeng.info/" target="_blank">张鹏</a>在设计网页中总结到的CSS hack经验。</p>
<p><span id="more-169"></span></p>
<div>
<p>首先你需要了解一下CSS hack。 Css hack 翻译过来的话可以说是兼容浏览器的一种工作，对于一个优秀的网页设计人员，精通CSS hack知识是一个基础。CSS hack技术发展历史比较短，学习还是比较困难的，因为你能找到的借鉴资料并不多，而且需要兼容的浏览器非常多，需要兼容的主要包括IE，Firefox，Opera和Safari，而这些浏览器版本的不同有时也会对应CSS的解释方式不同，比如IE中的IE6,IE7对CSS的解释就不同。www.zhangpeng.info</p>
<p>学习CSS hack技术主要包括以下几点：</p>
<h3>开发平台与 Hack 顺序</h3>
<p>在进行网页设计或者说制作博客主题的时候，为了设计的页面效果能够更好的兼容各种浏览器，对CSS的书写就应当先遵循CSS标准，因为对于按标准书写的CSS能够被大多数的浏览器正确解释，当然，某些浏览器中标准CSS的解释也会有些不正常，这时候再根据特定浏览器进行Hack。对于各种浏览器，firefox、opera、chrome、safira、IE8基本能够正常解释标准CSS，于是我们在选择开发平台的时候可以按照以下的顺序：</p>
<p>Opera-&gt;IE6-&gt;IE7</p>
<p>经过以上的步骤后，你的网页基本已经能够兼容各种浏览器了。</p>
<h3>css hack 区分不同浏览器的方法</h3>
<p>css hack 的方法有两种， 一种是在同一个文件中处理， 另一种则是在不同文件中处理。</p>
<h4>1、在同一个文件中处理</h4>
<p>通过为一个CSS文件的某项属性添加特定浏览器识别的标识来区别对待。hack 的一些标示如下表：</p>
<table style="width: 400;" border="1">
<tbody>
<tr>
<td></td>
<td>IE6</td>
<td>IE7</td>
<td>Firefox</td>
</tr>
<tr>
<td>*</td>
<td>√</td>
<td>√</td>
<td>×</td>
</tr>
<tr>
<td>!important</td>
<td>×</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>*+html</td>
<td>×</td>
<td>√</td>
<td>×</td>
</tr>
<tr>
<td>_</td>
<td>√</td>
<td>×</td>
<td>×</td>
</tr>
<tr>
<td>*:lang(zh)</td>
<td>×</td>
<td>×</td>
<td>√</td>
</tr>
</tbody>
</table>
<p>在IE7的hack中，优先度(*+html + !important) &gt; !important &gt; +html。</p>
<p>例如如下一个例子：</p>
<pre class="css" style="padding-left: 30px; ">#bgcolor{
	background:red !important;/* Firefox 等其他浏览器 */
	background:blue;/* IE6 */
	}
*+html #bgcolor{
	background:green !important; /* IE7 */
	}</pre>
<p>在这里面， IE6 只能是 blue。IE7 是 green 。Firefox 和其他浏览器都是  red 。</p>
<p>另外，firefox开发了自己的一些私有css属性，以-moz开头，例如-moz-border-radius-bottomright:5px;为矩形右下角为5px长度的圆角。更多的特有属性可以参考：<a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions</a></p>
<h4>2、在不同文件中处理</h4>
<p>这种方法就是对于特定浏览器导入特定书写的一个CSS文件，这种方法适合IE系列的Hack。如以下的一个例子：</p>
<pre class="html" style="padding-left: 30px;">&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;</pre>
<p>以上的例子中，在IE浏览器中特别导入了 style_ie.css 这一样式文件以求达到页面完美效果。这样的例子还有@import 引入，然而本人未曾使用过@import 引入方式，所以不便介绍。使用if判断的还有如下格式：www.zhangpeng.info</p>
<p style="padding-left: 30px;">&lt;!&#8211;[if IE]&gt; 所有的IE可识别&lt;![endif]&#8211;&gt;<br />
 &lt;!&#8211;[if IE 5.0]&gt; 只有IE5.0可以识别 &lt;![endif]&#8211;&gt;<br />
 &lt;!&#8211;[if gt IE 5.0]&gt;IE5.0及IE5.5都可以识别 &lt;![endif]&#8211;&gt;<br />
 &lt;!&#8211;[if lt IE 6]&gt; 仅IE6可识别 &lt;![endif]&#8211;&gt;<br />
 &lt;!&#8211;[if gte IE 6]&gt; IE6以及IE6以下的IE5.x都可识别&lt;![endif]&#8211;&gt;<br />
 &lt;!&#8211;[if lte IE 7]&gt; 仅IE7可识别&lt;![endif]&#8211;&gt;</p>
<p>最后，推荐各位在学习CSS Hack 技术的时候安装<strong>IETester</strong>，在<strong>IETester</strong>中可测试IE6、IE7、IE8下的效果，相当一个集成浏览器。另外Firefox，Opera也是必装浏览器。</p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.zhangpeng.info/2009/css-hack-ie6-ie7-ff/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

