不填充母

IE7子元素，我有这样的结构：不填充母

<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技巧我可以尝试？

谢谢！

来源

2010-07-28 Tim Sheiner

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

*{margin:0;padding:0}

如果你把@你的CSS文件的顶部，它应该重置Internet Explorer的默认CSS样式（仅在保证金&填充）

来源

2010-08-10 22:47:58 JKirchartz

什么是你的.tab的宽度列表项目？如果它们设置为浮动，并且不指定宽度，则可能会导致您的问题。

来源

2010-09-23 20:05:10 logan

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

我在我的本地主机上试过这个。没有任何问题。

来源

2010-12-17 09:14:41 Shaakunthala

回答

相关问题