Cla*_*are 1 html css internet-explorer xhtml-transitional
我在下面的textarea上面有一个额外的空间,但仅限于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;
}
如果我在label和textarea标签之间放一个空格,那么空间就会消失.但后来我在他们之间得到了一个水平的额外空间.
编辑:我发现,问题出现在doctype - transitional.严格的任务是可以的.有没有办法,用transtional修复它？
我可以重现你的问题.有关详细信息,请参阅我的答案的结尾.
您可以通过以下方式消除差距:
vertical-align: text-top到vertical-align: top.除非你迫切需要text-top某些原因(为什么？),这是一个简单的补救措施.
我不确定为什么text-top在Transitionaldoctype 的顶部添加额外的空间.
在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>
如果我将第一行更改为this(XHTML 1.0 Strict),则不会发生:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">