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

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

两种不同的解决方案：

1. 使用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;
   }
   

   兼容性表可在此处获得。

   box-sizing您可以在MDN、QuirksMode或其他好地方阅读更多关于 CSS3的信息。避免像瘟疫一样的 W3Schools。

2. 计算高度为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: 85pxfrom #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

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

干杯!