文档章节

IE兼容问题

nancy88hh
 nancy88hh
发布于 2014/11/26 16:52
字数 2857
阅读 31
收藏 1

1. hover:IE6及以下只有a支持,其他标签不支持hover

解决:网上下载csshover.htc代码文件并引用:body{behavior:url(css/csshover.htc);} 
PS: 在引用 csshover.htc 时,不管你是在 css 文件里面引用 htc 文件,还是 html 里面引用 htc 文件,都是 html 文件去找 htc 的路径。也就是说路径一定要相对根目录或用绝对路径。

2. IE6支持max-width、 min-width、min-height 解决方法

1) max-width:
{
max-width:1000px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"");
overflow:hidden;
}

2) min-width:

{
min-width:1000px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}

3) 支持min-width同时又支持max-width:

{
max-width:620px;
min-width:1px;
_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));
}

4) min-height:

div.box1,div.box2{
width: 300px; 
min-height: 150px;
background: #EEE;
float: left; 
margin-right: 20px;
}
div.box2{
*height:auto !important;
*height:150px; 
min-height: 150px;
}

3. ie9不支持line-height, 而其它浏览器包括ie6-ie8均正常。

失效原因:CSS中使用了中文字体,而中文字体使用汉字。如:font-family:"微软雅黑"。
解决方法:将中文字体汉字转换为Unicode编码 或 将中文字体汉字使用英文名。

4. MacIE闻名的bug:

假如对float的元素的父元素使用clear属性,四周的float元素布局就会混乱。

5. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

6. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug,特别是IE6和IE7造成错位,因此不要对float元素指定margin和padding属性( 可以在float元素内部嵌套一个div来设置margin和padding)。

如需使用margin,则需要为IE6或IE7单独识别指定样式。
1)IE6单独识别(margin-left对于只有IE6错位情况下)
{
margin-left:5px;
_margin-left:2px;
}

2)IE7与IE6都识别(margin-left对于ie6和ie7识别,其它版本和品牌浏览器不设别)

{
margin-left:5px;
*margin-left:2px;
}

PS: IE6双边距bug:解决方案是在float的标签样式控制中加入 ——_display:inline; 将其转化为行内属性


7. float元素的宽度之和要小于100%

假如float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

8. 史上最全的CSS hack方式一览

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

方式一:条件注释法 
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同

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

只在IE6下生效:

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

只在IE6或以上版本生效:

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

只在IE8上不生效:

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

方式二:类内属性前缀法

hack  写法                  IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
*      *color                  Y         Y          Y       Y          N          Y         N      Y         N         Y
+      +color                Y         Y          Y       Y          N          Y         N      Y         N         Y
-      -color                  Y         Y          N      N          N         N         N      N        N         N
_      _color                  Y         Y          N      Y          N          Y         N      Y         N         N
#      #color                 Y         Y          Y       Y          N          Y         N     Y          N         Y
\0     color:red\0         N        N          N      N          Y          N         Y      N         Y         N
\9\0  color:red\9\0     N        N          N      N          N         N         Y      N         Y          N
!important                  N        N          Y       N          Y          N         Y      N        Y          Y

说明:在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
background-color:red;             /* All browsers */  
background-color:blue !important; /* All browsers but IE6 */  
*background-color:black;          /* IE6, IE7 */  
+background-color:yellow;         /* IE6, IE7*/  
background-color:gray\9;          /* IE6, IE7, IE8, IE9, IE10 */  
background-color:purple\0;        /* IE8, IE9, IE10 */  
background-color:orange\9\0;      /*IE9, IE10*/  
_background-color:green;          /* Only works in IE6 */  
*+background-color:pink;          /* IE6, IE7*/

方式三:选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
 
目前最常见的是:
*html {}             /* *前缀只对IE6生效*/
*+html {}            /* *+前缀只对IE7生效*/
@media screen\9{...} /*只对IE6/7生效*/
@media \0screen {body { background: red; }}                   /*只对IE8有效*/
@media \0screen\,screen\9{body { background: blue; }}         /*只对IE6/7/8有效*/
@media screen\0 {body { background: green; }}                  /*只对IE8/9/10有效*/
@media screen and (min-width:0\0) {body { background: gray; }} /*只对IE9/10有效*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} /*只对IE10有效*/

@media screen and (min-width:0){   
.hacktest {background-color:black\0;}  /*opera*/  
}   
@media screen and (min-width:0) {   
.hacktest { background-color:purple\9; }/* for IE9/IE10  PS:国外有些习惯常写作\0,根本没考虑Opera也认识\0的实际 */  
}  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
  .hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式,故可覆盖所有ie10的模式 */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} }  /*for Chrome/Safari*/


以-moz开头的firefox特有扩展样式;FF支持
以-webkit开头的webkit浏览器特有扩展样式;chrome & safari支持

我们如果不想那么的麻烦来做IE8的css hack,我们只需要在html的<head></head>之间加入<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,最好加到CSS文件下发即可,
在IE8 下和IE7下显示内容相同,这样我们只需区分IE6、IE7、火狐(firefox)的css hack即可。很多大型站点都采用在head加入此代码来减少css bug。

