ie 6、7双倍padding

最新推荐文章于 2021-08-03 21:15:03 发布

pengmingdong

最新推荐文章于 2021-08-03 21:15:03 发布

阅读量316

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_31648761/article/details/60872087

版权

前端笔记专栏收录该内容

37 篇文章 3 订阅

订阅专栏

以前经常遇到该bug，可是每次当时间记住最后最做项目是又给忘记了，为了表示下次鸭梨不大，今天发狠了，好好整理一下，
哈哈：谁说ie6有双倍margin值，我还有ie6 7 双倍padding值
产生条件：当父级元素没有定有高度，切定义了padding值，里面子元素有浮动时，padding值在ie6 7下会成双倍，

解决方法：
1、定义父级元素的高度
2、给父级元素添加display:inline-block;

举例如下；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
 *{padding:0; margin:0;}
</style>
</head>

<body>
<div class="box" style="padding:30px; width:500px; background:#000;">
  <!--box不定义高度只定义padding值-->
  <div class="left" style="float:left; width:200px; background:#FFF">我是左边浮动元素</div>
  <div class="right" style="float:right; width:200px; background:#FFF">我是右边浮动元素</div>
</div>
</body>
</html>