当前位置：首页 → 问答吧 → IE6中一个padding引起的问题

IE6中一个padding引起的问题

时间：2010-11-17

来源：互联网

本例借鉴自 Ext 中 mask 功能, Ext同样存在下面的问题:
内部节点宽度100%无法覆盖父节点,而高度可以
具体的问题看代码吧
-----------------------------------------------------------------------------------
代码: (对比下IE6)

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0;padding: 0;} body {height: 1500px;} #box1 {width: 200px;height: 200px;border: 1px solid #ddd;color: #fff;padding: 50px;background: green;} .mmc-masked {overflow: hidden;} .mmc-masked-relative {position: relative;} .mmc-el-masked {background-color: #CCC;width: 100%;height: 100%;top: 0;left: 0;position: absolute;} </style> <title>example</title> </head> <body> <div id="box1" class="mmc-masked mmc-masked-relative"> <div class="mmc-el-masked"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

---------------------------------------------------------------------------
在padding存在的情况下, height:100%生效了, width:100%无效

作者: ecma 发布时间: 2010-11-17

ie6跟其它浏览器计算宽度的值不一样。IE6是width+padding(left,right)值，其它浏览器则不是。

作者: shellf485 发布时间: 2010-11-17