您的位置：首页 > Web前端 > HTML

ie6双倍边距bug

2018-01-31 12:00 232 查看
问题描述

在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍。

解决方案

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<style type="text/css">
.box1{

width: 100px;
height: 100px;
background-color: red;

float: left;
margin-left: 100px;
/*解决办法：
*设置display:inline
* 对于一个浮动元素来说设置display:inline没有任何意义
* 但是该属性可以解决IE6的双倍边距问题
*/
/*删除display: inline;观察在ie6和其他浏览器中不同情况*/
display: inline;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;

float: right;
margin-right: 100px;

display: inline;
}
</style>
</head>

<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html IE6 双倍边距
相关文章推荐
新的分享
章节导航