CSS浏览器兼容 解决方案,Bug及Bug修复,一、双空白边浮动Bug 在IE6及以下的版本中存在 解决： display:inline;(显示：内嵌）,二、3像素文本偏移,当文本与一个浮动相邻，IE6及以下版本在解析浮动元素与流动文本环绕时出现。,浮动元素 流动文本1 流动文本2 流动文本3 流动文本4 流动文本5 流动文本6 流动文本7 流动文本8 ,#float float:left; width:100px; height:100px; border:4px red solid; #flow border:4px solid blue; margin-left:120px; * html #float margin-right:-3px; * html #flow height:1%; 强制布局 ,三、重复字符Bug,在IE6版本浏览器中，如果浮动元素的第一个和最后一个元素之间有多个注释时导致重复字符出现。 文本行1 文本行2 文本行3 文本行4,文本行1 文本行2 文本行3 文本行4 4,捉迷藏Bug, 左侧栏目 左侧栏目 左侧栏目 . 右侧栏目 右侧栏目 右侧栏目 . 底部栏目 . ,#content background:#EEE8AA; #left float : left; border: 1px solid red; width : 200px; height: 200px; #bottom clear: both; height:50px; width:100%; ,解决方案 去除父元素的背景色 为父元素指定固定高度和宽度 为父元素和浮动元素定义 position:relative;,百分比Bug,#content width:403px; #left,#right float:left; width:50%; height:100px; ,IE对百分比计算方法是四舍五入；Firefox是忽略小数部分，但会把多出的长度分配给每个元素；Netscape忽略小数部分，多出部分透明显示。 解决方法： 右侧子元素中clear:right;,项目符号隐藏Bug, 列表项1 列表项2 列表项3 ,#left width:100px; height:100px; float:left; border:solid 1px red; #right width:400px; float:left; border:solid 1px blue; ul margin:0; padding:0; ,列表左边起始位置是内容，而不是列表符，当列表补白值设为0时，实际位置是负值，产生了隐藏。 解决方法 #right padding-left: 10px; /* IE5.0*/ padding-left: 15px; /* IE6.0*/ ,浏览器默认样式,1、页边距 IE margin:0 FF(firefox): padding:0 2、居中 IE margin-left:auto margin-right:auto FF text-align:center,IE 7浏览器兼容,1、盒模型溢出, 内容 ,#box width:100px; height:100px; border:double red 2px; #sub_content width:200px; height:200px; margin-top:50px; margin-left: 50px; border:thin dashed blue; ,解决方案：Min-height:100PX;,