html - CSS Padding 在固定高度 div 悬停时溢出

Question

我在一个网站上工作，我在我通过 wordpress 主题创建的帖子中添加了上一个和下一个按钮。出于某种原因，在这些链接的被阻止元素的悬停阶段，填充超出了最大高度，我不知道如何解决这个问题。如果你看一下链接

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

在帖子内容的末尾，您将看到上一篇和下一篇。如果将鼠标悬停在其中一个上，您会看到填充问题。我一直在尝试所有方法，但一直没能弄清楚如何不让悬停溢出。

谢谢

Answer 1

两种不同的解决方案:

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

   Compability tables are available here .

   您可以在 MDN 阅读有关 CSS3 box-sizing 的更多信息, QuirksMode或者其他好的地方。像躲避瘟疫一样避开 W3School。

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
   }
   

---

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