我有这样的结构:
<ul class="control tabSet buttons vertical ">
<li class="tab first">
<button class="button up" id="source">
<span class="wrap">Label 1</span>
</button>
</li>
<li class="tab last">
<button class="button up" id="save">
<span class="wrap">Label 2</span>
</button>
</li>
</ul>
在除 IE7 之外的所有浏览器中，只需将 .button 元素的宽度设置为 100%，我就会得到每个子元素与最宽子元素一样宽的行为(由 .wrap 元素内的文本确定) .我不必设置父级的宽度；它似乎是由浏览器根据最宽子项的宽度设置的。
但是在 IE7 中(在标准模式下)我无法获得相同的行为。每个子元素的宽度都取决于它所包含的文本所强制的宽度。如果我确实明确设置了父级的宽度，那么子级将填充该宽度。问题是我无法设置此宽度，因为在运行前我不知道每个子项中的文本是什么。
我可以想象用 Javascript 解决这个问题，但想知道是否有一些我可以尝试的 IE7 CSS 技巧？
谢谢!
最佳答案
我试过了，好像没有问题。在 IE7 和 Firefox 中的工作方式相同。
<!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>Test</title>
<style type="text/css">
.tab { width: 500px; }
.button { width: 100%; }
</style>
</head>
<body>
<ul class="control tabSet buttons vertical ">
<li class="tab first">
<button class="button up" id="source">
<span class="wrap">Label 1</span>
</button>
</li>
<li class="tab last">
<button class="button up" id="save">
<span class="wrap">Label 2</span>
</button>
</li>
</ul>
</body>
</html>
我在我的本地主机上试过这个。没问题。
关于css - IE7 子元素未填充父元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3349031/