Html 固定高度div悬停时CSS填充溢出

我在一个网站上工作，我通过wordpress主题在我的帖子中添加了“上一个”和“下一个”按钮。由于某些原因，在这些被阻止的元素的悬停阶段，这些元素是链接，填充物推到了最大高度之外，我不知道如何纠正这个问题。如果你看看这个链接

在文章内容的末尾，您将看到上一篇文章和下一篇文章。如果将鼠标悬停在其中一个上方，您将看到填充的问题。我已经尝试了所有的方法，但还没能找到不让悬停流过去的方法

---

谢谢

如果您已经使用了填充，那么您应该在使用填充的同时做一些其他的事情，使元素适合其原始高度

范例

div{width: 100px;}
div:hover{padding-left: 5px;}

在本例中，在悬停效果上添加了左填充，使div主体具有5px的边距。在这种情况下，div与5px填充一起占据其原始宽度。为了摆脱这个问题。。您可以将宽度减小到5px

那么您的代码将是

div{width: 100px;}
div:hover{padding-left:5px; width:95px;}

---

在代码中执行同样的操作。。您可以找到自己的问题解决方案。

两种不同的解决方案：

使用框大小：边框框：

#browse-posts a {
    position: relative;
    display: block;
    padding: 20px 40px 0;
    text-decoration: none;
    color: #888;
    height: 85px;
    -webkit-box-sizing: border-box; /* Some Webkit versions requires a prefix */
    -moz-box-sizing: border-box; /* Gecko (i.e. FireFox) requires a prefix */
    box-sizing: border-box;
}

您可以在或其他好的地方阅读有关CSS3

框大小的更多信息。像瘟疫一样避免上学

将高度计算为

height=desiredHeight-border-padding

#browse-posts a {
    position: relative;
    display: block;
    padding: 20px 40px 0;
    text-decoration: none;
    color: #888;
    height: 65px; // 85px - 20px padding
}

---

---

最后，您可以从

#browse posts a:hover

中删除

高度：85px

，它仍然是继承的。

只需将

的高度降低到65px即可

CSS

#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px;
}

#browse-posts a:hover{
background: #cccccc;
}

---

默认情况下，填充将元素的边界向外推。这是一种称为盒子模型的结果。长方体模型定义了计算图元的宽度和高度的方式（基本上，哪些特性将影响或不影响此计算）

在您的例子中，

元素上的填充从容器边缘向外延伸。它通常不明显，因为元素没有背景，但在悬停时添加一个，允许您查看形状的真实大小

您可以通过以下两种方式之一解决此问题（另外还有我没有提到的其他方式..CSS非常通用！）：

首先，您可以将长方体模型更改为在元素的总体大小上考虑填充的模型：

框大小：边框框

您需要为此属性使用供应商前缀，如下所示：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

（请注意，这需要应用于
#浏览帖子a
）

或者，您可以使用
overflow:hidden
将不会修复填充向外延伸的问题，但它将不可见

这将继续
#浏览帖子

我希望这对你有帮助。此外，仅供将来参考，在发布问题时，最好发布一些源代码，以便人们能够轻松找到需要查看的区域，而不仅仅是一个站点链接

干杯
 谢谢你，我应该知道这一点，但我想既然填充物没有推动它超过非悬停的高度，我就没有考虑这个。谢谢你，为什么填充物没有推动超过85像素的高度限制，而我没有悬停？我认为这就是让我感到困惑的原因，因为在非悬停状态下，它看起来不错，但悬停状态是不同的，即使它们有相同的填充。事实上，是的，但由于背景在不悬停时是透明的，除非你使用开发工具，如Chrome/Safari/Firefox中的开发者栏，否则你看不到它