奇怪的 CSS mangling - a:hover 中的意外边框底部值答案

【问题标题】：Weird CSS mangling - Unexpected border-bottom value in a:hover奇怪的 CSS mangling - a:hover 中的意外边框底部值
【发布时间】：2013-04-13 01:11:41
【问题描述】：

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

【问题讨论】：

不是一个答案，但一个快速的解决方法是将border-bottom: none; 替换为border-bottom-width: 0;
Sass 不会随机插入代码只是因为。
遗憾的是，生产服务器上的资产编译存在问题。现在我的生产服务器显然具有与我的开发机器不同的 CSS。
对不起，我之前没有注意到，但问题是在生产服务器上没有刷新 CSS。

标签： css ruby-on-rails sass

【解决方案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;，它有效地移除了边框。

【讨论】：

非常感谢您的详尽解释。
嗨 ruby_object，别忘了点赞并选择答案！