我在处理 table 上方的空白时遇到了问题。我有一张 table ，上面有两个按钮，然后在它的正下方是一张谷歌地图。如果您愿意，我想将表格 float 在 map 上方而不是列出它们。我得到了大约 10 个像素的空白区域，但我很难弄清楚原因。有任何想法吗？这是我的 HTML 的第一部分:
<body onload="initMap()">
<div>
<table width="100%" >
<tr>
<th height="45" align="right" bgcolor="#CED0D0" scope="col">
<a href = http://search.html class="classname">Search</a>
<a href = http://loggedout.html class="classname">Log Out</a>
</th>
</tr>
</table>
</div>
<div id="map_canvas" style="float:left; width:100%; height:100%"></div>
map CSS
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map_canvas { height: 100% }
table.alerts {
border-width: 8px;
border-spacing: 2px;
border-style: outset;
border-color:#FFF;
border-collapse: separate;
background-color:#FFF;
bottom:0;
position:absolute;
font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
float:left;
margin-right: 5px;
}
table.alerts th {
border-width: 8px;
padding: 0px;
border-style: none;
border-color:#999;
background-color:#FFFFFF;
font-family:Arial-Black,Helvetica,sans-serif;
height: 40px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size:130%;
}
table.alerts td {
border-width: 0px;
padding: 3px;
border-style: none;
border-color:#039;
background-color: rgb(247, 247, 242);
font-family:"Arial", Gadget, sans-serif;
font-weight:bold;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.60;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 20%;
left: 13%;
width: 100%;
height: 60%;
padding: 10px;
background-color: white;
z-index:1002;
overflow: auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#bar {
position:absolute;
top: 0px;
right: 0px;
}
#body {
margin:0;
padding:0;
}
.greyBox{
padding:7px;
background-color:#c6c6c6;
margin-bottom:0px;
margin-left:4px;
width:200px;
height:26px;
font-family:Arial,Helvetica,sans-serif;
text-align : center;
font-size:130%;
}
.bottom{
position: absolute;
bottom: 0;
}
p.hide {
display: none;
}
按钮 CSS:
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.classname:active {
position:relative;
top:1px;
}
最佳答案
我保存了您的代码并将其加载到 chrome 中，并在顶部看到了空白。看起来来自 tr，因为您将表格设置为 border-collapse: separate 并且 border-width : 8px 和 border-spacing 设置为 2px。间距 + 宽度 = 10px。
所以不明白你为什么这样做(或者老实说你为什么要使用表格)，我会添加以下内容:
table {
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
关于css - 页面顶部的神秘空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9630240/