<?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>华斐Blog &#187; css hack</title>
	<atom:link href="http://www.huafei117.com/tag/css-hack/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.huafei117.com</link>
	<description>华斐网志以及学习心得</description>
	<lastBuildDate>Wed, 28 Dec 2011 02:36:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>CSS Hack汇总快查</title>
		<link>http://www.huafei117.com/2010/01/17/css-hack%e6%b1%87%e6%80%bb%e5%bf%ab%e6%9f%a5/</link>
		<comments>http://www.huafei117.com/2010/01/17/css-hack%e6%b1%87%e6%80%bb%e5%bf%ab%e6%9f%a5/#comments</comments>
		<pubDate>Sun, 17 Jan 2010 05:53:13 +0000</pubDate>
		<dc:creator>华斐</dc:creator>
				<category><![CDATA[网络文摘]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[css hack]]></category>

		<guid isPermaLink="false">http://www.huafei117.com/97.html</guid>
		<description><![CDATA[屏蔽IE浏览器（也就是IE下不显示） *:lang(zh) select {font:12px&#160; !important;} /*FF的专用*/ select:empty {font:12px&#160; !important;} /*safari可见*/ 这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7识别 *+html&#160; {…} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 IE6及IE6以下识别 * html&#160; {…} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 html/**/ &#62;body&#160; select {……} 这句与上一句的作用相同。 仅IE6不识别 select { display /*IE6不识别*/:none;} 这里主要是通过CSS注释分开一个属性与值，流释在冒号前。 仅IE6与IE5不识别 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 仅IE5不识别 select/*IE5不识别*/ { display:none;} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别 盒模型解决方法 selct {width:IE5.x宽度; voice-family :&#34;\&#34;}\&#34;&#34;; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 清除浮动 select:after {content:&#34;.&#34;; display:block; height:0; [...]]]></description>
			<content:encoded><![CDATA[<p><strong>屏蔽IE浏览器（也就是IE下不显示）</strong></p>
<blockquote><p>*:lang(zh) select {font:12px&#160; !important;} /*FF的专用*/      <br />select:empty {font:12px&#160; !important;} /*safari可见*/       <br />这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。</p>
</blockquote>
<p><strong>仅IE7识别</strong></p>
<blockquote><p>*+html&#160; {…}      <br />当面临需要只针对IE7做样式的时候就可以采用这个HACK。</p>
</blockquote>
<p><strong>IE6及IE6以下识别</strong></p>
<p> <span id="more-97"></span>
<p><strong></strong></p>
<blockquote><p>* html&#160; {…}      <br />这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。       <br />html/**/ &gt;body&#160; select {……}       <br />这句与上一句的作用相同。</p>
</blockquote>
<p><strong>仅IE6不识别</strong></p>
<blockquote><p>select { display /*IE6不识别*/:none;}      <br />这里主要是通过CSS注释分开一个属性与值，流释在冒号前。</p>
</blockquote>
<p><strong>仅IE6与IE5不识别</strong></p>
<blockquote><p>select/**/ { display /*IE6,IE5不识别*/:none;}      <br />这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。</p>
</blockquote>
<p><strong>仅IE5不识别</strong></p>
<blockquote><p>select/*IE5不识别*/ { display:none;}      <br />这一句是在上一句中去掉了属性区的注释。只有IE5不识别</p>
</blockquote>
<p><strong>盒模型解决方法</strong></p>
<blockquote><p>selct {width:IE5.x宽度; voice-family :&quot;\&quot;}\&quot;&quot;; voice-family:inherit; width:正确宽度;}      <br />盒模型的清除方法不是通过!important来处理的。这点要明确。</p>
</blockquote>
<p><strong>清除浮动</strong></p>
<blockquote><p>select:after {content:&quot;.&quot;; display:block; height:0; clear:both; visibility:hidden;}      <br />在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。</p>
</blockquote>
<p><strong>截字省略号</strong></p>
<blockquote><p>select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }      <br />这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。</p>
</blockquote>
<p><strong>只有Opera识别</strong></p>
<blockquote><p>@media all and (min-width: 0px){ select {……}&#160; }      <br />针对Opera浏览器做单独的设定。</p>
<p>以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。</p>
</blockquote>
<p><strong>IE5.x的过滤器，只有IE5.x可见</strong></p>
<blockquote><p>@media tty {      <br />i{content:&quot;\&quot;;/*&quot; &quot;*/}} @import &#8216;ie5win.css&#8217;; /*&quot;;}       <br />}/* */       <br />IE5/MAC的过滤器，一般用不着</p>
<p>[Copy to clipboard] [ - ]CODE:      <br />/*\*//*/       <br />&#160;&#160;&#160; @import &quot;ie5mac.css&quot;;       <br />/**/</p>
</blockquote>
<p><strong>IE的if条件Hack</strong></p>
<blockquote><p>&lt;!&#8211;[if IE]&gt; Only IE &lt;![endif]&#8211;&gt;      <br />所有的IE可识别       <br />&lt;!&#8211;[if IE 5.0]&gt; Only IE 5.0 &lt;![endif]&#8211;&gt;       <br />只有IE5.0可以识别       <br />&lt;!&#8211;[if gt IE 5.0]&gt; Only IE 5.0+ &lt;![endif]&#8211;&gt;       <br />IE5.0包换IE5.5都可以识别       <br />&lt;!&#8211;[if lt IE 6]&gt; Only IE 6- &lt;![endif]&#8211;&gt;       <br />仅IE6可识别       <br />&lt;!&#8211;[if gte IE 6]&gt; Only IE 6/+ &lt;![endif]&#8211;&gt;       <br />IE6以及IE6以下的IE5.x都可识别       <br />&lt;!&#8211;[if lte IE 7]&gt; Only IE 7/- &lt;![endif]&#8211;&gt;       <br />仅IE7可识别</p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.huafei117.com/2010/01/17/css-hack%e6%b1%87%e6%80%bb%e5%bf%ab%e6%9f%a5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

