将边距添加到IE7中的100％宽度元素？

在IE7中，我想为它的父级宽度为100％的元素添加一些边距。但是元素溢出了它的父项。有点合乎逻辑，但是这个问题的解决方案是什么？将边距添加到IE7中的100％宽度元素？

我添加了一个简单的例子，其中黄色的div溢出它的绿色父。

<!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><title>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head> 
<body> 

<div style="width: 500px; height: 200px; background-color: green;"> 
<div style="width: 100%; height: 100%; margin: 10px ; background-color: yellow;"> 
    Test 
</div> 
</div> 

</body> 
</html>

谢谢。

来源

2010-03-02 Herman Cordes

如果你只是删除width: 100%;声明，就这么简单：

<div style="width: 500px; height: 200px; background-color: green;"> 
<div style="height: 100%; margin: 10px ; background-color: yellow;"> 
    Test 
</div> 
</div>

默认行为是可拉伸至容器的整个宽度。

来源

2010-03-02 11:09:14

好吧，几乎在那里！其实高度100％也会导致绿色分区溢出。如果没有100％的高度，它的高度会降低到文本行的高度。就我而言，这不是一个解决方案。那么，什么是最好的解决方案来获得相同的高度结果？谢谢！ –

@Monty - 要做到这一点，你需要给内部div的高度：180px;'，因为你知道外部div的高度，所以这是最安全的路线。 –

似乎无法找到任何其他体面的方式。最佳解决方案，谢谢。 –

将边距添加到IE7中的100％宽度元素？

回答

相关问题