版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
CSS多浏览器兼容性问题及解决方案兼容性处理要点
1、DOCTYPE影响CSS处理
2、FF:设置padding后，div会增加height和width，但IE不会，故需要用!important多设一个height和width
3、FF:支持!important，IE则忽略，可用!important为FF特别设置样式
4、div的垂直居中问题:vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行
5、在mozillafirefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。
[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。
2、CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注]最好两个都写，并将opacity属性放在下面。
3、CSS圆角问题
IE：ie7以下版本不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。
[注]圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:handVScursor:pointer
问题说明：firefox不支持hand，但ie支持pointer，两者都是手形指示。
解决方法：统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：使用指定的字体大小如14px。
并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。
6、CSS双线凹凸边框
IE：border:2pxoutset;。
FF：-moz-border-top-colors:#d4d0c8white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040#808080;-moz-border-bottom-colors:#404040#808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案：在这个div里面加上display:inline;
例如：
<#divid=”imfloat”>
相应的css为
以下为引用的内容：
复制代码代码如下:
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
关于CSS中的问题实在太多了，甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽量依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下，FF和Opera的CSS解释标准更贴近CSS标准，也更具有规范性。
2、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可以使样式失效。
请看以下代码：
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""///TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="///1999/xhtml">
<head>
<title></title>
<styletype="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
[/code]
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""///TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="///1999/xhtml">
<head>
<title></title>
<styletype="text/css">
<!--
p{font-size:12px;}
p:first-letter{font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter{font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。仅IE7与IE5.0可以识别
*+htmlselect{…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+htmlselect{…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
*htmlselect{…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
4、html/**/>bodyselect{…}
这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6
select{display/*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/{display/*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
7、仅IE5不识别，屏蔽IE5
select/*IE5不识别*/{…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
8、盒模型解决方法
selct{width:IE5.x宽度;voice-family:”\”}\”";voice-family:inherit;width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
9、只有Opera识别
@mediaalland(min-width:0px){select{……}}
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
1.区别FF和IE
1-1
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：
插入代码：
div{
background-color:red!important;
background-color:blue;
}
因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。
1-2
还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“<”等，都只有IE可以识别，但是不合理，!important是符合标准的。所以
插入代码：
div{
background-color:red;
>background-color:blue;
}
在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。
这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。
2.区别IE5.5和IE的其他版本
看一个例子：
插入代码：
div{
>background-color:black;
>background-color/*IE5.5*/:green;
}
这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。
3.区别IE5与IE5.5+
插入代码：
div{
>background-color:red;
}
div/*IE5.5+*/{
>background-color:black;
}
这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。
4.完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：
插入代码：
div{
width:500px;
height:50px;
background-color:red!important;/*FF*/
background-color:blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IEonly*/background-color:black;/*IE6*/
>/*IEonly*/background-color/*IE5.5*/:green;
}
需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。
在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法，已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明，现在继续对浏览器中存在的CSS的兼容性问题进行简单说明。1）列表不能换行的问题问题：
li设置为浮动，后面的li紧随其后，不能换行解决：
在下一个li上清除浮动：clear:both
实例：
[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type=text/css>
#one{
float:left;
}
#two{
clear:left;
}
</style>
</head>
<body>
<li
id="one">
一级标题
<div
id="onediv">
<ul
id="oneli">二级标题
</ul>
<ul
id="oneli">
二级标题</ul>
</div>
</li>
<li
id="two">
一级标题
<div>
<ul>
二级标题</ul>
<ul>
二级标题</ul>
</div>
</li>
</body></span>
2）如何对齐文本和文本输入框问题：
当input元素在设置了高时，在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象，其他正常，包括opera解决：
vertical-align:middle;实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type="text/css">
.in{
width:200px;
}
.alter
{
width:200px;
vertical-align:middle;
}
</style>
</head>
<body>
<div>修正前：</div>
<div>
用户名<input
name="用户名"
type="text"
class="in"
style="height:100px;
">
密码<input
name="密码"
type="text"
class="in"
style="height:100px;
"
>
</div>
<br/>
<br/>
<div>修正后：</div>
<div>用户名<input
name="用户名"
type="text"
class="alter"
style="height:100px;
"
>
密码<input
name="密码"
type="text"
class="alter"
style="height:100px;
"
></div>
</body></span>
3）容器宽度在浏览器中解释不同问题：
不同浏览器下宽度不同，比如说设置width：200px，在iE7、IE8、IE9下显示的是200px，在FF、Chrome、Opera中显示的是220px解决：
用width:200px;*width:220px，其中iE7、IE8、IE9会识别两个宽度，以后者为准，故宽度为220px，在FF、Chrome、Opera中，识别第一个宽度，解析后显示宽度为220px实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"></head>
<body>
修正前：
<div
style="border:10px
solid
red;width:200px;height:200px;cursor:pointer;"
onclick="alert(this.offsetWidth)"
>点我，看看有什么不同！
</div>
修正后：
<div
style="border:10px
solid
red;width:200px;
*width:220px;
height:200px;cursor:pointer;
"
onclick="alert(this.offsetWidth)"
>点我，看看有什么不同！
</div>
</body></span>
4）Div居中问题问题：
IE7、IE8、IE9在设置了margin-left和margin-right为auto后，并不能使div居中显示，其他行解决：
设定body居中，定义text-algin:center实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><body
style="text-align:center;">
<div
style="margin-left:auto;margin-right:auto;
width:300px;
height:200px;
border:10px
solid
red;"
>div居中问题解决
</div>
</body></span>
5）字体大小问题问题：
对字体大小small的定义不同，在Firefox和Chrome中为small，而IE7、IE8、IE9中为16px，差别挺大解决：
明确说明字体的大小，例如16px实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><body
>
<p
style="font-size:small;">p对象中的内容，此时字体大小为small</p>
<p
style="font-size:16px;">p对象中的内容,此时字体大小固定为16px</p>
</div>
</body></span>
6）min-height问题问题：
IE7、IE8、IE9对min-height不识别，其他无问题解决：
#box{width:100px;height:35px;}
html>body#box{width:auto;height:auto;width:100px;min-height:35px;}
实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type="text/css">
#box{
width:
100px;
height:
35px;}
html>body
#box{
width:auto;
height:auto;
width:100px;
min-height:35px;}
</style>
</head>
<body
>
<div
style="border:1px
solid
red;
width:150px;
height:35px;">最小宽度问题</div>
<br/>
<div
style="border:1px
solid
red;
width:150px;
min-height:35px;">最小宽度问题</div>
解决方法：
<div
id="box"
style="border:1px
solid
red;">最小宽度问题</div>
<br/>
<div
id="box"
style="border:1px
solid
red;">最小宽度问题</div>
</div>
</body></span>
7）层垂直居中问题：
层不能垂直居中解决：
利用position:absolute;top:50%;left:50%;margin:-100px;width:200px;height:200px;border:1pxsolidred;实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type="text/css">
#hello{
position:absolute;
top:50%;
left:50%;
margin:-100px;
width:200px;
height:200px;
border:1px
solid
red;
}
</style>
</head><body>
<div
id="hello">层垂直居中问题</div>
</body></span>
8）嵌套div标签的居中问题问题：
假定有一下情况：即div嵌套div
<divid="a">
<divid="b"></div>
</div>
此时要设置内层div在外层div的居中位置，在外层设置了text-algin为center后，IE7、IE8、IE9显示正常，但是在IE10和chrome和opera和FF仍然显示在居左位置。解决：
除在外层设置text-algin为center，在内层div中设置margin：0auto样式实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type="text/css">
.alter{
width:150px;
height:50px;
}
</style>
</head>
<body
>
解决前：
<div
style="border:1px
solid
red;
width:300px;
height:100px;text-align:center;">
<div
style="border:1px
solid
red;
width:150px;
height:50px;">嵌套div标签的居中问题</div>
</div>
</div>
解决后：
<div
style="border:1px
solid
red;
width:300px;
height:100px;text-align:center;">
<div
style="border:1px
solid
red;
width:150px;
height:50px;
margin:0
auto;">嵌套div标签的居中问题</div>
</div>
</body></span>
9）td高度的问题问题：
在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。解决：
暂无解决方法其问题示例如下：
[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><body
>
<table>
<tr>
<td
style="line-height:20px;
border:5px
solid
red;">设置line-height:20px</td>
</tr>
</table>
<table>
<tr>
<td
style="height:20px;
border:5px
solid
red;">设置height:20px</td>
</tr>
</table>
</body></span>
10）li指定高度后，出现排版错误问题：
在IE7下如果为li指定高度可能会出现排版错位，其他浏览器无此现象解决：
设置line-height实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type="text/css">
li{
list-style-position:inside;
}
</style>
</head><body
>
解决前：
<li
style="height:40px;">hello</li>
<li
style="height:40px;">hello</li>
<li
style="height:40px;">hello</li>
<li
style="height:40px;">hello</li>
解决后：
<li
style="line-height:40px;">hello</li>
<li
style="line-height:40px;">hello</li>
<li
style="line-height:40px;">hello</li>
<li
style="line-height:40px;">hello</li>
</body></span>
11）list-style-position默认值的问题问题：
IE7、FF、chrome、Opera默认的li的list-style-position属性为inside，而在IE8、IE9、IE10默认的是list-style-position:outside解决：
将其显示的样式明确表示实例：[html]
\o"viewplain"viewplain\o"copy"copy<span
style="font-size:18px;"><style
type="text/css">
li{
list-style-position:inside;
}
</style>
</head><body
>
<div>解决前：
<li
>hello</li>
<li
>hello</li>
</div>
<div>解决后：
<li
>hello</li>
<li
>hello</li>
</div>
</body></span>
12）禁止选取网页内容问题：
在需要禁止选取网页的内容，FF用-moz-user-select:none，其他浏览器用onselectstart='returnfalse'解决：
FF：-moz-user-select:none
其他：onselectstart='returnfa
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025届四川省泸州市天府老窖中学高三下第一次模拟数学试题
- 2024年中国石油秋季高校毕业生招聘11125人笔试参考题库附带答案详解
- 2024山东日照市水产集团总公司招聘16人笔试参考题库附带答案详解
- 二零二五版劳务分包的签订流程
- 二零二五版出售房屋委托代理协议
- 二零二五金融行业商业机密保密协议书
- 房屋产权置换协议二零二五年
- 二零二五快手电商合作的协议书范例
- 二零二五版设计图纸合同
- 2025届湖南平江二中高三3月（开学考）数学试题
- 狂犬疫苗打完免责协议书（2篇）
- 游乐设备事故应急预案
- 2025年杭州大有供电服务有限公司招聘笔试参考题库含答案解析
- 公司第1季度品质部工作总结报告
- 单片机应用技术试题题库答案
- 2025年浙江省金融控股有限公司招聘笔试参考题库含答案解析
- 新产品开发流程和步骤
- 大别山精神完整版本
- 2025年苏美达股份有限公司招聘笔试参考题库含答案解析
- 药店医保自查报告范文
- 《质谱分析方惠群版》课件
评论
0/150
提交评论