CSS 和 WebGrid 的有趣问题

【问题标题】：Funny issue with CSS and WebGridCSS 和 WebGrid 的有趣问题
【发布时间】：2013-01-13 00:19:47
【问题描述】：

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

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

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

【问题讨论】：

标签： css webgrid

【解决方案1】：

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

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

这应该解决你的问题...希望！

【讨论】：