关于CSS的兼容问题

兼容性

不同的浏览器兼容性不同

  • IE的内核为 Trident (但是IE10以后改为了edg内核)，js引擎为JScriptjs引擎
  • 火狐的内核为 Gecko，js引擎为TraceMonkey
  • 欧鹏的内核为Presto(已被放弃)，js引擎为Carakan
  • Safri和谷歌的内核为 Webkit，js引擎为 SquirrelFish/v8

浏览器的解析模式

页面会分成标准模式和怪异模式

1.在script标签内写入document.write(document.compatMode)，如果返回的值为BackCompat则为标准模式未开启，若返回了CSSCompat则标准模式开启。

2.插入DOCTYPE有两种目的：对文档有效性的验证，决定和呈现模式。

3.如过不用DOCTYPE或者错用会让你的页面处于怪异模式（混杂模式）。

4.DOCTYPE前不能写任何内容。

CSS Hack

不同浏览器对CSS的解析不同，则须要设置Hack。

CSS Hack 实现有三种方式：

1.css类内部的 Hack

2.css选择器的 Hack

3.HTML头部的 Hack.

  • ite:它是less than equal to 的简写，意思是小于等于
  • it:less than ，小于
  • gte:greater than or equal to, 大于等于
  • gt:greater than,大于
  • ！：不等于

w3chelp.com

兼容性要和业务挂钩

渐进增强

确定用户群体，针对低版本浏览器构建页面保证基本功能，再针对高级浏览器进行效果交互性能等进行改进，追加功能。

优雅降级

确定用户群体，一开始构建完整功能，再针对浏览器进行兼容。

时间： 2024-10-14 11:43:37

关于CSS的兼容问题的相关文章

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

CSS中兼容的一面-----Hack

国庆了,出去玩耍,也有好长时间没有更新博客了.. 今天就和大家共享一篇技术博文吧.. CSS中兼容的一面-----Hack技术大全 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 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 scr

CSS浏览器兼容

CSS 浏览器兼容知识汇总 CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行. 2.margin加倍的问题 问题描述:设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug. 解决方案:在这个div里面加上display:inline; 示例讲解:<div id="imfloat"><

常见css的兼容问题

1.链接的虚线框问题 <!-- html --><a class="noDashedBox" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a> /* * a, img, input等标签点击时会带有虚线框 * 去除它 */ .noDashedBox { outline:0; blr:expre

css的兼容问题

浏览器与css的兼容问题一直是一个很头疼的问题 [允悲]  ..... 在网页完成后做测试的时候,一般都会出现很多的兼容问题,这是每一个开发者都面临的问题. 下面我们介绍一下 常见的兼容问题. (1)图片默认有间距;  解决 :对img进行float (2)不同浏览器的margin 和 padding 差异较大 (3)CSS控制器透明度问题:一般就直接opacity:0.6: IE   filter:alpha(opacity=60) (4)IE6双边距bug:块属性添加浮动float之后,若在

ie6,ie7,ie8 css bug兼容解决记录

ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着

[转]CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 2013-12-12  By 奥夫 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !impo

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表:   IE6 IE7 IE8 Firefox Chrome Safari !important   Y   Y     _ Y           * Y Y         *+   Y         \9 Y Y Y       \0     Y       nth-of-type(1)    

（转）Css样式兼容IE6,IE7,FIREFOX的写法

根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别IE6与IE7:          background:green !important;background:blue;   区别IE7与FF:          background:orange; *background:green;   区别FF,IE7,IE6:          back

【引用】CSS浏览器兼容手册

CSS技巧 1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. margin加倍的问题    设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display:inline;   例如:    <#div id=”imfloat”>    相应的css为   #IamFloat{