任何精通 CSS 的人都可以帮我解决 WebSVN 设置的问题吗？

Question

对于 CSS 来说，我完全是个新手，所以我几乎放弃了自己解决这里的问题。

我遇到的问题是我的 WebSVN 安装有一个与查看差异文件相关的奇怪问题。有一些 CSS 会突出显示当前行，但是当我在屏幕上上下移动鼠标时，这些行会升高或降低 1-2 个像素，具体取决于我移动鼠标的方向。

在这里，试图解释它有点困难，这是一个显示问题的动画 gif：

WebSVN CSS问题说明 http://www.vkarlsen.no/files/websvn_css.gif

要亲自尝试，请转到我的 WebSVN 存储库：

http://vkarlsen.serveftp.com:81/websvn/diff.php?path=/LVK_3_5/branches/controller_designer/LVK.Core/Reflection/TypeHelper.cs&rev=667&sc=1&repname=LVK

不幸的是，Google Chrome（或其他）似乎破坏了上述内容的“可点击性”链接，为了避免出现问题，我刚刚以文本形式发布了实际链接。您需要登录，但用户名和密码都是“guest”，不带引号。请注意，您可能会收到有关该站点证书的警告。这是一个私人服务器，所以我不会花钱购买真正的证书，所以忽略它。

在我使用的浏览器 Chrome 和 Internet Explorer 中，问题显而易见。

谢谢，问题已通过接受的答案解决了，但我的问题也部分是这样的：

当您在动画 gif 中看到，或者如果您尝试过，鼠标向上移动时，我知道该行的 CSS 悬停样式使该行更高。但是，一旦我将鼠标悬停在一行上，即使将鼠标光标移动到另一行，插图中的底线也不应该移动。诚然，我所在的行以及我移动到的行应该根据方向进行移动，因为一个丢失了 1-2 个像素，而另一个获得了它们，但是插图底部的文本行应该并没有真正移动，应该吗？当我将鼠标光标移动到行列表中时，并且只有当我将其移出时，它们才应该向下移动 1-2 个像素。

我只是觉得这种特殊的行为很奇怪。

Answer 1

尝试改变：

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
  background-color:#e8e8e8;
  border:1px solid #cccccc;
}

成

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
  background-color:#e8e8e8;
}

Answer 2

请记住，CSS 高度和宽度不包括内边距、边框和边距。因此，如果我有一个高度为 10 像素、内边距为 3 像素、边框为 1 像素的框，则实际高度将为 18 像素：10 高度 + 6 顶部和底部总内边距 + 2 顶部和底部边框。

Answer 3

我认为问题是你的边界没有像你希望的那样崩溃。

您有一个规则：

tbody tr:hover td.diff, tbody tr.diffcode:hover td pre {
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
}

您期望 pre 的边框与 td.diff 的边框合并。我认为填充会导致边框在浏览器中不折叠，或者可能是 pre 不是 table 的一部分（我不能肯定地说） 。

更改选择器，使其不包含 pre：

tbody tr:hover td.diff {
    background-color: #E8E8E8;
    border: 1px solid #CCCCCC;
}

这样，pre 就不会获得边框，因此不必将边框与 合并>td.diff。

Answer 4

该问题看起来是由将鼠标悬停在元素上时添加额外的灰色边框引起的。边框应用在元素占据的主要区域的外部。

解决此问题的简单方法是将非悬停状态设置为具有与背景颜色相同的边框，然后仅在悬停时更改边框颜色属性。