表迫使格的寬度在IE

我們也有類似如下的頁面：正確Chrome和Firefox 3.6在Windows XP表迫使格的寬度在IE

<?xml version="1.0" encoding="ISO-8859-1"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" 
      content="text/html;charset=ISO-8859-1" /> 
     <title>Welcome to Application</title> 
     <style type="text/css"> 
html, body, div, table, tr, th, td { 
    border: 0; 
    font-family: inherit; 
    font-size: 100%; 
    font-style: inherit; 
    font-weight: inherit; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
} 

html { 
    font-size: 100%; 
} 

body { 
    background: #fff; 
    color: #036; 
    font-family: Verdana, sans-serif; 
    font-size: 11px; 
    line-height: 18px; 
} 

* html body { 
    text-align: center; 
} 

.container { 
    display: block; 
    margin: 18px auto 0; 
    width: 750px; 
} 

* html .container { 
    height: 1%; 
    text-align: left; 
} 

.container:after { 
    clear: both; 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
} 

.section { 
    border-color: #e5e5e5 #dbdbdb #d2d2d2; 
    border-style: solid; 
    border-width: 1px; 
    margin-bottom: 18px; 
    padding: 17px 39px; 
} 

table, th, td { 
    vertical-align: middle; 
} 

th, td { 
    border-right: 1px solid #fff; 
    font-weight: 400; 
    padding: 9px; 
    text-align: left; 
} 

table { 
    border-collapse: separate; 
    border-spacing: 0; 
    margin-bottom: 1.4em; 
    width: 100%; 
} 

th { 
    background: #c3d9ff; 
    border-bottom:1px solid #ddd; 
    font-size: smaller; 
    font-weight: 700; 
} 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="section"> 
       <table cellspacing="0"> 
        <tr> 
         <th>Header</th> 
         <th>Header</th> 
         <th>Header</th> 
        </tr> 
        <tr> 
         <td>Content</td> 
         <td>1</td> 
         <td>a</td> 
        </tr> 
        <tr> 
         <td>Content</td> 
         <td>2</td> 
         <td>b</td> 
        </tr> 
        <tr> 
         <td>Content</td> 
         <td>3</td> 
         <td>c</td> 
        </tr> 
        <tr> 
         <td>Content</td> 
         <td>4</td> 
         <td>d</td> 
        </tr> 
        <tr> 
         <td>Content</td> 
         <td>5</td> 
         <td>e</td> 
        </tr> 
        <tr> 
         <td>Content</td> 
         <td>6</td> 
         <td>f</td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </body> 
</html>

的div顯示器，但是，在IE6中觀察時，table是迫使div比指定的750像素更寬。

此問題現已部分由表格的寬度明確設置爲670個像素

解決

我們還是會喜歡某個分辨率，表格的寬度並不需要明確定義

來源

2011-05-11 purinkle

這是在IE6中工作 - 是否當你添加div寬度增加的內容？ – lnrbob 2011-05-12 12:48:05

@lnrbob，如果我在Chrome和IE6中加載上述標記並比較兩個寬度，則寬度不同 – purinkle 2011-05-12 13:18:56

我沒有IE6我的電腦上，儘管我試圖在http://ipinfo.info/netrenderer/，似乎工作（短式設置上.container或table一個670px寬）模擬器和一個事情就是添加以下內容：

* html .section{ 
    width: 100%; 
}

我猜這告訴IE6 table的設置width: 100%;應基於.section的計算寬度（受其填充和邊框影響）而不是.container的寬度爲750px。

來源

2011-05-13 14:45:56

表迫使格的寬度在IE

回答

相關問題