在某些瀏覽器中,看起來相對於容納塊的底部定位的塊被關閉一個像素。絕對底部定位塊關閉一個像素?
WebKit瀏覽器(Safari和Chrome)在nav
塊的底部和body
塊之間使用一個像素間隙進行渲染。
是否有一種獨立於瀏覽器的方式讓底部定位的絕對塊以相同方式定位?
的標記:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>gap test</title>
<style type="text/css">
body {
margin: 0;
}
#header {
position: relative;
}
#logo {
background-color: #f88;
height: 100px;
}
#nav {
position: absolute;
bottom: 0px;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
background-color: #ccf;
margin: 0 10px;
padding: 0 10px;
border: none;
}
#body {
background-color: #8f8;
height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
Logo.
</div>
<div id="nav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div id="body">
Body.
</div>
</body>
</html>
有趣的是,它在Mac上不同。我嘗試在Windows上使用Chrome和Safari。 – 2011-01-27 18:30:40