看看这段 HTML 代码。在 IE7 中，它显示两行表格形式，与 Firefox 3.x、4 和 Chrome 中的非常相似。现在取消注释“<!-div>abc”并再次查看。现在行间距变大了很多，大约1em。我不知道这是从哪里来的，也不知道我怎么可能避免它。我需要在表格上方显示一些文本。如果将
替换为
，效果保持不变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body {
}
body, table, div {
font-family: Arial, Helvetica, Swiss, Sans-Serif;
font-size: 10pt;
padding: 0;
margin: 0;
}
div#body {
position: relative;
margin: auto;
height:670px;
width:1000px;
margin-bottom: 10px;
padding-bottom: 10px;
background-color:white;
overflow: hidden;
}
div.table {
margin: 0;
display: table;
}
div.tr {
margin: 0;
display: table-row;
clear: both;
}
div.td {
margin: 0;
display: table-cell;
float:left;
}
div.left {
width:150px;
}
div.right {
width: 180px;
}
input, select {
border: 0;
border-right: 1px solid green;
border-bottom: 1px solid green;
background-color: #CAEBC9;
}
input.submit {
border-top: 1px solid green;
border-left: 1px solid green;
border-right: 1px solid green;
border-bottom: 1px solid green;
background-color: #CAEBC9;
}
div#content {
font-size: 10pt;
}
div#contentbody, div#prevnext {
position: absolute;
left:180px;
width: 460px;
padding-left: 30px;
padding-right: 20px;
}
div#contentbody {
top:95px;
height:500px;
padding-top: 0px;
overflow: auto;
}
</style></head>
<body>
<div id="body" style="">
<div id="contentbody">
<!--div>
abc
</div-->
<form id="form1" method="post" action="">
<div class="tr">
<div class="td left">Datum</div>
<div class="td right">
<input id="input_date" name="date" value="-- date --" type="text"/>
</div>
</div>
<div class="tr">
<div class="td left">Anzahl der Stühle</div>
<div class="td right">
<select name="anzahl_stuehle">
<option selected="selected" value="1">weniger als 2</option><option value="2">2 bis 4</option><option value="3">5 bis 6</option><option value="4">mehr als 6</option></select>
</div>
</div></form>
</div>
</div>
</body></html>
最佳答案
这是由具有以下行的 DIV.TR 样式引起的:
display: table-row;
Afaik IE7 不支持此设置。您可以将其更改为:
display: inline-block;
这至少会删除您提到的空格。
关于html - IE7显示未经请求的垂直空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5925817/