在IE8中使用中斷字的表格呈現問題

我有一個基於用戶輸入動態構建的表 - 也就是說，用戶在表中輸入數據並確定一行中有多少個字段等。因此，我無法控制數據的長度以及佈局的有限控制。我仍然設法在FF，Chrome，Safari上構建了一些非常好的工具，但我在IE8和IE9中遇到了一個煩人的問題。我包括以下問題的表格單元格的css：在IE8中使用中斷字的表格呈現問題

td.dc { 
    white-space:normal; 
    -ms-word-wrap: break-word; 
    max-width: 80em; 
}

IE忽略所有這些標記3，並繼續行的整個長度。如果我將這個單元格的內容封裝在一個div中，並將這個CSS應用到div上，它可以在IE9中工作，但仍然不在IE8中。在IE8中，文本實際上在80em之後進行了包裝，但單元格仍然足夠寬以適應展開的行，因此表中的所有內容都會被推送。有沒有辦法解決？我創建了一個jsfiddle來說明這個突破的特殊情況：http://jsfiddle.net/qz3rv/3/我已經意識到（從bug報告中不清楚的是）只有某些情況看起來已經破裂 - 可能不得不處理/在數據中。

來源

2012-09-18 Julie Sheffield

除非您指定要以IE 8+爲目標，否則不要使用-ms-word-wrap。使用前綴「自動換行」。 – Pavlo

也看看[這個問題]（http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table）。你可能想用'table {table-layout：fixed;寬度：30em; }'。 – Pavlo

我專門針對IE8 +，這就是我使用前綴的原因。白色空間：正常行爲就像我在其他瀏覽器中想要的那樣。不幸的是，我無法使用table-layout：fixed，因爲佈局是由用戶決定的：他們選擇在同一行中包含多少個字段，並確定字段的內容（因此也決定了字段的長度）。 –

當在最小的HTML環境中測試時，發佈的代碼在標準模式下適用於IE。顯然你的代碼運行在Quirks Mode。所以請嘗試在HTML文件的開頭添加<!doctype html>。

考慮使用基本上小於80em的值進行測試，否則使用。請注意，white-space:normal只是重新確認了默認設置，並且-ms-word-wrap: break-word及其標準對應表示在某些特殊規則中打破了文字（違反正常書寫規則），應該避免。

另請注意，表格列寬度是一項棘手的業務，爲了描述具體問題，您應該顯示錶格標記和關聯的CSS。

來源

2012-09-18 17:20:35

對於我的IE 9，它不會破壞任何東西（檢查[jsfiddle]（http://jsfiddle.net/GMTqY/2/），指定了doctype）。 – Pavlo

在IE8中查看這個小提琴：http://jsfiddle.net/qz3rv/1/第一個例子也不包裝在IE9中，但我承認，我使用spoon.net在IE9中測試，而不是實際IE9瀏覽器（我不想升級IE8，因爲我不能回去，不幸的是我們仍然需要爲我們約30％的用戶提供支持）。 –

哦，同樣，我的文檔類型已經是「瘦」的版本：<！DOCTYPE html>不知道如何在jsfiddle中完全設置，但這是實際網站破損的文檔類型。 –

在IE8中使用中斷字的表格呈現問題

回答

相關問題