css - CSS 和 WebGrid 的有趣问题

Question

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

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

所以将代码更改为

@grid.GetHtml(footerStyle: "pagination")

现在，分页类有一些像这样的代码

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

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

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

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

score 0 · Accepted Answer

边框增加了某些元素的大小。例如，假设您有div一个高度为800px，宽度为400px。如果你像这样添加一个5px边框div：

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

然后你会注意到盒子5px向各个方向扩展；导致盒子810px被410px.

这可以通过使用这样的东西来避免：

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

这应该可以解决您的问题...希望！

1 回答 1