总结CSS的浏览器兼容问题及解决方法
来源：程序员人生 发布时间：2013-10-19 06:11:49 阅读次数：3404次
IE的问题：
一.双边距问题
浮动元素的外边距会加倍，但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。
解决方法：在此浮动元素增加样式 display:inline;
二.图片产生的间隙
父元素直接包含<img>，这个图片下方会和父元素边缘产生间隙。
解绝方法：1.在源代码中让</div>和<img>在同一行，因为那个间隙是由换行符产生的。
2.给<img>添加样式 display:block;
三.最小高度问题
块元素最小高度为10px，当高度定义小于10px时，仍为10px;
解决方法：为此块元素添加样式 overflow:hidden; 或 让此款块元素的字体大小等于此会元素的高度。
四.列表的li为浮动，则列表后面的元素不能换行的问题
列表的li为浮动，则列表后面的元素不能换行。
解决方法：为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。
五.子元素的上下外边界问题（父元素没有定义高度时）
在父元素没有定义高度时，子元素的上下外边界和父元素上下外边界叠加，并且显示在父元素外面。
解决方法：给父元素定义内边距或边框。
firefox问题：一.列表的li为浮动，则列表后面的元素不能换行的问题
列表的li为浮动，则列表后面的元素不能换行。
解决方法：为这个ul定义合适的宽高或给包含这个ul 的父div定义合适的宽高。
二.子元素的上下外边界问题（父元素没有定义高度时）
在父元素没有定义高度时，子元素的上下外边界和父元素上下外边界叠加，并且显示在父元素外面。
解决方法：给父元素定义内边距或边框。
二者之间的兼容问题：一.水平居中
IE6：使用text-align不但能使文本居中，还能使嵌套的块元素居中。
FF2：使用text-align只能使文本居中。
解决方法：在需要居中的块元素添加margin:0 auto;
二.div高度自适应问题
IE6：如果内容的高度超过父元素的高度，父元素的高度会增加。
FF2 : 如果内容的高度超过父元素的高度，内容不会隐藏，父元素的高度也不会增加。
解决方法：（假定最小高度为50px）在父元素添加 min-height:50px;
height:auto !important;
height:50px;
三.父元素包含浮动子元素时的高度问题
IE6：高度会被子浮动元素撑开。
FF2：高度不会被子浮动元素撑开。
解决方法：在子浮动元素后面再加一个div，此div的定义：clear:both;
line-height:1px;
visibility:hidden;
四.嵌套元素边距高度的叠加问题（定义父元素宽度时）
IE6：子元素的上边距和父元素的上内边距叠加。
FF2：子元素的上边距和父元素的上内边距相加。
解决方法：单独使用padding或margin。
五.子元素的上边距问题 （定义父元素高度时）
IE6：子元素上边距显示正常。
FF2：子元素上边距显示在父元素上方。
解决方法：在父元素增加overflow:hidden; 或给父元素增加边框或内边距。
六.子元素负边界问题
IE6：超出父元素的部分会被父元素覆盖。
FF2：超出父元素的部分会覆盖父元素，但前提是父元素有边框或内边距，不然负边距会显示在父元素上，使得父元素拥有负边距。
解决办法：使用相对定位。
七.列表的默认显示问题
IE6：列表有左边界、下边界、右内边距，同时项目符号在列表外面。
FF2：列表有上下边界、左右内边距、项目符号在列表里面。
解决方法：为ul添加样式：margin:0;
padding:0;
八.<body>的默认padding和margin不同的问题。
解决方法： 给body添加样式：margin:0;
padding:0;
九.对元素使用绝对定位问题（元素定义外边距时）
IE6：外边距不会视为元素的一部分，因此在对此元素使用绝对定位时外边距无效。
FF2：外边距会视为元素的一部分，因此在对此元素使用绝对定位时外边距有效。（例如margin_top会和top相加）
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
