web前端开发中浏览器兼容问题(七)

29.在IE6中list项目间出现空行

ul{

width: 200px;

margin: 0;

padding: 0;

list-style: none;

}

li a{

background: #95CFEF;

display: block;

margin-bottom: 1px;

}

显示区别

web前端开发中浏览器兼容问题(七)_第1张图片

30.在IE6中使用float属性会产生两倍距离

#container{

border: solid; 1px #000;

background: #777;

width: 400px;

height: 160px;

margin: 30px 0 0 30px;

}

#element{

background: #95CFEF;

border: solid 1px #36F;

width: 400px;

height: 160px;

margin: 30px 0 0 30px;

float: left;

}

显示区别:

在IE6浏览器中存在使用float属性会产生两倍距离,在FF和IE7中则不会有同样的情况出现。

web前端开发中浏览器兼容问题(七)_第2张图片

31.溢出边界问题

#container{

border: solid; 1px #000;

background: #777;

width: 400px;

height: 160px;

margin: 30px 0 0 30px;

}

#element{

background: #95CFEF;

border: solid 1px #36F;

width: 300px;

height: 200px;

margin: 0 auto;

}

显示区别:

当子元素高度超出父元素时,IE6和IE7 FF 结果不同

web前端开发中浏览器兼容问题(七)_第3张图片

32.最低高度设置margin-height IE6不兼容

#left,#right{

padding: 5px;

border: 1px solid #000;

float: left;

width: 70px;

margin-right: 5px;

}

#right{

min-height: 75px;

}

显示区别

web前端开发中浏览器兼容问题(七)_第4张图片

你可能感兴趣的:(web前端开发中浏览器兼容问题(七))