Question

进行了重大修订以证明问题并澄清CSS中的原因：

Chrome和Safari会显示以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
BODY { background:#fff; }
.survey_table TD {
    vertical-align:top;
}
</style>
</head>
<body>
<table class="survey_table">
<tbody>
<tr>
<td>
2. Are you familiar with the <a href="http://example.com">Louisiana Sanitary Code</a><sup>1</sup> requirements for laboratories to report notifiable (reportable) conditions to the Louisiana Office of Public Health?
</td>
</tr>
</tbody>
</table>
</body>
</html>

像这样：

screenshot of chrome

Firefox和IE显示如下：

screenshot of firefox

问题来自TD上的CSS vertical-align:top;有谁知道如何让Webkit浏览器像FF和IE一样显示并保留CSS垂直对齐？

Answer 1

因为它除了表之外的其他任何地方都可以正常工作，我只是这样做了：

table sup {
    font-size: .85em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.6em;

Chrome和＆amp ;;资源管理器

Answer 2

我遇到了同样的问题并决定使用相对定位;

Wrong rendering of <sup> in table with valign=top in Chrome and Safari

使用<sup>和CSS vertical-align：top修正Webkit垂直对齐问题</sup>

2 个答案: