jquery - 无法选择在 Firefox/Chrome/Safari 中有效，在 IE8 中无效

Question

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

Answer 1

使用 <div>使用背景图片而不是 <img> .如果有问题的图像是 100px x 50px(例如)，那么像这样的东西应该可以解决问题:

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

如果您需要支持 IE7，那么您可能需要更改 display: inline-block至 display: block使用特定于 IE7 的样式表(最好使用条件注释加载)。

上面的问题是在替换 <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 的样式表覆盖它。