奇怪的CSS混乱-在悬停中出现意外的border-bottom值

Question

SASS在生产服务器上插入了意外的CSS，并弄乱了我的a:hover

这是我的application.css的片段:

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px; }
a {
    color: #000000;
}
a:visited {
    color: #666666;
}
a:hover {
    border-bottom: none;
}
div {
  &.field, &.actions {
    margin-bottom: 10px; } }

但是在生产服务器上firefox报告如下css:

pre {
    background-color: #EEEEEE;
    font-size: 11px;
    padding: 10px;
}
a {
    color: #000000;
}
a:visited {
    color: #666666;
}
a:hover {
    border-bottom: 1px solid #777777;
}
div.field, div.actions {
    margin-bottom: 10px;
}

在我的开发机器上firefox显示以下CSS:

a:hover {
    border-bottom: medium none;
}

我使用Rails 3.2.13，我从来没有见过这样的问题。我浪费了整个下午的时间来寻找解决办法。这个问题破坏了我的主页，使它看起来非常不专业。

Answer 1

首先，border-bottom是一个简写属性。它由border-bottom-width、border-bottom-color和border-bottom-style组成。这些属性的值可以以任何顺序出现。其中任何一个都可以省略。

none是border-bottom-style的值。

第二，Firefox在其检查功能中显示的内容并不完全是您的CSS。它显示了它如何对待CSS。border-bottom: medium none;意味着您将边框样式更改为none，而宽度保持为medium(显然，它是继承的)。

要查看实际的CSS，请打开实际的CSS文件并查看其中。它还可以让您查看媒体查询包装器。

第三，删除底部边框，使用border-bottom: 0;。这将被视为border-bottom-width: 0;，它有效地删除了边框。