不填充母

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

回答

相關問題