0

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，我从未见过这样的问题。我浪费了整个下午试图找到解决方案。这个问题破坏了我的主页，使它看起来非常不专业。

4

1 回答 1

4

首先，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;，这有效地删除了边界。

于 2013-04-12T17:11:41.453 回答