[align=center][b]CSS浏览器兼容[/b][/align]
[b]1.为什么无法定义1px左右高度的容器 IE6下[/b]
这个问题是因为默认的行高造成的,
解决的方法也有很多,例如:
[b]2.cursor:hand VS cursor:pointer[/b]
问题：firefox不支持hand,但ie支持pointer。
解决方法： 统一使用pointer。
[b]3.css中的width和padding[/b]
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
[b]4.怎么样才能让层显示在flash之上呢？[/b]
解决方法：给flash设置透明<param name=”wmode” value=”transparent” />
[b]5.ul和ol列表缩进问题[/b]
消除ul、ol等列表的缩进时，样式应写成:
显示类
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
[b]6.margin加倍的问题 [/b]
问题：设置为float的div在ie下设置的margin会加倍。
解决方法：这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”>
相应的css为
[b]7.背景透明问题[/b]
最好两个都写，并将opacity属性放在下面
[b]8.如何对齐文本与文本输入框[/b]
解决方法：加上 vertical-align:middle;
[b]9.元素水平居中问题[/b]
解决方法：FF: margin:0 auto; IE: 父级{ text-align:center; }
[b]10.Div的垂直居中问题[/b]
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
11.margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
[b]12.IE捉迷藏的问题[/b]
问题：当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
[b]13.FF和IEBOX模型解释不一致导致相差2px[/b]
问题：
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;
[b]14.为什么web标准中IE无法设置滚动条颜色了[/b]
解决方法：将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" />
[b]15.怎样使一个层垂直居中于浏览器中[/b]
解决方法：使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
[b]16.IE6下为什么图片下有空隙产生[/b]
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
[b]17.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了。[/b]
解决方法是改变CSS属性的排列顺序:
L-V-H-A Code:
[b]18.UL的padding与margin[/b]
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
[b]19.CSS HACK的方法[/b]
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/ 注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。
[b]20.css filter的办法[/b]
新建一个css样式如下： #item { width: 200px; height: 200px; background: red; } 新建一个div,并使用前面定义的css的样式： <div id="item">some text here</div> 在body表现这里加入lang属性,中文为zh： <body lang="en"> 现在对div元素再定义一个样式： *:lang(en) #item{ background:green !important; } 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式： #item:empty { background: green !important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的 浏览器上。 对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用
[b]21.ie7和ie8[/b]
在head部分加上
[b]1.为什么无法定义1px左右高度的容器 IE6下[/b]
这个问题是因为默认的行高造成的,
解决的方法也有很多,例如:
overflow:hidden | zoom:0.08 | line-height:1px[b]2.cursor:hand VS cursor:pointer[/b]
问题：firefox不支持hand,但ie支持pointer。
解决方法： 统一使用pointer。
[b]3.css中的width和padding[/b]
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
[b]4.怎么样才能让层显示在flash之上呢？[/b]
解决方法：给flash设置透明<param name=”wmode” value=”transparent” />
[b]5.ul和ol列表缩进问题[/b]
消除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 元素的例子
[b]6.margin加倍的问题 [/b]
问题：设置为float的div在ie下设置的margin会加倍。
解决方法：这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}[b]7.背景透明问题[/b]
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属性放在下面
[b]8.如何对齐文本与文本输入框[/b]
解决方法：加上 vertical-align:middle;
<style type="text/css">
<!—
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
--> </style>[b]9.元素水平居中问题[/b]
解决方法：FF: margin:0 auto; IE: 父级{ text-align:center; }
[b]10.Div的垂直居中问题[/b]
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*/
}[b]12.IE捉迷藏的问题[/b]
问题：当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
[b]13.FF和IEBOX模型解释不一致导致相差2px[/b]
问题：
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;
[b]14.为什么web标准中IE无法设置滚动条颜色了[/b]
解决方法：将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>[b]15.怎样使一个层垂直居中于浏览器中[/b]
解决方法：使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
<style type="text/css">
<!—
div {
position:absolute;
top:50%;
lef:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>[b]16.IE6下为什么图片下有空隙产生[/b]
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
[b]17.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了。[/b]
解决方法是改变CSS属性的排列顺序:
L-V-H-A Code:
<style type="text/css">
<!—
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>[b]18.UL的padding与margin[/b]
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
[b]19.CSS HACK的方法[/b]
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/ 注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]> <!-- 适合于IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->
<!--[if lte IE 6]> <!-- 适合于IE6及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->[b]20.css filter的办法[/b]
新建一个css样式如下： #item { width: 200px; height: 200px; background: red; } 新建一个div,并使用前面定义的css的样式： <div id="item">some text here</div> 在body表现这里加入lang属性,中文为zh： <body lang="en"> 现在对div元素再定义一个样式： *:lang(en) #item{ background:green !important; } 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式： #item:empty { background: green !important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的 浏览器上。 对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用
[b]21.ie7和ie8[/b]
在head部分加上
<meta content="ie=7" http-equiv="x-ua-compatible"> ie7，ie8 
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
