1

我正在尝试使列中的文本<th>与行的顶部对齐。With vertical-align: top;It 适用于除 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;
}

我不确定代码的其他哪些元素是相关的。该页面可以在这里查看。

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

4

4 回答 4

0

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

于 2012-11-02T08:57:16.730 回答
0

它在 IE9 中运行良好。我的猜测是您的文档类型有点混乱，因为它使 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 可能会切换到怪癖模式。我知道如果您在 doctype 之前添加注释会发生这种情况，这可能与前导空格相同。

于 2012-11-02T07:43:49.890 回答
0

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

于 2012-11-02T06:05:41.293 回答
0

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

于 2012-11-02T07:35:44.620 回答