IE 内联块/文本顶部上方的额外空间（过渡文档类型）

发布于 2024-10-31 07:50:39 字数 562 浏览 0 评论 0原文

我在下面的文本区域上方有一个额外的空间，但仅限于 ie 中。如何修复它？

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>


.field {
     margin: 0px;
     margin-top: 2px;
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}

如果我在标签和文本区域标签之间放置空格，空格就会消失。但随后我在它们之间得到了水平的额外空间。

编辑：我发现，问题出现在 doctype - Transitional 上。严格一点就万事大吉了。有没有办法用 Transitional 来修复它？

原文

I get an extra space above the below textarea, but only in ie. How to fix it?

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>


.field {
     margin: 0px;
     margin-top: 2px;
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}

If I put a whitespace between label and textarea tags the space disappears. But then I get a horizontal extra space between them.

Edit:
I found, the problem appears with doctype - transitional. With strict everithing is ok. Is there a way, to fix it with transtional?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

音盲 2024-11-07 07:50:39

我可以重现你的问题。具体细节请参阅我的答案末尾。

您可以通过以下方式消除间隙：

将 vertical-align: text-top 更改为 vertical-align: top。

除非您出于某种原因迫切需要 text-top（为什么？），否则这是一个简单的补救措施。

我不确定为什么 text-top 使用 Transitional 文档类型在顶部添加额外的空间。

在 IE8 中测试，使用此代码 (XHTML 1.0 Transitional)，会发生您所描述的问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.field {
     margin: 0px;
     margin-top: 2px;
     background: #ccc
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}
</style>
</head>

<body>

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>

</body>
</html>

如果我将第一行更改为此 (XHTML 1.0 Strict)，则不会发生：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I can reproduce your issue. See the end of my answer for exact details.

You can remove the gap by:

Changing vertical-align: text-top to vertical-align: top.

Unless you desperately need text-top for some reason (why?), this is an easy remedy.

I'm not sure why text-top adds the extra space at the top with the Transitional doctype.

Testing in IE8, with this code (XHTML 1.0 Transitional), your described issue happens:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.field {
     margin: 0px;
     margin-top: 2px;
     background: #ccc
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}
</style>
</head>

<body>

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>

</body>
</html>

If I change the first line to this (XHTML 1.0 Strict), it doesn't happen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

回复收藏 0 原文

~没有更多了~

关于作者

嗫嚅

暂无简介

0 文章

0 评论

23 人气

关注发私信

留蓝

文章 0 评论 0

关注

18790681156

文章 0 评论 0

关注

zach7772

文章 0 评论 0

关注

Wini

文章 0 评论 0

关注

ayeshaaroy

文章 0 评论 0

关注

初雪

文章 0 评论 0

友情链接

文江博客

IE 内联块/文本顶部上方的额外空间（过渡文档类型）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

IE 内联块/文本顶部上方的额外空间（过渡文档类型）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。