jquery - CSS 按钮在 Firefox 中工作(接近)完美，在 IE 和 Chrome 中崩溃和燃烧

Question

我有一些 CSS 按钮。 “按钮”效果是通过在 anchor 标记中使用固定大小的 <span> 元素来完成的，并且 css 规则以 a span:active 、 a span:hover 的形式显示按钮状态。这些按钮用于分页，因此当您在第 1 页时，“上一页”按钮被禁用，而当您在最后一页时，“下一页”按钮被禁用。这是在 jQuery 中正确执行的。但是……

问题

首先，这是一个 fiddle http://jsfiddle.net/9Y2uj/6/

在 firefox 中，一切都很好，除了如果你点击一个按钮，不要释放鼠标，然后拖出，按钮保持按下状态。这没什么大不了的，但很烦人。我认为这种行为已记录在案。

在 IE 和 Chrome 中，它会崩溃和燃烧。我的问题是我怎样才能使它在 IE 和 Chrome 中工作？更具体地说，我使用的哪些 CSS 属性不能跨浏览器兼容？这是基于 :active和 :hover (编辑我也忘记了:不) 我不知道的伪选择器有任何跨浏览器兼容性问题。

以下是对 IE 和 Chrome 中出现问题的描述。如果在以下段落中有任何不清楚或没有很好解释的地方，请在 FF 中查看以查看正确的行为，然后在 Chrome 和 IE 中查看以查看它在哪里搞砸了。

在 chrome 中，该按钮在整个页面浏览过程中一直处于按下状态，直到它变为非事件状态。并且，对于 CSS pruposes，“事件”“非事件”按钮逻辑被完全忽略。对于 JS，它正确地阻止您使用最后一页上的下一个按钮和第一页上的上一个按钮，但是......为了显示目的，我让 JS 添加一个名为 disabled 的类，上面有不透明度设置。我已经检查了元素以验证类是否已添加，但我没有看到不透明。

在 IE 中，:active 事件从未被触发。仅观察到 :hover，忽略 :active。但是，有趣的是，“非事件”按钮规则得到了正确执行!

感谢阅读!

Answer 1

选择器

a#leftButton:not(.disabled):hover span 

可能不交叉兼容。不过我只是猜测。