unselectable 在 Firefox/Chrome/Safari 中有效，在 IE8 中无效答案

【问题标题】：unselectable works in Firefox/Chrome/Safari, not working IE8unselectable 在 Firefox/Chrome/Safari 中有效，在 IE8 中无效
【发布时间】：2013-05-07 14:08:21
【问题描述】：

我需要能够防止图像（放置在 DIV 中）被选中。我尝试了很多建议，但似乎没有一个适用于 IE8。事实是，当用户用鼠标选择文本时，在 IE8（并且只有 IE8）中，图像也会被选中。将示例上传到网络（而不是此处）似乎是最简单的方法，因此您可以在 http://www.enosis-dev.com/select.html 点击查看源代码查看代码。任何帮助将不胜感激。尼尔。

【问题讨论】：

那么，如果它是您问题的正确解决方案，您为什么不接受一个答案呢？从下面的 cmets 来看，您似乎对答案很满意。

标签： jquery html css internet-explorer-8

【解决方案1】：

使用带有背景图像的<div> 而不是<img>。如果有问题的图像是 100 像素 x 50 像素（例如），那么这样的东西应该可以解决问题：

<div style="display: inline-block; width: 100px; height: 50px: background: url(/path/to/image.jpg);"></div>

如果您需要支持 IE7，那么您可能必须使用 IE7 特定样式表（最好使用条件注释加载）将 display: inline-block 更改为 display: block。

上面的问题是，在将<img>标签替换为带有背景的<div>标签之前，您需要知道图像尺寸。您可以使用 jQuery 在客户端进行替换以解决该问题，但需要注意确保在替换图像之前加载图像：

$(window).load(function() {
    $('img').each(function() {
        var $img         = $(this);
        var $replacement = $('<div/>');
        $replacement.css({
            width:      $img.width()  + 'px',
            height:     $img.height() + 'px',
            display:    'inline-block',
            background: 'url(' + $img.attr('src') + ')'
        });
        $img.after($replacement).remove();
    });
});

$(window).load() 在加载所有内容之前不应触发，因此在加载时应该知道所有图像大小。

如果 IE7 存在问题，那么您可以将 display: inline-block 位放入一个类中，并以通常的方式使用特定于 IE7 的样式表覆盖它。

【讨论】：

如果可以的话，我会 +1。这是向前迈出的一步，确实没有在 IE8 中标记，不幸的是我无法使用，因为您的方法要求人们事先知道所有图像的尺寸，而我不知道。
@Nir O.：我添加了一个在客户端进行 img-to-div 转换的更新。你用“jQuery”标记了这个，所以也许这对你有用。
@Nir O.：这是一个简单的例子，你可以试试看它是否适合你：jsfiddle.net/ambiguous/PkRED
您好 mu，它是经过测试的代码还是只是一个草图？我测试了它（enosis-dev.com/select.html）但它不起作用。
您的select.html 在HTML 中有<div style="display:...，这应该是原始的<img> 标记。看看我评论中的 jsfiddle.net 链接。

【解决方案2】：

试试
ele.onselectstart = function (){ return false; }

ele.unselectable = "开";

或者试试
用户选择：无； -webkit 用户选择：无； -o-用户选择：无； -moz 用户选择：无；

【讨论】：