使用 纠正 Webkit 垂直对齐问题和 CSS 垂直对齐:TD 上的顶部

发布于 2024-12-29 08:09:49 字数 1071 浏览 2 评论 0原文

进行了重大修订以演示问题并澄清 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 垂直对齐吗?

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:

screenshot of chrome

Firefox and IE display it like this:

screenshot of firefox

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

做个少女永远怀春 2025-01-05 08:09:49

因为除了表格之外它在其他地方都可以正常工作,所以我只是这样做了:

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

在 Chrome 和 Chrome 中都给出了可接受的结果。探险家

since it works fine everywhere else other than tables, I just did this:

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

Gives an acceptable result in both Chrome & Explorer

围归者 2025-01-05 08:09:49

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

的渲染错误;在 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文