最大寬度不適用於IE7的表格

那麼爲什麼「最大寬度」不適用於Internet Explorer 7中的表格？最大寬度在其他元素上可用，並且似乎可以正常工作，但是當應用於表格時，我無法使其執行任何操作，即Max-Width規則將被忽略。下面的代碼：最大寬度不適用於IE7的表格

<!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> 
    <title>Foo</title> 
</head> 
<body> 
    <div style="background-color: Red; max-width: 1000px;"> 
     <table style="background-color: Green; max-width: 500px;"> 

       <tr> 
        <td><a href="#" class="action view">View</a></td> 
        <td>7/20/2011</td> 
        <td>James Smith</td> 
        <td>345 NW 23rd Ave Gainesville, FL 32606</td> 
        <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td> 
        <td>345621</td> 
        <td>Fred Smith</td> 
       </tr> 
     </table> 
    </div> 
</body> 
</html>

在Firefox中，表也被恰當限制爲500像素，並以適當的方式將細胞破裂中的文本（字與字之間，就像你所期望的）。然而，在IE7中，它的「無包裝」規則已被應用。每個單元格都可以伸展到需要的位置，而不用試圖破壞單元格中的文本，整個表格只需伸出即可忽略最大寬度規則。

這個廢話呢？如何將最大寬度放在IE7的表格中？（它的工作原理在FF & IE8罰款）

什麼我已經試過了不起作用：

表{顯示：塊; }

td {word-wrap：break-word; }

table {table-layout：fixed; }

來源

2011-08-11 Graham

顯然IE7做不同的事情取決於DTD'MAX-width'：http://www.wileymedia.com/weblog/archives/2007/02/maxwidth_and_internet_explorer.html – vcsjones

是的，我試過幾個不同的DocType無濟於事。該文章對於一般的塊級元素是正確的，但它不修復表格。 – Graham

的爲WebKit瀏覽器忽略表的max-width屬性設置，Chrome和Safari都會像IE7那樣呈現表忽略最大寬度。我建議將max-width屬性設置爲包裝元素，如div。

見http://jsfiddle.net/P5YPR/1/

來源

2011-08-11 15:12:12

+1我會一直支持IE瀏覽器黑客的跨瀏覽器解決方案。做得好。 – AlienWebguy

@外國人很高興聽到它:) –

仍然無法在IE7上工作。有小費嗎？？？ –

試試這個：

table#my_table { 
    max-width:500px; 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

不幸的是這將不會驗證因?。好消息是，因爲它是當你創建你<body>標籤和安裝IE特定的類，你可以簡單地做條件元素的IE，唯一的解決辦法：

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

現在在你的CSS：

table#my_table { 
    width:500px; 
    max-width:500px; 
} 

.ie7 table#my_table { 
    width:expression(document.body.clientWidth > 500? "500px": "auto"); 
}

來源

2011-08-11 15:08:38 AlienWebguy

+1 Siiick。我通常不推薦支持IE <8，但這是可靠的。 – Maverick

這不適用於WebKit。 Safari和Chrome仍然會渲染表格，忽略最大寬度屬性。如果@Graham真的關心跨瀏覽器的兼容性，一個包裝器元素會更加優雅。 –

你的答案在這裏效果很好，但我選擇Bjorn's作爲我的情況「正確」，因爲無論如何真正需要包裝div，而這些表達式只是讓我感到疲憊。儘管我喜歡你的一些關於IE瀏覽器評論的內容。謝謝！ – Graham

最大寬度不適用於IE7的表格

回答

相關問題