将 CSS 类属性应用于 Firefox/IE 与 Chrome 中的链接元素答案

【问题标题】：Applying CSS class attributes to link element in Firefox/IE vs. Chrome将 CSS 类属性应用于 Firefox/IE 与 Chrome 中的链接元素
【发布时间】：2012-07-22 17:15:18
【问题描述】：

我在将类应用于 HTML 元素时遇到问题。它在 Chrome 中运行良好，但该类不适用于 Firefox/Opera/IE 的相同元素。

这是在 Chrome 中的外观：http://cl.ly/0W0P3t102U0p3J141w0u。这是它在 Firefox 中的样子：http://cl.ly/1d0r2g3g3H2X1E0t2Q1x

不知道为什么在后面的“忘记”链接中没有应用该样式（无论是浮动还是字体样式）。我检查了代码，似乎在后者的浏览器中呈现时，该类没有被拾取。这是代码：

#login-form  .forgot, #login-form .forgot::active {
    font-size: 14px;
    float: right;
    line-height: 28px;
    position: relative;
    margin-right: 7px;
}

<div class="field">
  <p>
    <label for="user_password">Password</label>
    <input id="user_password" name="user[password]" size="30" type="password" />
    <br />
    <a href="pb-forgot-password_beta.htm" class="forgot">Forgot?</a>
    <span class="iferror"> &nbsp; </span>
  </p>
</div>

【问题讨论】：

标签： html css internet-explorer firefox google-chrome

【解决方案1】：

可能.forgot::active（应该是.forgot:active）中的双冒号会导致解析错误，使浏览器忽略整个节。

【讨论】：

是的，没错。这只是一个 WebKit 错误：根据规范，它应该丢弃整个规则。