任意柱尺寸和失蹤的邊界在IE6

我創建嵌套表與下面的標記，其中第一個表中包含一個典型的行的例子：任意柱尺寸和失蹤的邊界在IE6

<table class="outer"> 
    <tr> 
     <td> 
      <table class="column" id="left_column"> 
       <tr> 
        <td> 
         <table class="cell" id="t1"> 
          <tr> 
           <td> 
            <asp:Literal runat="server" ID="t1r2c0" /> 
           </td> 
           <td> 
            <asp:Literal runat="server" ID="t1r2c1" /> 
           </td> 
           <td class="image"> 
            <span id="s1" runat="server"> 
             <asp:PlaceHolder ID="p1" runat="server"> 
             </asp:PlaceHolder> 
            </span> 
           </td> 
           <td> 
            <asp:Literal runat="server" ID="t1r2c3" /> 
           </td> 
           <td class="gray"> 
            <asp:Literal runat="server" ID="t1r2c4" /> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <table class="cell" id="t2"> 
          <!-- ... --> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td> 
      <table class="column" id="rightColumn"> 
       <!-- ... --> 
      </table> 
     </td> 
    </tr> 
</table>

這裏是相關的CSS：

#rightColumn table, #leftColumn table { 
    width: 100%; 
} 
.cell { 
    border-collapse: collapse; 
    border: 2px solid black; 
    margin: 5px; 
} 
.cell td { 
    border-collapse: collapse; 
    border: 2px solid black; 
    text-align: center; 
    vertical-align: middle; 
} 
.image { 
    padding: 0; 
    margin: 0; 
    width: 75px; 
}

在Firefox這使得這樣的：

enter image description here

但在IE6它呈現這樣的：

enter image description here

兩件事情是去錯在IE：

右手邊是從每個表丟失。
儘管事實上這些單元格是類「圖像」，並且應具有75px的固定寬度，但右欄中的第二個和第三個表格具有最後一列的任意大小。

任何意見非常感謝。

編輯：#rightColumn表，#leftColumn表{寬度：100％;背景：紅}

enter image description here

來源

2012-07-12 Kevin

是否將'float：left'或'zoom：1'添加到任何/所有元素的樣式都有幫助？ – 2012-07-12 22:20:01

顯然不是，但謝謝你的建議。「縮放」甚至沒有在我的編輯器中可用。 :-) – Kevin 2012-07-12 23:13:44

你可以用#rightColumn表，#leftColumn表發佈一個鏈接到屏幕截圖：寬度：100％; 背景：紅色; }'？ – 2012-07-13 00:19:52

檢查IE是否被渲染你的網頁是怪癖模式或沒有。怪癖模式通常會影響元素寬度，所以我建議這是您問題原因的強有力候選人。

您應該確保頁面處於標準模式才能正確呈現。

這很容易通過確保頁面在頁面頂部有一個有效的文檔類型來完成。

如果你沒有一個文檔類型，可以添加任何有效的doctype得到它在標準模式下工作，但如果你不知道該使用哪一個，只需使用以下命令：

<!DOCTYPE html>

希望有所幫助。

來源

2012-07-13 18:59:20 Spudley

任意柱尺寸和失蹤的邊界在IE6

回答

相關問題