遇到的IE不兼容问题总结
2015-03-02 15:02
99 查看
IE浏览器兼容问题困扰多时,由于IE6不在进行修补,IE6的考虑也越来越少,有些IE遇到的不兼容的现象想做一个总结
1宽度或高度:IE的是width+border+margin+padding
google是width或height
2字体大小,同样是font-size:14px;在IE6中显示不一样,解决方法:行高
3一个通用的div居中的方法*{margin:0;padding:0} ,div{margin:0 auto};原因:IE浏览器和其他浏览器的每个属性的margin和padding不一样
4 a:hover .class{display:block},这个属性不能兼容IE,但是 a:hover li{display:block}全部兼容,可以用来滑动导航
5一个兼容各主流浏览器的透明方案:opacity:90;filter:alpha(opacity=0.9);
6 html5的新特性:<input type="date" />可以选择日历来填写信息,但不兼容IE,同样有一系列type,可以自己查阅
7 position:fixed,这个属性不兼容IE浏览器
8 在IE浏览器中块级元素在一行内浮动必须两边都加float属性,其他浏览器后面属性加float就足够了
9IE的3像素Bug问题,定义一个Div的宽度是,有3像素会跑到左边出来
下面是收集到的hack,可以写兼容页面
1.‘\9’:6
eg:.test { color/*\**/: blue\9 }
.header {width:300px;} /* 所有浏览器*/
.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */
.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
.header {_width:290px;} /* IE6能识别,IE7、IE8和FF不能识别*/
2.利用条件注释语句:<!–[if IE]> 此内容只有IE可见 <![endif]–>
lt 表示less than 当前条件版本以下的版本,不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。
lte 表示less than or equal 当前版本以下版本,并包含当前版本。
3.其它hack 技术:
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
4.
汇总下IE各版本的css hack。
标准模式中:
1,减号(-)是IE6专有hack
2,反斜杠零(\0)是IE8专有hack
1宽度或高度:IE的是width+border+margin+padding
google是width或height
2字体大小,同样是font-size:14px;在IE6中显示不一样,解决方法:行高
3一个通用的div居中的方法*{margin:0;padding:0} ,div{margin:0 auto};原因:IE浏览器和其他浏览器的每个属性的margin和padding不一样
4 a:hover .class{display:block},这个属性不能兼容IE,但是 a:hover li{display:block}全部兼容,可以用来滑动导航
5一个兼容各主流浏览器的透明方案:opacity:90;filter:alpha(opacity=0.9);
6 html5的新特性:<input type="date" />可以选择日历来填写信息,但不兼容IE,同样有一系列type,可以自己查阅
7 position:fixed,这个属性不兼容IE浏览器
8 在IE浏览器中块级元素在一行内浮动必须两边都加float属性,其他浏览器后面属性加float就足够了
9IE的3像素Bug问题,定义一个Div的宽度是,有3像素会跑到左边出来
下面是收集到的hack,可以写兼容页面
1.‘\9’:6
eg:.test { color/*\**/: blue\9 }
.header {width:300px;} /* 所有浏览器*/
.header {width/*\**/:330px\9;} /* 所有浏览器IE浏览器 */
.header {*width:310px;} /* IE7和IE6能识别,IE8和FF不能识别*/
.header {_width:290px;} /* IE6能识别,IE7、IE8和FF不能识别*/
2.利用条件注释语句:<!–[if IE]> 此内容只有IE可见 <![endif]–>
lt 表示less than 当前条件版本以下的版本,不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。
lte 表示less than or equal 当前版本以下版本,并包含当前版本。
3.其它hack 技术:
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
4.
汇总下IE各版本的css hack。
hack | 示例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
* | *color | Yes | Yes | Yes | Yes | No | Yes |
+ | +color | Yes | Yes | Yes | Yes | No | Yes |
- | -color | Yes | Yes | No | No | No | No |
_ | _color | Yes | Yes | No | Yes | No | Yes |
# | #color | Yes | Yes | Yes | Yes | No | Yes |
\0 | color\0 | No | No | No | No | Yes | No |
\9 | color\9 | Yes | Yes | Yes | Yes | Yes | Yes |
!important | color:blue !important; color:green; | No | No | Yes | No | Yes | No |
1,减号(-)是IE6专有hack
2,反斜杠零(\0)是IE8专有hack
相关文章推荐
- IE与firefox 兼容问题 (二、项目经验总结)
- 黄聪:DIV+CSS建站经验总结,不同版本IE下CSS布局bug问题(IE5、IE6、IE7、IE8、火狐Firefox兼容)
- 最近遇到的两个IE下的问题(IE兼容问题)
- 项目中遇到的兼容问题总结
- 浏览器兼容问题项目总结(二)Highchart 在chrome下x轴文字竖直显示(兼容IE和Chrome)
- 提交Form中动态组件 Select遇到的IE和FireFox兼容问题
- 初学canvas,遇到width和height显示问题和用excanvas.js兼容IE问题
- JS在IE和Firefox的不兼容问题解决方法总结
- 开发过程中遇到的浏览器兼容的问题总结
- 处理浏览器兼容所遇到的问题总结(二)
- firefox火狐浏览器与与ie兼容的2个问题总结
- firefox和ie js兼容问题 --总结得蛮全,转载过来一下
- ie兼容问题大总结
- 总结一下最近将163邮箱拖动效果改成兼容Firefox遇到的问题
- 在开发过程中总结了一些IE和Firefox的兼容问题。
- IE 和ff css 兼容遇到的问题
- 关于IE、火狐等浏览器兼容问题的总结
- 关于IE,360,火狐,谷歌中遇到的几个兼容性问题的总结
- 浏览器兼容问题项目总结(七)IE下未初始化为空,chrome下未初始化生产大量空格
- CSS-项目中遇到IE兼容问题,处理随笔