CSS浏览器兼容有关问题
日期：2014-05-17 浏览次数：20787 次
CSS浏览器兼容问题
1.为什么无法定义1px左右高度的容器 IE6下
这个问题是因为默认的行高造成的,
解决的方法也有很多,例如:
2.cursor:hand VS cursor:pointer
问题：firefox不支持hand,但ie支持pointer。
解决方法： 统一使用pointer。
3.css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
4.怎么样才能让层显示在flash之上呢？
解决方法：给flash设置透明<param name=”wmode” value=”transparent” />
5.ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成:
显示类
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
6.margin加倍的问题
问题：设置为float的div在ie下设置的margin会加倍。
解决方法：这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”>
相应的css为
7.背景透明问题
最好两个都写，并将opacity属性放在下面
8.如何对齐文本与文本输入框
解决方法：加上 vertical-align:middle;
9.元素水平居中问题
解决方法：FF: margin:0 auto; IE: 父级{ text-align:center; }
10.Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
11.margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
12.IE捉迷藏的问题
问题：当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
13.FF和IEBOX模型解释不一致导致相差2px
问题：
ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102 //加上边框2px
解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
14.为什么web标准中IE无法设置滚动条颜色了
解决方法：将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
15.怎样使一个层垂直居中于浏览器中
解决方法：使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
CSS浏览器兼容
1.为什么无法定义1px左右高度的容器 IE6下
这个问题是因为默认的行高造成的,
解决的方法也有很多,例如:
overflow:hidden | zoom:0.08 | line-height:1px
2.cursor:hand VS cursor:pointer
问题：firefox不支持hand,但ie支持pointer。
解决方法： 统一使用pointer。
3.css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
4.怎么样才能让层显示在flash之上呢？
解决方法：给flash设置透明<param name=”wmode” value=”transparent” />
5.ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成:
{list-style:none;margin:0px;padding:0px;}显示类
display:block,inline 两个元素 display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 display:table; //for FF,模拟table的效果 display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
6.margin加倍的问题
问题：设置为float的div在ie下设置的margin会加倍。
解决方法：这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}7.背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60); IE: filter: alpha(opacity=10); FF: opacity:0.6; FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面
8.如何对齐文本与文本输入框
解决方法：加上 vertical-align:middle;
<style type="text/css">
<!—
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
--> </style>9.元素水平居中问题
解决方法：FF: margin:0 auto; IE: 父级{ text-align:center; }
10.Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
11.margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<div id=”imfloat”>
相应的css为
#imfloat{
float:left; margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}12.IE捉迷藏的问题
问题：当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
13.FF和IEBOX模型解释不一致导致相差2px
问题：
box.style{width:100;border 1px;} ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102 //加上边框2px
解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
14.为什么web标准中IE无法设置滚动条颜色了
解决方法：将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!—
html{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>15.怎样使一个层垂直居中于浏览器中
解决方法：使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
<style type="text/css">
<!—
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
