Absolute bottom positioned blocks off by one pixel?
It appears that position: absolute blocks that are positioned relative to the bottom of the containing block are off by one pixel in some browsers.
WebKit browsers (Safari and Chrome) render it with a one pixel gap between the bottom of the nav block and the body block.
Is there a browser independent way to get bottom positioned absolute blocks to be positioned the same way?
The markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head&开发者_JAVA百科gt;
<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>
Add float: left to your #nav li a css rule and it will eliminate the space. You will need to increase your left and right margins to 15px to get the same amount of space between items though.
It seems to be working fine in all browsers on my Mac. The problem may be due to javascript of you have any.
Sadly, you'll probably need to implement one of the answers provided to this question: Is there any way to do "if IE" inside of a CSS file?
You can count on different browsers to render things slightly differently. So, you'll almost always need to pull out CSS instructions that you didn't expect to (whether they're hacks or not).
加载中,请稍侯......
精彩评论