Question

SASS在生产服务器上插入意外的CSS并弄乱我的 a：悬停

这是我的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是shorthand property。它结合了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;，这有效地消除了边界。

奇怪的CSS修改 - a：中出现意外的边界底部值：悬停

1 个答案: