Question

对于CSS来说，我是一个全新的人，所以我几乎放弃了解决这个问题的方法。

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

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

WebSVN CSS Problem Illustration 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

不幸的是，谷歌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个边框顶部和底部。 / p>

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

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

对此的简单修复是将非悬停状态设置为具有与背景颜色相同的边框，然后仅在悬停时更改border-color属性。

任何CSS-savy都可以帮我解决WebSVN设置的问题吗？

4 个答案: