在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>

回答

相关问题