使用 纠正 Webkit 垂直对齐问题和 CSS 垂直对齐:TD 上的顶部
进行了重大修订以演示问题并澄清 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>
如下所示:
Firefox 和 IE 显示如下:
问题来自 TD 上的 CSS vertical-align:top;
有谁知道如何让 Webkit 浏览器像 FF 和 IE 一样显示并保留 CSS 垂直对齐吗?
Made a major revision to demonstrate issue and clarify cause in CSS:
Chrome and Safari display this code:
<!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>
Like this:
Firefox and IE display it like this:
The issue is coming from the CSS on the TD vertical-align:top;
Does anyone know how to get Webkit browsers to display like FF and IE and preserve the CSS vertical-alignment?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
因为除了表格之外它在其他地方都可以正常工作,所以我只是这样做了:
在 Chrome 和 Chrome 中都给出了可接受的结果。探险家
since it works fine everywhere else other than tables, I just did this:
Gives an acceptable result in both Chrome & Explorer
我遇到了同样的问题,决定使用相对定位;
的渲染错误;在 Chrome 和 Safari 中带有 valign=top 的表格中
I had the same problem and decided to use relative positioning;
Wrong rendering of <sup> in table with valign=top in Chrome and Safari