电子商务网页制作技术 教学课件 作者 王春燕 CSS浏览器兼容解决方案.pptVIP

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