[英]Mysterious White Space at Top of Page
我在桌子上方的空白處遇到麻煩。 我有一張桌子,上面放着兩個按鈕,下面是一張Google地圖。 如果您願意的話,我想將表格放在地圖上方,而不是將其列出。 我得到大約十個像素的空白,並且我很難找出原因。 有任何想法嗎? 這是我的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>
地圖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:split和border-width:8px,border-spacing設置為2px。 間距+寬度= 10像素。
因此,我不知道為什么要這樣做(或者說真的為什么要使用表),我將添加以下內容:
table {
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
用這個替換您的<table width="100%">
標記-
<table width="100%" cellpadding="0" cellspacing="0" border="0">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.