1、浏览器兼容的前提是养成好的网页开发习惯：
本人在做了几个月的前端浏览器兼容问题上，经常出现的不兼容是标记写法错误或简略导致的。例如Div的写法，一定要遵循好的习惯。
推荐写法：
<div></div>
不推荐的写法：
<div/>
2、Div中的文字在不同浏览器下换行问题
设置 style="white-space:normal;word- break : break -all;overflow:hidden; "
3、!important不同浏览器属性宽度不一样.
IE7本身支持!important,针对不同浏览器高度、宽度、内外边距问题可采用如下方法解决
.button-gap{
margin-right: 0px!imprtant; /*ie7及firefox支持*/
margin-right: 4px;/*ie6支持*/
}
4、*html和*+html问题
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
注意:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5、height属性问题
第一个兼容，IE FF 所有浏览器 公用（其实也不算是兼容）
height:100px;
第二个兼容 IE6专用
_height:100px;
第三个兼容 IE6 IE7公用
*height:100px;
height:100px;
*height:120px;
_height:150px;
在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;
在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。
6、Div设置padding问题
IE在解析padding的时候认为padding是在宽度里面缩进，而firefox则认为是在宽度外边缩进，所以下面是两个等价的css设置。
IE下：
.i-div{width:800px;padding-left:12px;padding-right:12px;height:500px}
等同于火狐下的：
Div中不包含其他元素作为站位符使用的时候,如果该DIV只是空的占位符,且高度小于12px时,ie解析错位,因为IE默认认为是12px,解决方法是加入lineheight属性高度等于height,同时font-size:0px;这样在IE下才不会解析错位。
.i-div{ height:6px;width:20px;}
要在ie下兼容，应该为
.i-div{height:6px;line-height:6px;font-size:0px}
.i-div{width:776px;padding-left:12px;padding-right:12px;height:500px}
为了兼容两个浏览器，可采用如下方法：
.i-div{width:776px!important;width:800px;padding-left:12px;padding-right:12px;height:500px}
注意：顺序一定不能变。火狐会取前者，而IE7两者都识别，最终取后者，其他IE识别后者。
7、关于空的DIV站位问题
如果DIV只是空的占位符,且高度小于12px时,ie在解析时,它默认是12px,解决方法是加入lineheight属性高度等于height,同时font-size:0px;这样在ie下才不会解析错位.
.i-div{ height:6px;width:20px;}
要在ie下兼容，应该为
.i-div{height:6px;line-height:6px;font-size:0px}
8、作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.防止页面内容超过Div高度而是div撑开，同时，注意Div内部Div要自适应高度则需要设置overflow: auto
9、对齐问题
（1）DIV中文字的垂直居中问题
设置vertical-align:middle;同时设置 line-height属性等于DIV的高度（不能换行）
（2）DIV水平居中问题
设置DIV的父容器style为text-align:center，然后将DIV的属性设置如下即可：
margin-left:auto; margin-right:auto;
10、图片的背景的平铺控制
1、只平铺一次
background-repeat:no-repeat;
2、水平平铺一次
background-repeat:repeat-x;
1、垂直平铺一次
background-repeat:repeat-y;
11、段首缩进设置
Text-indent:2em; //em 字体的高度
12、字间距的调整
letter-spacing属性用于设置字体间的距离，负值表示缩小，正值表示增大。
对于英文，通过word-spacing属性可以设置单词间的距离。
13、伪类的顺序：LVHA（link，visited、hover、active）顺序，违反该顺序，浏览器有些效果不支持。
14、文字和图片对齐
1、设置文字的外部属性valign为middle，或设置css样式中的text-align属性为middle（两个是等价的）
2、设置img元素的align属性值为absmiddle即可。
15.float属性带来的一些列问题
(1)、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。解决方案是在这个div里面加上 display:inline;样式如下：
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
(2)、
<#div id=”floatA” >
<#div id=”floatB” >
<#div id=” NOTfloatC” >
已知floatA、floatB设置了float：left属性，要求NOTfloatC不是水平排列，而是向下排列时，需要在<#div id=”floatB” >和<#div id=” NOTfloatC” >添加一个div，设置其class属性为：clear:both;即可。
(3)、作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的
box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px
auto;}
(4)、对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”> <div id=”left”></div> <div
id=”center”></div> <div id=”right”></div>
</div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left
center right的向下拉长,而
page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
<div id=”page”> <div id=”bg”
style=”float:left;width:100%;background-color: #99CCCC”> <div id=”left”></div>
<div id=”center”></div> <div id=”right”></div>
</div> </div> 再嵌入一个float left而宽度是100%的DIV解决之
分享到：
相关推荐
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
CSS 在不同浏览器中的兼容问题 CSS 在不同浏览器中的兼容问题是 web 开发中的一大挑战。不同的浏览器对 CSS 的解析和渲染方式存在差异，从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS ...
在网页设计领域，CSS（Cascading ...总的来说，处理CSS兼容性问题需要对各种浏览器的特性有深入理解，并掌握一定的技巧和工具。通过学习和实践，我们可以更好地应对这些挑战，创建出在多种浏览器下都能完美展现的网页。
《CSS-浏览器兼容实战》一书深入探讨了CSS在不同浏览器中的兼容性问题及其解决方案。CSS，即层叠样式表，是用于控制HTML或XML文档样式的计算机语言。在网页设计中，CSS起着至关重要的作用，尤其在实现响应式布局和...
"CSS浏览器兼容性速查"是开发者在工作中不可或缺的一个参考资料，它帮助我们了解各种CSS属性在不同浏览器上的表现，以便于优化代码，确保网站在主流浏览器上都能正常显示。 首先，我们要理解浏览器兼容性问题的来源...
CSS 多浏览器兼容性是Web开发中的重要环节，因为不同的浏览器对CSS的解析方式可能存在差异，这可能导致在不同浏览器中页面展示效果不一致。以下是一些关键知识点和解决方案： 1. **DOCTYPE影响CSS处理**： DOCTYPE...
### 如何让CSS在所有浏览器下兼容 在Web开发领域，确保CSS代码能够在不同浏览器上稳定运行是一项重要的技能。本文将详细介绍如何使CSS在各种浏览器（包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome）下...
以下是一些常见的CSS浏览器兼容性问题及其解决方案： 1. **垂直居中问题**： 在CSS中，要实现一个div的垂直居中，可以使用`vertical-align: middle;`和`line-height`属性。但这种方法要求内容不换行。例如： ```...
接下来，我们讨论解决CSS兼容问题的一些常见方法： 1. **使用浏览器前缀**：许多CSS3的新特性在早期的浏览器中需要特定的前缀才能生效，例如 `-webkit-`、`-moz-`、`-ms-` 和 `-o-`。为确保在这些浏览器中的兼容性...
css 兼容 css重设兼容浏览器 css重设兼容浏览器
本文旨在总结和分享一系列关于CSS兼容性的技巧，帮助开发者更好地解决在不同浏览器（如IE6-IE9、Firefox、Chrome等）下的样式差异问题。 #### 二、CSS兼容性基础知识 在深入探讨具体的兼容性技巧之前，我们首先...
css渐变代码,代码兼容各个浏览器，适用于ie7以上及各主流浏览器
CSS浏览器兼容性问题解决方案 CSS浏览器兼容性问题是Web开发中常见的问题。不同的浏览器对CSS的解析方式不同，这就导致了浏览器之间的兼容性问题。了解浏览器的兼容性问题是非常重要的，为此，我们总结了一些常见的...
本文将详细介绍如何编写针对不同浏览器的CSS兼容写法。 首先，我们可以使用特定的CSS选择器来让特定浏览器识别某些样式。例如，对于IE6，我们使用`*html .head{color:#000;}`，其中星号(*)前缀的选择器只有IE6会...
由于各个浏览器对CSS规范的实现不完全相同，存在一些兼容性问题，开发者可以通过特定的语法结构或者属性值来让特定的浏览器识别并应用这些样式。Safari，尤其是基于WebKit内核的Safari和Chrome浏览器，它们在处理...
CSS浏览器兼容问题，解决各个浏览器中css不兼容的问题。
1. `display: inline`：这是CSS中的一个属性，用于设置元素的显示类型为内联元素，意味着它会在同一行内与其他内联元素并排显示，但可能会在某些浏览器中引起显示问题。 2. `display: table`、`display: table-...
"别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念：CSS属性、浏览器兼容性和网页布局。 首先，我们来详细探讨CSS属性。CSS提供了无数的属性，如颜色、字体、大小、位置等，这些属性共同决定...