在Internet Explorer中，表格看起來很糟糕

我有一張桌子，上面有我製作的佈局。 Google Chrome瀏覽器和Firefox瀏覽器的佈局看起來不錯，但在Internet Explorer中看起來不錯。在Internet Explorer中，表格看起來很糟糕

這是它是如何看起來在Chrome：

Chrome

這是它的外觀在IE：

這是表的HTML代碼：

<table border="1"> 
    <tr> 
     <td style="width: 46%" colspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
    </tr> 
    <tr> 
     <td style="width: 23%" rowspan="2"></td> 
     <td style="width: 23%" rowspan="2"></td> 
    </tr> 
    <tr> 
     <td style="width: 46%" colspan="2"></td> 
    </tr> 
</table>

我該如何解決這些佈局差異？

來源

2013-11-23 Nir Berko

你可以嘗試很多事情來解決這個問題...

嘗試添加下面的「黑客」到你的HTML頁面：

<!--[if IE]> 
    <link href="/style/ie.css" type="text/css" rel="Stylesheet" /> 
<![endif]--> 

<!--[if !IE]> 
    <link href="/style/core.css" type="text/css" rel="Stylesheet" /> 
<![endif]-->

這將迫使IE使用您在ie.css中指定的規則，以便您可以在其中指定所需的規則。這也會隱藏IE瀏覽器中Google Chrome和Firefox中使用的其他部分。

取而代之的百分比，請嘗試使用固定的像素值，像

<td style="width: 20px; padding-top: 20px;" rowspan="2">

您可以使用以下網站來驗證你的CSS，看它是否符合的W3C標準：

http://jigsaw.w3.org/css-validator/

它會通過你的CSS，檢查兼容性，並吐出錯誤，如果他們存在。它會告訴你你的文件在哪裏，你有錯誤，所以你可以去修復它們。我不知道任何工具可以修復你的CSS ......我不會使用它，因爲我不會以這種方式學到任何東西。

您可以使用以下網站來驗證你的HTML和其他標記語言使用：

http://validator.w3.org/

使用這些工具將幫助您跨瀏覽器兼容網站......如果事情是不兼容，您可以使用這些工具進行調試和修復您的工作。

由於羅布已經低於指出，IE瀏覽器已經過時，大多數版本的HTML5缺乏兼容性，因此你將不得不拿出解決方案，如果你將要作出的跨瀏覽器兼容的站點。

來源

2013-11-23 13:56:30 tinthetub

他不應該爲IE調整標記或CSS。如果標記有效，那麼IE就是問題所在。（當然，IE總是有問題） – Rob

@Rob我同意你的觀點。 IE始終是個問題，但一位優秀的開發人員總是讓他的工作跨瀏覽器兼容，而這正是他要求我們幫助他的。 – tinthetub

但我不同意他應該爲IE改變工作標記。還有其他的方法就像你展示的那樣。（每當有人說，「跨瀏覽器兼容」，他們總是指「讓它在IE中工作」。） – Rob

我認爲這是因爲IE會嘗試填充剩餘空間它看到

，而不是使用rowspan的

嘗試使用高度= 「33％」或高度= 「66％」

或嘗試兩種

來源

2013-11-23 14:05:31

不工作，我也不想設置靜態高度。 –

@NirBe你還試過應用'border-collapse：collapse;'？這可能會阻止邊界在IE中上下滑動。 – tinthetub

是的，這是行不通的。 –

每一行這樣的定義高度：

<table border="1" style="width:100%; height: 100%"> 
    <tr style="height: 33%"> 
     <td style="width: 46%" colspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
     <td style="width: 23%; padding-top: 0.5%" rowspan="2"></td> 
    </tr> 
    <tr style="height: 33%"> 
     <td style="width: 23%" rowspan="2"></td> 
     <td style="width: 23%" rowspan="2"></td> 
    </tr> 
    <tr style="height: 33%"> 
     <td style="width: 46%" colspan="2"></td> 
    </tr> 
</table>

測試IE8和IE 11

來源

2013-11-25 15:31:01 DePhiless

在Internet Explorer中，表格看起來很糟糕

回答

相關問題