Question

我正在网站上工作，我在帖子中添加了上一个和下一个按钮，我正在通过wordpress主题创建。由于某些原因，在这些被阻挡的元素的悬停阶段，填充推动超出最大高度，我无法弄清楚如何纠正这个问题。如果你看一下链接

http://hearthable.com/hearthstone-account-wipe/

在帖子内容结束时，您会看到上一篇文章和下一篇文章。如果您将鼠标悬停在任何一个上，您将看到填充问题。我一直在尝试所有的东西，并且无法弄清楚是不是让悬停流过来。

由于

Answer 1

如果您使用了填充，那么您应该做其他事情以使元素适合其原始高度。

例如

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

在这种情况下，在悬停效果上你添加了填充，这使得div体的边距为5px。在这种情况下，div占用其原始宽度以及5px填充。为了摆脱这个问题..你可以将宽度减少到5px。

那么你的代码就是......

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

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

Answer 2

两种不同的解决方案：

使用box-sizing: border-box：

#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;
}

Compability tables are available here

您可以在MDN，QuirksMode或其他好地方了解有关CSS3 box-sizing的更多信息。避免像瘟疫那样的W3Schools。

将身高计算为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
}

最后，您可以从height: 85px删除#browse-posts a:hover，无论如何都会继承它。

Answer 3

只需将<a>的高度降低到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;
}

Answer 4

默认情况下，填充向外推动元素的边界。这是一种称为盒子模型的结果。框模型定义了元素的宽度和高度的计算方式（基本上，哪些属性将有助于此计算）。

在您的情况下，<a>元素上的填充向外延伸超过容器的边缘。它通常不明显，因为元素没有背景，但在悬停时你添加一个，让你看到形状的真实大小。

你可以通过以下两种方式解决这个问题（加上我没有提及的更多...... CSS非常多才多艺！）：

首先，您可以将框模型更改为将元素的整体大小考虑为填充的内容：

box-sizing: border-box;

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

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

（请注意，这需要应用于#browse-posts a）

或者，您可以使用overflow: hidden;隐藏问题，这不会修复填充向外延伸，但不会显示

这将继续#browse-posts

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

干杯！

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

4 个答案: