Question

我有这样的结构：

<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技巧？

谢谢！

Answer 1

我尝试过，但似乎没有问题。在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>

我在我的localhost上尝试了这个。没问题。

Answer 2

您是否尝试过重置CSS？一个简单的是

*{margin:0;padding:0}

如果你把它放在CSS文件的顶部，它应该重置Internet Explorer的默认CSS样式（仅限于边距和填充）

Answer 3

.tab列表项的宽度是多少？如果它们设置为浮动，并且未指定宽度，则可能导致您的问题。

IE7子元素不填充父级

3 个答案: