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

我很想知道这是怎么回事??！任何人都有任何想法？

Answer 1

边框增加了一些元素的大小。例如，假设您的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}}

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

CSS和WebGrid的有趣问题

1 个答案: