CSS和WebGrid的有趣问题

这是我遇到的一个有趣的问题

我在我的项目中使用Asp.net MVC WebGrid。我正在尝试对它应用一些CSS

所以把代码改成

@grid.GetHtml(footerStyle: "pagination")

现在，pagination类有如下代码

.pagination a:hover, .pagination a:active{
    border: 1px solid #2b66a5;
    color: #000;
    background-color: #F2F2F2;
}

现在，当我运行这个文件并将鼠标悬停在页码上时，包含表的面板开始展开！一排一排

我知道，如果我尝试的话，仅仅使用CSS是无法获得这种效果的p但是我是偶然得到它的！只有当我同时移除边框和背景色属性时，它才会消失

---

我只是想知道这是怎么发生的？？！有人知道吗？

边框会增加某些元素的大小。例如，考虑有<代码> div <代码>，其高度为代码> 800 px >宽度>代码> 400 px。如果将

5px

的边框添加到该

div

中，如下所示：

div.class {
    border: 5px solid black;
}

然后您会注意到，该框在每个方向上都会扩展

5px

；导致框被

410px

设置为

810px

这可以通过如下方式避免：

div.class {
    border: 5px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

---

这会解决你的问题。。。但愿如此

我试过了，不是运气。我原以为问题一定出在边界上，但仅仅取消边界并没有帮助。这是这两个属性的某种组合造成的。这真的很奇怪，我不明白为什么背景色会有这样的效果。。。你有没有可能用小提琴或类似的东西来重现这个问题？