网页兼容


标记

IE6 IE7 IE8 FF Opera Sarari
[*+><] X X X X
_ X X X X X
\9 X X X
\0 X X X X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X
.bb , x:-moz-any-link, x:default X X √(ff3.5及以下) X X
@-moz-document url-prefix(){.bb{}} X X X X X
@media all and (min-width: 0px){.bb {}} X X X
* +html .bb {} X X X X X
游览器内核 Trident Trident Trident Gecko Presto WebKit

什么是CSS hack

由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、 解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS 样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类

CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

  • 属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
  • 选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
  • IE 条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

CSS hack方式一:条件注释法

 

这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下

	只在IE下生效
	<!--[if IE]>
	这段文字只在IE浏览器显示
	<![endif]-->

	只在IE6下生效
	<!--[if IE 6]>
	这段文字只在IE6浏览器显示
	<![endif]-->

	只在IE6以上版本生效
	<!--[if gte IE 6]>
	这段文字只在IE6以上(包括)版本IE浏览器显示
	<![endif]-->

	只在IE8上不生效
	<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示
	<![endif]-->

	非IE浏览器生效
	<!--[if !IE]>
	这段文字只在非IE浏览器显示
	<![endif]-->

CSS hack方式二:类内属性前缀法

Hack应用情境(一)

适用范围:IE:6.0,IE7.0,IE8.0之间的兼容

 .bb{

height:32px; background-color:#f1ee18;/*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

} /*一个用于展示的class为bb的div标签*/

< div class ="bb"></ div > 

Hack应用情境(二)

适用范围:IE:6.0,IE7.0,IE8.0,Firefox之间的兼容

 .bb{
height:32px;
background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */ @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */ * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div > 

Hack应用情境(三)

适用范围:IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容

 .bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/ }
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/ * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

/*一个用于展示的class为bb的div标签*/

< div class ="bb"></ div > 
时间: 2024-10-05 23:27:19

网页兼容的相关文章

网页兼容各种浏览器

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.一.CSS HACK 以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; width: 80px; } </sty

网页兼容网页宽度

IE6识别*和_,不识别!important IE7识别*,不识别_,识别!imortant 而firfox两个都不识别,识别!important 框架用990,非框架用1000 1.设了float:left的元素允许它的右边存在任何元素同行显示,不论是内联元素还是块元素.但它的左边还是不允许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:left后,才允许同行显示. 设了display:inline的元素,允许它的前后存在其它的内联元素同行显示.关于代码在

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案

如何实现多种环境下运行asp网页兼容

如何把ASP网页支持多个浏览器呢?首先呢?没这种说法 你是讲兼容性问题网站在不同浏览器中打开显示一样 就看你代码规范与否了严格按 w3c 标准编写代码 这个得再实践中找到解决方法举例说明 在IE6 ,IE8,火狐 浏览器里padding ,margin 用法都有些不同你可以测试下 如果想要都支持,并且使用相同端口,也就是说,一个网站中可以运行多种格式的web程序.那就用IIS搭建全能服务器.只有IIS能对这么多语言同时支持比较好.其它像apache/tomcat之类的对微软的ASP和.net支持

iphone x 网页兼容

默认的显示内容在安全区域,不会在圆角和设备的传感器内显示. 第一个新功能是扩展到现有的视区 meta 标记, 称为视区匹配, 它提供对镶行为的控制.视区适合在 iOS 11 中提供.设置viewport-fit可以全屏显示. <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

如何在移动设备上调试html5开发的网页

在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同而有种种兼容性问题. 下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试.这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试.当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,

DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" /> 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如 margin-left:10px !important;; margin-left:5px; +height:120px

IE浏览器兼容问题的解决方法

最近在写网页遇到遇到一些网页兼容的问题特别多,其中一个就是我这边的IE,360是没有看出问题的.但是到了客户那边却出现了很严重的页面变形问题,想了一下,应该就是大家的浏览器版本不一样导致的,我是按照自己的版本来写网页,也有测试IE8910的兼容性.当然,如果客户那边能够使用版本高一点的浏览器就最好了,但这是政府的项目不能这么要求他们,只能自己解决. 查了一下资料找到这个答案:从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染.兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添

IE6/IE7/IE8/FF兼容问题汇总,以及解决方案

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了<meta http-equiv="x-ua-compatible" content="ie=7" />2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px !important;;margin-left:5px;+height:120px;5.有时