在 IE 中垂直对齐 <th>答案

【问题标题】：Vertically align <th> in IE在 IE 中垂直对齐 <th>
【发布时间】：2012-10-22 19:14:30
【问题描述】：

我正在尝试使<th> 列中的文本与行首对齐。使用vertical-align: top; 它适用于除 IE 以外的所有浏览器（我最担心 IE9 支持）。

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。

如果这个问题不是独立的，或者没有得到很好的解释，我深表歉意。

【问题讨论】：

标签： html css internet-explorer vertical-alignment

【解决方案1】：

我不确定这个问题，因为它本来可以得到更多解释。但是，就 IE 中 CSS 的渲染问题而言，我建议考虑 JS 库 ---> excanvas。这不仅有助于在 IE 中渲染大部分 CSS，还有助于在 IE 中渲染 CSS3 元素和 HTML5 元素。如果需要一些帮助，请恢复。

【讨论】：

【解决方案2】：

列表项的顺序不正确。将<li>tekst</li> 放在<li><img src="images/icon.jpg" alt="A5 chip" width="81" height="91" /></li> 上方。

【讨论】：

这可能会解决问题，但这不是我正在寻找的布局。不过，谢谢。

【解决方案3】：

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

或者通过将<meta http-equiv="X-UA-Compatible" content="IE=edge"> 放入页面的头部标签来告诉 IE 使用最新的 IE 标准视图呈现页面。

但在此之前尝试删除 doctype 声明之前的两个空行，如果在 doctype 声明之前有某些内容，IE 可能会切换到 quirks 模式。我知道如果您将 cmets 放在 doctype 之前会发生这种情况，这可能与前导空格相同。

【讨论】：

【解决方案4】：

忘记tr 和td。要获得更好的外观，请始终使用div。它适用于所有浏览器。

【讨论】：

这是不正确的，表格没有问题。唯一的问题是语义，但对于表格数据（如他的示例中），使用表格更容易且最好。表格也适用于大多数浏览器。
表格适用于大多数浏览器，但表格对 seo 不友好。 @马克西姆维
你这是什么意思？请举个例子。每个元素都有自己的用途，应该相应地使用，如果表格用于布局，是的，它可能会稍微影响搜索引擎优化（我怀疑现代搜索引擎就是这种情况），但我个人没有看到任何方式用于表格数据的表格可能是一件坏事。
鉴于我正在复制一个 Apple 页面，并且他们使用表格，我将在这方面支持他们的网页设计团队。他们无缘无故地不是世界上最大的上市公司。