Question

我正在尝试将<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。

如果这个问题不是自成一体或者解释得很好，我道歉。

Answer 1

我不确定这个问题，因为它可以更好地解释。但是，就问题涉及IE中的CSS渲染而言，我建议考虑一下JS库---＆gt; excanvas。这不仅有助于IE中大部分CSS渲染，还有助于在IE中渲染CSS3元素和HTML5元素。 Revert Back需要一些帮助。

Answer 2

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

Answer 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">

或者告诉IE使用最新的IE标准视图呈现页面，方法是将<meta http-equiv="X-UA-Compatible" content="IE=edge">放入页面的标题中。

但在此之前尝试在doctype声明之前删除两个空行，IE可能会在doctype声明之前切换到怪癖模式。我知道如果你在doctype之前发表评论就会发生这种情况，可能与领先的空白相同。

Answer 4

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

在IE中垂直对齐

4 个答案: