填充背景图像悬停创建额外的不需要的空间答案

【问题标题】：Padding on background image hover creating extra unwanted space填充背景图像悬停创建额外的不需要的空间
【发布时间】：2012-03-28 03:16:28
【问题描述】：

所以我有一个简单的问题。我有一个悬停背景图像更改效果，但是悬停时似乎有一些额外的填充，我无法摆脱。

我的 jsfiddle： http://jsfiddle.net/leongaban/G9dFa/

我尝试在悬停时调整背景图像的填充，但是添加所需的 20 像素也会增加额外的间距。转到 0 不允许背景图像填充空间:(

感谢任何提示！ :)

HTML：

<div class="nav">
    <div id="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">LINK 3</a></li>
            <li><a href="#">LINK 4</a></li>
            <li><a href="#">OUR BLOG</a></li>
        </ul>
    </div>

    <div id="search">

    </div>
</div>

CSS：

.nav {
  width: 994px;
  height: 27px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif');
}

#nav ul li {
  height: 27px;
  margin: 0;
  padding: 8px 20px 6px 20px;
  line-height:30px;
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #fff;
  display: inline;
}

#nav ul li a {
  padding: 8px 0px 6px 0px;
  color: white;
  text-decoration: none;
}

#nav ul li a:hover {
  width: 100%;
  height: 100%;
  padding: 8px 20px 6px 20px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif');
}

【问题讨论】：

标签： html css background-image padding

【解决方案1】：

给你。改变了一些CSS。当它应该在锚点上时，你在 li 上添加了填充物。将您的 li 更改为向左浮动而不是 display:inline; 将 background-image 制作为背景并添加 x 轴重复。

http://jsfiddle.net/G9dFa/6/

    .nav {
  width: 994px;
  height: 27px;
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav.gif');
}

#nav ul li {
  height: 27px;
  margin: 0;
  line-height:30px;
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #fff;
  float:left;
}

#nav ul li a {
  padding: 8px 20px 6px 20px;
  color: white;
  text-decoration: none;
}

#nav ul li a:hover {
  width: 100%;
  height: 100%;
  /*-webkit-background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-size:100% 100%;*/
  background:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif') repeat-x;
}

【讨论】：

【解决方案2】：

给你。

http://jsfiddle.net/r9dTG/

编辑：

哇，我们都得出了相似的结果，我唯一要强调的是，在 LI 标签上声明行高填充顶部和在锚标签上填充底部没有多大意义。我会使用一个或另一个，而不是两者都使用，因为无论如何数学都没有加起来，更少计算和维护。

【讨论】：

我同意！接得好！向芝加哥地铁同胞问好！

【解决方案3】：

将所有样式放在A-tag 上。摆脱LI 上的所有内容，display:inline 除外。将display:block 添加到您的A-tag。

【讨论】：

【解决方案4】：

问题是您的锚点没有占用全部空间，因为您为 LI 元素设置了填充：

从 LI 中删除填充
将填充添加到锚标记

#nav ul li a {
    width: 100%;
    height: 100%;
    padding: 8px 20px 6px 20px;
    color: white;
    text-decoration: none;
}

#nav ul li a:hover {
  background-image:url('http://leongaban.com/_stack/background_padding/assets/images/bg_nav_hover.gif');
}

DEMO

【讨论】：

【解决方案5】：

类似于狄奥多斯：

将所有样式放到你的锚标签a。

将您的锚标记样式更改为display: inline-block。

显示内联块元素在某些浏览器中有一个有趣的错误，如果项目之间有任何空白，它将呈现一个时髦的空间。要解决此问题，您需要修复 HTML 以将 li 项目首尾相连。即实际上删除它们之间的空格。

这是您的代码示例：

http://jsfiddle.net/leongaban/G9dFa/

【讨论】：

【解决方案6】：

您不需要 <li> 上的填充，尝试删除它，它应该可以工作

【讨论】：