Firefox上的奇怪蓝色边框

Question

请看一下这段代码

http://www.jsfiddle.net/tt13/5CxPr/21

在Firefox上，当您按 ctrl 按钮选择多行时会显示奇怪的蓝色边框，但在Chrome上却没有。

使用最新的Firefox 10.0.2。

这与浏览器有关吗？

Answer 1

这是由于选择了文本 - 本机浏览器行为。

您可以使用 SHIFT 键代替 CTRL 在Chrome中观察同样的问题。

要解决此问题，您只需在用户单击要选择的单元格后立即清除选择：

$(".subject").live('click',function(event) {
    if(event.ctrlKey) {
          $(this).toggleClass('selected');  
    } else {
          $(".subject").removeClass("selected");
          $(this).addClass("selected");           
    }
    if (document.selection)
        document.selection.empty();
    else if (window.getSelection)
        window.getSelection().removeAllRanges();
});

Updated fiddle

Answer 2

尝试将CS​​S属性-moz-user-select设置为表以禁用默认选择行为：

table { -moz-user-select: none; }

MDN

Answer 3

如果您准备在单元格中添加额外元素以允许文本仍可选择，则适用于当前版本的Firefox 20.0.1。

td { -moz-user-select: -moz-none }
td * { -moz-user-select: text }

http://jsfiddle.net/nukj7/