Home  >  Article  >  Web Front-end  >  CSS Hack Summary Quick Reference Manual Browser Compatibility Must Know

CSS Hack Summary Quick Reference Manual Browser Compatibility Must Know

高洛峰
高洛峰Original
2016-12-24 15:27:451259browse

Block IE browser (that is, not displayed under IE)

*:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ 
select:empty {font:12px !important;} /*safari可见*/ 
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

Only recognized by IE7

*+html {…} 
当面临需要只针对IE7做样式的时候就可以采用这个HACK。

Recognized by IE6 and below

* html {…} 
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 
html/**/ >body select {……} 
这句与上一句的作用相同。

Only IE6 is not recognized

select { display /*IE6不识别*/:none;} 
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。

Only IE6 and IE5 are not recognized

select/**/ { display /*IE6,IE5不识别*/:none;} 
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

Only IE5 is not recognized

select/*IE5不识别*/ { display:none;} 
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

Box model solution

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;} 
盒模型的清除方法不是通过!important来处理的。这点要明确。

Clear floating

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。

Truncation ellipsis

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

Only Opera recognizes

@media all and (min-width: 0px){ select {……} } 
针对Opera浏览器做单独的设定。以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x filter, only IE5.x visible

@media tty { 
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";} 
}/* */

IE5/MAC filter, generally No need

/*\*//*/ 
@import "ie5mac.css"; 
/**/

IE's if condition Hack

<!--[if IE]> Only IE <![endif]--> 
所有的IE可识别 
<!--[if IE 5.0]> Only IE 5.0 <![endif]--> 
只有IE5.0可以识别 
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> 
IE5.0包换IE5.5都可以识别 
<!--[if lt IE 6]> Only IE 6- <![endif]--> 
仅IE6可识别 
<!--[if gte IE 6]> Only IE 6/+ <![endif]--> 
IE6以及IE6以下的IE5.x都可识别 
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

Only IE7 can recognize the above content may not be comprehensive. I welcome everyone to summarize these techniques with me to provide convenience for future work inquiries. At the same time, thank you here The authors who developed these HACKs.


For more CSS Hack summary quick reference manual and browser compatibility, please pay attention to the PHP Chinese website for related articles!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn