css - CSS 和 WebGrid 的有趣问题

Question

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

我在我的元素中使用 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 但我是偶然得到它的!只有当我删除 both border 和 background-color 属性时，它才会消失。

我只是想知道这是怎么回事？？!有人有什么想法吗？

Answer 1

边框增加了一些元素的大小。例如，假设您有一个 div，其高度为 800px，宽度为 400px。如果您向该 div 添加 5px 的边框，如下所示:

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

这应该能解决您的问题……希望如此!