9. IE盒模型
只会出现在IE5.5或更早版本,盒模型解决方法: 
select {
width: 100px; /*IE5.x宽度*/ 
voice-family: "/"}/""; 
voice-family:inherit; 
width: 80px; /*正确宽度;*/
}

盒模型的清除方法不是通过!important来处理的。这点要明确。

10. IE6 png图片透明的解决方法

从IE7及IE7以上版本都支持PNG半透明格式图片,而唯独IE6不支持png格式透明图片,而GIF半透明效果不及png半透明格式图片
1)、需要JS文件。
下载地址:http://www.divcss5.com/css-hack/c396.shtml
2)、需要HTML里使用if条件注解针对IE6读取引入JS文件
<!--[if IE 6]> 
<script src="js/DD_belatedPNG.js" type="text/javascript" ></script>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript" ></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix(' '); 
</script>  
<![endif]-->

3)、添加需要声明的png使用的CSS类名称:

<script type="text/javascript"> 
DD_belatedPNG.fix('.divcss5 img,.divcss5') <!--这里添加需要声明的css命名,多处可以使用英文小写逗号隔开-->
</script>

PS: png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8

11. 只有Opera识别 

@media all and (min-width: 0px){ select {……} } /*针对Opera浏览器做单独的设定。*/


12. 让IE完美支持HTML5(css3)解决办法

http://www.codefans.net/articles/324.shtml 


13. 让HTML5&CSS3网站兼容老的IE浏览器的三种方法

h ttp://itbyc.com/web/2265.html
1) Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。
插件入口:http://code.google.com/p/html5shiv/
代码:
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

2)Selectivizr.js是一款神奇的工具,它能提供大量IE不支持的CSS选择器和属性,包括所有的last-child选择器。
插件入口:http://selectivizr.com/
代码:

<!--[if lte IE 8]><script src="js/libs/selectivizr.js"></script><![endif]-->

CSS3:圆角,投影的插件:
插件入口:http://css3pie.com/
使用方法:
在css样式代码中加上

{
border-radius: 8px; // 圆角
behavior: url(/插件目录/PIE.htc); 
/*注意:url只能相对html页面,而不是相对于css文件*/
}

3)<html>条件判断

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 lazy " lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 lazy " lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 lazy " lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 lazy " lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

14. 获取属性的方法

IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性.。

15. even对象属性

IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。


16. Chrome 中文界面下 小于 12px 的文本显示解决

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

17. 超链接访问过后hover样式就不出现了解决

被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

18. IE7下块元素如何兼容 display:inline-block写法?

方法1:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。兼容各浏览器的代码如下: div {display:inline-block;*display:inline; *zoom:1;...} 

方法2:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容): div {display:inline-block;...}div {*display:inline;}

display:inline-block元素间会产生多余空白怎么解决?
使用font-size设置可以解决,相关文章: http://www.phpvar.com/archives/453.html



19. IE6/7/8浏览器不支持rgba

使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下:


 .content { 
    width:180px; 
    height:260px; 
    margin:0px auto; 
    padding:30px 30px; 
    background:rgba(255, 255, 255, 0.6)!important;
    filter:Alpha(opacity=60); /* 使用IE专属滤镜实现IE背景透明 */
    background:#FFF;
}
.content p{ 
    position:relative;} /*实现IE文字不透明*/


© 著作权归作者所有

nancy88hh
粉丝 0
博文 24
码字总数 12876
作品 0
广州
私信 提问
Windows 7 软件兼容我看行

Windows 7 已经发布多日,相信微软粉丝儿们已被Windows 7 深深吸引。虽然微软方面称,Windows 7 操作系统已经和中国市场上91%的软件、92%的硬件和95%的网站兼容,但这并不意味着Windows 7 在...

junwong
2012/03/09
51
0
柯大侠整理的常见浏览器兼容问题

HTML中的兼容问题 不同浏览器的标签默认的外补丁和内补丁不同; 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大(即双倍边距bug); IE6中 z-index失效 在写a标签的...

james_kw1688
05/07
0
0
在IE11兼容视图下跟bootstrap3的兼容问题

大神们求助,在IE11兼容视图下跟bootstrap3的兼容问题:IE11的普通模式下bootstrap能正常显示,但是在兼容视图模式下就全乱了。请问有什么思路解决这个问题?

开源石头
2015/09/22
1K
3
Web标准中兼容问题的解决学习笔记

一、 兼容问题产生的原因 各种浏览器是由不同的公司开发的 浏览器不断的更新换代 二、 兼容问题的解决 使用不会出现兼容问题的属性 使用CSS hack 条件注释 使用不会出现兼容问题的属性 使用C...

雪之丞
2013/02/20
0
0
Open Sans字体兼容问题解决办法[font-face]

参考:http://www.tantengvip.com/2014/11/open-sans/ 1.font-face使用方法 font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到网页中 @font-face的语法规则: @font-face {font-f...

蚊子888
2015/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部