这是我遇到的一个有趣的问题。
我在我的元素中使用 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 属性时,它才会消失。
我只是想知道这是怎么回事??!有人有什么想法吗?
最佳答案
边框增加了一些元素的大小。例如,假设您有一个 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;
}
这应该能解决您的问题……希望如此!
关于css - CSS 和 WebGrid 的有趣问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14582741/