Question

在某些浏览器中，相对于包含块底部定位的position: absolute块似乎偏离了一个像素。

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>

Answer 1

将float: left添加到您的#nav li a css规则中，它将消除空间。您需要将左右边距增加到15px，以便在项目之间获得相同的空间。

Answer 2

我的Mac上的所有浏览器似乎都运行正常。问题可能是由于您有任何javascript。

Screenshot

Answer 3

可悲的是，您可能需要实施针对此问题的答案之一：Is there any way to do "if IE" inside of a CSS file?

您可以指望不同的浏览器以稍微不同的方式呈现内容。因此，您几乎总是需要提取您不期望的CSS指令（无论它们是否是黑客攻击）。

绝对底部定位块偏离一个像素？

3 个答案: