在IE中垂直對齊<th>

我在嘗試使<th>列中的文本對齊到行的頂部。與vertical-align: top;它適用於每個瀏覽器，但IE瀏覽器（我最擔心的IE9支持）。在IE中垂直對齊<th>

HTML

<tr class="three"> 
<th> 
    Header</th> 
<td class="divider"> 
&nbsp;</td> 
<td class="first"> 
    <ul> 
     <li><img src="images/icon.jpg" alt="A5 chip" width="81" height="91" /></li> 
     <li>Text</li> 
    </ul> 
</td> 
</tr>

CSS

img {vertical-align: top;} 
.compare-table tr th { 
    padding-top: 20px; 
    padding-left: 5px; 
    width: 165px; 
    line-height: 1.5em; 
}

我不知道什麼代碼的其他因素是相關的。該頁面可以被查看here。

我很抱歉，如果這個問題不是獨立的，或很好的解釋。

來源

2012-11-02 Kashkin

我不確定這個問題，因爲它可能有更多的解釋。但是，至於問題是關於在IE中呈現CSS的問題，我會建議思考一個JS庫---> excanvas。這不僅有助於在IE中渲染大部分CSS，還有助於在IE中呈現CSS3元素和HTML5元素。恢復返回需要一些幫助是必要的。

來源

2012-11-02 06:05:41

列表項的順序不正確。將<li>tekst</li>放置在<li><img src="images/icon.jpg" alt="A5 chip" width="81" height="91" /></li>之上。

來源

2012-11-02 07:35:44 SKeurentjes

這可能會解決問題，但它不是我正在尋找的佈局。謝謝，不過。 – Kashkin

它在IE9中正常工作。我的猜測是，你的doctype有點混亂，因爲它讓IE瀏覽器現在使用IE7標準和兼容性視圖呈現頁面。

嘗試將其更改爲HTML5：

<!DOCTYPE html>

或HTML4過渡：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

或者告訴IE放置<meta http-equiv="X-UA-Compatible" content="IE=edge">到渲染採用了最新的IE標準視圖頁面頁面的標籤。

但在此之前，如果doctype聲明之前有什麼東西，IE可能會切換到quirks模式，然後嘗試去除doctype聲明前的兩個空行。我知道一個事實，即如果您在doctype之前發表評論，可能與引導空白相同。

來源

2012-11-02 07:43:49

忘記tr & td。要獲得更好的外觀，請始終使用div。它適用於所有瀏覽器。

來源

2012-11-02 08:57:16

這是不正確的，表沒有任何問題。唯一的問題是語義，但對於表格數據（就像在他的例子中），使用表格更容易，最好。表格也適用於大多數瀏覽器。 –

表格在大多數瀏覽器中都能正常工作，但表格並不友好。 @Maksim Vi –

你是什麼意思？請舉一個例子。每個元素都有它自己的目的，並且應該相應地使用，如果表格用於佈局，是的，它可能會略微影響搜索引擎優化（儘管我懷疑現在的搜索引擎是這樣的），但我個人並沒有看到任何方式如何使用表格數據表可能是一件壞事。 –

在IE中垂直對齊<th>

回答

相關問題