gpt4 book ai didi

css - IE7 子元素未填充父元素

转载 作者:行者123 更新时间:2023-11-28 12:27:09 26 4
gpt4 key购买 nike

我有这样的结构:

<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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com