Chrome 中的问题，使用 jQuery 删除 CSS 保留在 chrome 中

Question

我目前正在开发一个使用 jQuery 用 javascript 大量编码的表格应用程序。

当您单击 td 单元格时，jQuery 会将 2px 纯黑色推送到边框属性。然后在模糊时，我使用 removeAttr 删除样式属性，使其恢复到样式表设置。在 IE9 中运行良好，但当我在 Chrome 中测试时，左边框调整大小，但保持黑色。

似乎唯一可以摆脱这种情况的是打开控制台。当我用控制台打开模糊时，样式标签会被删除，所以我不明白为什么它仍然在左侧呈现黑色边框。有什么想法吗？

编辑：我制作了一个视频来展示我遇到的问题。 http://www.youtube.com/watch?v=JCmYNOO5u4I

代码如下：

$("td.display").live('mouseenter', function () {
    $(this).addClass('selected');
}).live('mouseleave', function () {
    $(this).removeClass('selected');
});

CSS 是：

table TD.selected {
    border: 2px solid;
    border-color: Black;
}

Answer 1

不要使用$.removeAttr，而是使用$.css 来恢复CSS。 $.removeAttr 很可能由于 CSS 的持久性而无法正常工作。

您真正应该做的是add a class 聚焦，然后remove that class 模糊。也就是说，$.addClass 和 $.removeClass，记录在各自的链接中。

Answer 2

不要使用 JavaScript 来实现这种微不足道的效果，而是使用 CSS。 :hover 伪选择器在所有现代浏览器中都是 well-supported。

td.display:hover {
    border: 2px solid black;
}

我已经调整了您的选择器，因为 <td> 元素始终包含在 <table> 元素中。

演示：http://jsfiddle.net/JKM7e/

---

更新

这是 Chrome 中许多与 table-css 相关的错误之一。一种解决方法是启动重新渲染。要解决此问题，请让 Chrome 再次呈现页面。此修复不应该在非 webkit 浏览器中激活，因此添加了一个额外的变量。

我还优化了您的代码，并将已弃用的 live 替换为 on。新版本可以在here找到。

// true if webkit, false otherwise
var isWebkit = !!$('<div style="-webkit-border-radius:1px">')[0].style.cssText.length;

$(document).on('blur', 'input.editCell', function () {
    var $thisParent = $(this).parent();      // <-- Optimizing by caching
    // Remove Highlight and bold around cell
    $thisParent.removeClass('selected');
    var colRow = $thisParent.attr('id').split('_');
    $('th:containsExactly(' + colRow[0] + ')').removeAttr('style');
    $('td.yAxis:containsExactly(' + colRow[1] + ')').removeAttr('style');
    // Change class back to display
    $thisParent.attr('class', 'display');
    // Take the entered value and put it in the cell
    $thisParent.html(this.value);
    // if(isFunction(this.value) === 'SUM')

    if (isWebkit) { // Fix for Webkit bug: render the table again
        // Without jQuery, for efficiency
        var style = document.getElementById('spreadsheetTable').style;
        style.color = '#111';                       //<--1. Change style 
        setTimeout(function(){style.color='';}, 4); //<--2. Fix
    }
});

Answer 3

两个选项： - 使用 .css() 重置样式，而不是 removeAttr - 改用一个类，并在焦点和我们的事件中使用 toggleClass()

第二个选项肯定更可取。