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:200px;
height:200px;
border:1px solid red;
}
-->
</style>
16.IE6下为什么图片下有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
17.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了。
解决方法是改变CSS属性的排列顺序:
L-V-H-A Code:
<style type="text/css">
<!—
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
18.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
19.CSS HACK的方法
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]-->
20.css filter的办法
新建一个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 个人比较喜欢用
21.ie7和ie8
在head部分加上
<meta content="ie=7" http-equiv="x-ua-compatible"> ie7，ie8
基本一样
分享到：
相关推荐
### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展，不同的浏览器对于CSS的支持程度也有所不同，这导致了在开发过程中经常会遇到浏览器之间的兼容性问题。本文旨在总结和分享一系列关于CSS兼容性的技巧...
【CSS浏览器兼容问题详解】 在Web开发中，CSS（层叠样式表）是用于控制网页元素样式的关键技术，但它在不同浏览器之间的兼容性问题一直是开发者面临的挑战。尤其是针对老版本的Internet Explorer（如IE7、IE6）和...
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
### 最全的CSS浏览器兼容问题解析 #### 一、引言 随着Web技术的发展，不同浏览器及其版本间的差异成为前端开发者面临的一大挑战。本文旨在全面介绍CSS在不同浏览器中的兼容性问题及相应的解决方案，帮助开发者更好...
总之，理解并解决CSS浏览器兼容问题需要开发者对各种浏览器的特性有深入的认识，同时也需要掌握一定的技巧和工具，以确保网站在不同环境下都能良好运行。通过持续学习和实践，开发者可以更好地应对这个挑战，创建出...
CSS浏览器兼容问题解决方案 本文总结了CSS浏览器兼容问题的解决方案，涵盖了div的垂直居中问题、margin加倍的问题、浮动ie产生的双倍距离、IE与宽度和高度的问题、页面的最小宽度、DIV浮动IE文本产生3象素的bug、IE...
### CSS浏览器兼容问题整理 #### 一、引言 在前端开发过程中，浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于CSS的支持程度不一，这导致了许多原本简单的样式实现起来却变得异常复杂。本文...
在探讨“div+css浏览器兼容问题”这一主题时，我们首先需要理解，浏览器兼容性问题主要源于不同浏览器对Web标准的解析和实现存在差异。这不仅包括主流浏览器如Chrome、Firefox、Safari、Edge以及IE（尤其是IE6）之间...
### 最全的CSS浏览器兼容问题解析 随着Web技术的发展与普及，不同的浏览器版本对CSS的支持程度也各有不同，这导致了在开发过程中经常会遇到各种各样的兼容性问题。本文将全面解析常见浏览器（如IE6/IE7/IE8/IE9、...