0

当谈到 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

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

在我使用的浏览器 Chrome 和 Internet Explorer 中，问题是可见的。

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

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

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

4

4 回答 4

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;
}
于 2009-08-30T17:08:59.977 回答
1

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

于 2009-08-30T17:15:55.297 回答
1

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

你有一个规则：

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.

于 2009-08-30T17:16:59.540 回答
1

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

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

于 2009-08-30T17:19:07.740 回答