width: 720px;
}
此时div#left将改变了其实际的宽度，我们来看下面的一个图，上图是没有padding值时的div#left，而下图是有padding的div#left: 
这个Bug在所有浏览器都将存在，因为在div#left中padding值改变了最初的宽度220px，那么要克服这个Bug也不难，只需要在div#left内部增加一个div，并把padding值移入到这个新增加的div中就行了。
复制代码
<div id=”wrap” >
<div id=”left” >
<div>left</div>
</div>
<div id=”content” >main</div>
</div>
CSS Code
复制代码
#wrap {
width: 960px;
background: #66CCFF
}
#left {
background: #FFCC99;
float: left;
width: 220px;
}
#left div {
padding: 0 10px;
}
#right {
background: #9933CC;
float: right;
width: 720px;
}
此例只说加了padding值，如果在div中加了border值，我们同样需要把border值也移入到内部的div中，这样就可以轻松克服Box Model带来的Bug。当然不增加额外标签也有一种办法可以解决，就是重新计算宽度，但这种方法是治标不治本，小生不提倡使用这种方法。
三、设置元素的最小高度和最小宽度
在Web页面设计中，有时为了达到元素的的统一渲染的风格，我们有时需要使用min-height和min-width来控制元素的最小高度和最小宽度值。在别的浏览器都运行正常，可唯独这个IE6不识别人家。因此在使用min-height和min-width时，为了达到效果一致，我们要针对IE6另作处理。其中min-height解决起来相当简单，但是min-width在IE6下要顺利解决就有点麻烦（关于IE6下的min-width放到后面一起探讨）这里我们主要来看min-height的解决办法。
采用!important方法修复
第一种方法采用的是“!important”来解决，让min-height在IE6下能正常工作，具体代码如下：
复制代码
.demo {
min-height: 100px;
height: auto !important;/*现代浏览器下，内容高度超过100px时自动获得其高度*/
height: 100px;/*此值设置和min-height值一样，因为IE6下元素高度会根据内容自己的高度而定，所以内容高度低于min-height值时，为了达到min-height效果，需要给元素一个显式的高度值*/
}
采用子选择器方法来修复
大家都知道IE6是不支持子选择器的，所以我们也可以使用这个方式来解决min-height在IE6下效果
复制代码
.demo {
min-height: 100px;
height: 100px;
}
html >body .demo {
height: auto;/*只有现代浏览器才能识别*/
