绝对底部定位阻挡一个像素？答案

【问题标题】：Absolute bottom positioned blocks off by one pixel?绝对底部定位阻挡一个像素？
【发布时间】：2016-01-12 03:07:00
【问题描述】：

在某些浏览器中，相对于包含块底部定位的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>

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

太棒了，成功了。我从来没有想过浮动来解决这个问题。知道为什么会有所不同吗？
我怀疑在 chrome 和 safari 中有一个边距或填充将 li 内的锚元素推开。通过浮动它，只有其他浮动元素才能以这种方式“推开”它。我没有深入研究它以查看根本原因是什么，但这在 chrome/safari 中修复了它，据我所知，在 FF 或 IE 中没有任何负面影响

【解决方案2】：

它似乎在我的 Mac 上的所有浏览器中都能正常工作。问题可能是由于您的javascript有任何问题。

【讨论】：

有趣的是它在 Mac 上有所不同。我尝试在 Windows 上使用 Chrome 和 Safari。

【解决方案3】：

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

您可以依靠不同的浏览器来呈现稍有不同的内容。因此，您几乎总是需要提取出您没想到的 CSS 指令（无论它们是否是 hack）。

【讨论】：

处理 IE 异常的好技术，似乎有很多。就我而言，IE 和 Firefox 与 WebKit 不同，因此 IE 条件语句无济于事。
没有条件 cmets 仅适用于 IE quirksmode.org/css/condcom.html 。您可以使用条件注释将非 IE 浏览器作为一个组来定位，该条件注释不是注释，但不能针对 FF 而不是 Chrome/Safari。
@Aliester：那么你可以用 JQuery 作弊。在页面加载时，只需更改正文（或其他）标签以包含 CSS 可以使用的 ID。
你可以猜到，但似乎需要做很多工作才能避免仅仅修复 CSS 中的根本问题。无论如何，我的评论只是指出条件 cmets 仅受 IE 支持，因此您可以针对 IE 和非 IE，但您无法更具体地使用条件 cmets。如果你的 css 和 html 写得很好，那么需要在 ff、chrome、safari 和 IE8 之间进行调整真的很少见。 IE7 通常是奇怪的，需要一些不同的值。