天道酬勤,学无止境

Is there user-select for Opera 10.62 and IE9?

I have been trying to apply user-select for both Opera 10.62 and IE9 without success. I can't/won't bind events with JavaScript that preventDefault(), because there are so many places to be set unselectable and I still need to retain selections in several places. In fact, I want the default behavior to be unselectable for the whole document, and as for that I have set the following in my stylesheet:

* {
    -o-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Everything works great with Firefox 4, Chrome 7 and Safari 5. Only IE9 and Opera 10.62 are not working as I would like them to. Any ideas?

PS: I'm targeting modern browsers.

评论

Did you try using ::selection {color:currentColor;background:transparent}?
For Firefox you can use ::-moz-selection.

https://developer.mozilla.org/En/CSS/::selection
http://msdn.microsoft.com/en-us/library/ff974109(v=VS.85).aspx
http://reference.sitepoint.com/css/pseudoelement-selection


// update //
There's also the unselectable property.

You can use combination of -webkit-user-select: none;, -moz-user-select: none; and specific property unselectable="on", as I described here:

How to make text unselectable on HTML page

user-select isn't a standard CSS3 property, which is why there is no user-select or -o-user-select or -ms-user-select. It used to be in the old user interface spec, but that was superseded by the Basic UI spec. It will likely never be implemented by either browser, unless it is added back to the spec.

User selection is a behaviour rather than a style, so it is best to use JavaScript. As Knu mentions above, you can use unselectable instead.

Using jquery:

$('.element').mousedown( function(e) {
    e.preventDefault();
});

But you may have to add it both to the element and it's container.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在不使用JS的情况下防止图像被拖动或选择(Preventing an image from being draggable or selectable without using JS)
    问题 有谁知道一种在不使用Javascript的情况下在Firefox中同时使图片不可拖动和不可选择的方法吗? 似乎微不足道,但这是问题所在: 可以在Firefox中拖动并突出显示: 因此,我们添加了此内容,但在拖动时仍可以突出显示图像: 因此,我们添加了此内容以解决突出显示的问题,但是与直觉相反,该图像再次变得可拖动。 很奇怪,我知道! 使用FF 16.0.1 那么,有谁知道为什么添加-moz-user-select: none ,会以某种方式胜过并禁用draggable=false ? 当然,webkit可以按预期工作。 Interweb上对此一无所知...如果我们能够共同对此有所启发,那就太好了。 编辑:这是关于防止UI元素被意外拖动并提高可用性-并非在复制保护方案上有些la脚。 回答1 将以下CSS属性设置为图像: user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; 回答2 我一直忘了分享我的解决方案,如果不使用JS,我将找不到解决方案。 在某些极端情况下,@ Jeffery A Wooden的建议CSS不会覆盖。 这就是我适用于所有UI容器的内容
  • 在不使用JS的情况下防止图像被拖动或选择(Preventing an image from being draggable or selectable without using JS)
    问题 有谁知道一种在不使用Javascript的情况下在Firefox中同时使图片不可拖动和不可选择的方法吗? 似乎微不足道,但这是问题所在: 可以在Firefox中拖动并突出显示: 因此,我们添加了此内容,但在拖动时仍可以突出显示图像: 因此,我们添加了此内容以解决突出显示的问题,但是与直觉相反,该图像再次变得可拖动。 很奇怪,我知道! 使用FF 16.0.1 那么,有谁知道为什么添加-moz-user-select: none ,会以某种方式胜过并禁用draggable=false ? 当然,webkit可以按预期工作。 Interweb上对此一无所知...如果我们能够共同对此有所启发,那就太好了。 编辑:这是关于防止UI元素被意外拖动并提高可用性-并非在复制保护方案上有些la脚。 回答1 将以下CSS属性设置为图像: user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; 回答2 我一直忘了分享我的解决方案,如果不使用JS,我将找不到解决方案。 在某些极端情况下,@ Jeffery A Wooden的建议CSS不会覆盖。 这就是我适用于所有UI容器的内容
  • 设置多个 style.background 值(Setting multiple style.background values)
    问题 我想在我的背景中使用渐变并且是跨平台我想用供应商前缀设置背景: background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: linear-gradient(red, blue); 如何在HTMLElement上设置多个style.background ,使用 Javascript 来支持供应商前缀? 更新:我不希望使用 jQuery 或任何其他外部库。 回答1 我认为你唯一真正的选择是清除属性,清除后获取值,然后重复设置它直到它不再具有该值,如下所示: function setPrefixedValue(elm, prop, value) { var prefixes = ['-moz-', '-webkit-', '-o-', '-ms-', '-khtml-']; var i, v, starting; // Clear elm.style[prop] = ""; starting = elm.style[prop]; // Try raw first try { elm.style[prop] = value; if (elm.style
  • 浏览器Javascript堆栈大小限制(Browser Javascript Stack size limit)
    问题 我在IE浏览器中遇到了一些客户端Javascript堆栈溢出问题,这是在第三方库中发生的,该第三方库进行了一些函数调用,并且由于某些原因,它们有时仅由于IE堆栈限制低而在IE中制动。 然后,我编写了一个小的测试HTML,以测试某些浏览器的堆栈大小限制,并发现与在装有Windows 7 OS,8Gb RAM的笔记本电脑上运行的FF 7或Chrome 14相比,IE8实际上具有较小的堆栈限制: <html> <body> <!-- begin Script: --> <script type="text/javascript"> function doSomething(){ var i = 3200; doSomethingElse(i); } function doSomethingElse(i){ if (i == 0) return -1; doSomethingElse(i-1); } doSomething(); </script> <!-- END OF PAGE --> </body> </html> 当值大约为3200时,IE会引起堆栈溢出,与IE相比,Firefox和Chrome可以处理非常深的递归。 我想知道是否有办法将堆栈溢出异常与在IE或任何其他浏览器中在运行时引发它的Javascript函数绑定在一起,以及是否可以在错误被提出。 回答1
  • 一次单击即可选择所有DIV文本(Select all DIV text with single mouse click)
    问题 当用户单击DIV时如何突出显示/选择DIV标签的内容...这个想法是所有文本都被突出显示/选择,因此用户不需要用鼠标手动突出显示文本,并且可能错过了一点文字? 例如,假设我们有一个DIV,如下所示: <div id="selectable">http://example.com/page.htm</div> ...并且当用户单击该URL中的任何URL时,整个URL文本将突出显示,以便他们可以轻松地在浏览器中四处拖动所选文本,或单击鼠标右键复制完整的URL。 谢谢! 回答1 function selectText(containerid) { if (document.selection) { // IE var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().removeAllRanges()
  • 用户选择:所有继承在 chrome 62 中都不起作用(User-select: all inheritance not working in chrome 62)
    问题 我刚刚将 PC 和 Mac 上的 Google Chrome 升级到版本 62,CSS 属性user-select: all已正确停止工作。 如果您的父级user-select设置为无,而user-select设置为全部的子级,则父级属性不会被正确覆盖。 -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; 有没有其他人经历过这种情况并知道这是否是新版 Google Chrome 中的错误,或者是否有正确的方法来实现这一点? 这是演示问题的代码(使用 Chrome 62 查看问题)- JSFiddle: div { margin: 5px; } .parent { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .child { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } <div class="parent"> <div class="child"> Parent
  • HTML5 draggable ='false'在Firefox浏览器中不起作用(HTML5 draggable='false' not working in Firefox browser)
    问题 我只是试图将HTML5 draggable ='false'属性应用于某些图像,但是在Firefox浏览器中不起作用。 在Chrome浏览器中工作正常,但在Firefox上,选择该图像后即可拖放。 示例代码可以在这里看到: <div id="dnd"> <textarea placeholder="drop here"></textarea> <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false'/> </div> Jsfiddle 我拥有Firefox最新版本:32.0.3 Google很多,但没有找到更好的解决方案。 有没有使用JavaScript的解决方案吗? 任何帮助,将不胜感激。 谢谢 回答1 试试这个 添加ondragstart =“ return false;” 到你的html元素 <div id="dnd"> <textarea placeholder="drop here"></textarea> <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false' ondragstart=
  • 有没有一种方法可以使HTML页面上的文本无法选择? [复制](Is there a way to make text unselectable on an HTML page? [duplicate])
    问题 这个问题已经在这里有了答案: 如何禁用文本选择突出显示(48个答案) 7年前关闭。 我正在构建带有一些文本元素(例如选项卡名称)的HTML UI,这些文本元素在被选中时看起来很糟糕。 不幸的是,对于用户来说,双击选项卡名称非常容易,在许多浏览器中默认情况下都会选择该选项卡。 我也许可以用JavaScript技巧解决这个问题(我也想看看那些答案),但是我真的希望CSS / HTML中的某些功能可以直接在所有浏览器中使用。 回答1 在大多数浏览器中,可以使用CSS来实现: *.unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } 对于IE <10和Opera,您将需要使用希望不可选择的元素的unselectable属性。 您可以使用HTML中的属性进行设置: <div id="foo" unselectable="on" class="unselectable">...</div>
  • 浏览器的“ F5”和“ Ctrl + F5”刷新会产生什么请求?(What requests do browsers' “F5” and “Ctrl + F5” refreshes generate?)
    问题 Web浏览器中的F5和Ctrl + F5触发什么动作有标准吗? 我曾经在IE6和Firefox 2.x中进行过实验。 F5刷新将触发带有If-Modified-Since标头的发送到服务器的HTTP请求,而Ctrl + F5则没有这样的标头。 以我的理解, F5将尝试尽可能多地利用缓存的内容,而Ctrl + F5旨在放弃所有缓存的内容,而只是再次从服务器检索所有内容。 但是今天,我注意到在某些最新的浏览器(Chrome,IE8)中,这种方式不再起作用。 F5和Ctrl + F5都发送If-Modified-Since标头。 那么这应该如何工作,或者(如果没有标准)主要浏览器在实现这些刷新功能方面有何不同? 回答1 通常来说,一般来说: 即使更改了内容, F5也会给您相同的页面,因为它可能会从缓存中加载页面。 但是Ctrl - F5会强制刷新缓存,并保证如果更改了内容,您将获得新内容。 回答2 这取决于浏览器,但是它们的行为类似。 我已经测试了FF,IE7,Opera和Chrome。 F5通常仅在页面被修改的情况下更新页面。 浏览器通常尝试尽可能多地使用所有类型的缓存,并在请求中添加“ If-modified-since”标头。 Opera通过发送“缓存控件:无缓存”来进行区别。 CTRL - F5用于强制更新,而不考虑任何缓存。 IE7和FF一样,添加了“ Cache
  • 是否有 CSS3 供应商前缀的浏览器兼容性弃用表? [关闭](Is there a browser-compatibility deprecation table for CSS3 vendor prefixes? [closed])
    问题
  • 如何禁用文本选择突出显示(How to disable text selection highlighting)
    问题 对于像按钮一样的锚点(例如,位于Stack Overflow页面顶部的Questions , Tags , Users等)或选项卡,如果用户不小心选择了文本,是否有CSS标准方法来禁用突出显示效果? 我意识到可以使用JavaScript做到这一点,并且经过一番谷歌搜索就产生了仅Mozilla的-moz-user-select选项。 是否有使用CSS来实现此目标的符合标准的方法,如果没有,那么“最佳实践”方法是什么? 回答1 2017年1月更新: 根据我可以使用,除Internet Explorer 9及其更早版本外,所有浏览器当前都支持user-select (但可悲的是,仍然需要供应商前缀)。 这些是所有可用的正确CSS变体: .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non
  • 20+免费精美响应式Html5 网站模板01(含源码)
    今天花了几个小时的时间整理了一些响应式网站模板,代码下载方式放在了文章末尾,有什么问题可以私信我或者评论区留言,此文章为系列文章,后面还会继续更新网站模板0203等等 1.Woo WOO 是一个干净、现代的登陆页面网站模板。它具有完全响应式设计,并在所有主要浏览器和移动设备上进行了测试。 Woo是展示您的应用程序、服务或数字产品的完美模板。 主题信息 作者:布局: Html5 和 Css3类别: 设计, 服务颜色: 黑色页数: 全部在一页中评价: 4 星兼容浏览器:Microsoft Edge、IE9+、Firefox、Safari、Opera、Chrome 2.Lens 这是 Lens,一个全屏(并且完全响应)的照片库设计。不同于以往 我以这种方式完成的设计(例如并行性),这个避开了通常的支持完全全屏体验的灯箱 主题信息 作者:布局: Html5 和 Css3类别: 摄影师, 画廊颜色: 黑色、白色页数: 首页评价: 4 星兼容浏览器:Microsoft Edge、IE9+、Firefox、Safari、Opera、Chrome 3.Identity 只是一个有趣的小档案/卡片样式模板,在专业课间休息时制作的 项目。 很小,响应迅速,由 Skel + Sass 提供支持。 主题信息 作者:布局 Html5 和 Css3类别: 个人, 博客颜色: 黑色的 白色的页数: 首页评价
  • 是否可以在视频和音频标签中使用数据URI?(Is it possible to use data URIs in video and audio tags?)
    问题 假设以下内容: 有问题的浏览器不限制数据URI的大小。 这样做实际上是有目的的(因此请不要问“有什么意义?”和“您确实意识到base64编码会将文件扩展33%,对吗?”)。 从技术上讲,是否可以将整个视频或音频文件编码为base64,然后使用<audio>或<video>将其嵌入HTML文档中? 回答1 除IE8及以下版本(不支持音频/视频元素)外,应该有可能。 请注意,Opera确实限制了URI的大小。 回答2 这些是我的测试结果。 如果出现提示,我也会尝试使用Ogg。 传奇 W = Wave,WD =带有base64编码数据的Wave:uri M = MP3,MD =具有base64编码数据的MP3:uri 检测结果 Chrome 6.0.472.55:M、MD(无波动) Firefox 3.6:W,WD(无mp3:s) Firefox 4.0b1:W,WD(无mp3:s) iPad iOS 3.2:W,M(无数据:uri) iPhone iOS 4:W,M(无数据:uri) Opera 10.62:W,WD(无mp3:s) Safari 5.0.1:W,WD,M,MD 回答3 IE9支持此功能,但仅适用于它支持的文件格式。 例如,它适用于MP3文件,但不适用于WAV文件。 尝试了http://www.themaninblue.com/experiment/JS-909
  • 为什么 IE9、FF、opera 与 chrome 相比增加了 20% 以上的边距?(Why is IE9, FF,opera adding 20%+ margin vs chrome?)
    问题 实时代码 如何修复class="content_push"的边距以在浏览器之间保持一致。 Chrome 给了我我喜欢的视图与 IE9、opera、ff 相比,看起来像: <div class="content_push"> <section class="cc"> <div class="margin_wrapper"> <header> <hgroup> <h1 class="at">rocking grass out styles for everyone.</h1> <h2 class="ast">The you mice structure for to of almost ability an trying the when designer dissolute that constructing in quickly distinct...</h2> </hgroup> </header> <h3 class="title_header">the good</h3> <p></p> <h3 class="title_header">the bad</h3> <p></p> <h3 class="title_header">the ugly</h3> <p></p> </div> </section> </div> CSS .mc { min-height:100%
  • JQuery val() 不适用于 Opera 中的 textarea(JQuery val() does not work for textarea in Opera)
    问题 我正在使用 jQuery 显示一个模态对话框。 此对话框上有一个textarea控件。 但是在提交此对话框时,由于某种原因,jQuery 无法识别此textarea的值:它始终为空白。 这在其他浏览器中完美运行。 我发出警报以显示该值,但它看起来是空白的。 有人可以在这方面帮助我吗? 控制: <input type="text" id="txtGroupName"/> <textarea rows="3" cols="30" id="txtDescription"></textarea> 使用此值的 jQuery 代码: var postData = new Object(); postData.GroupName = $('#txtGroupName').val(); postData.Description = $('#txtDescription').val(); $('#txtDescription').val()空白,但$('#txtGroupName').val()被正确读取,因为它是一个输入字段。 关于这个问题的另一个发现: 当我在页面加载时填充控件值后将警报放入更新函数时,此警报会正确显示现有值。 但它只显示现有值。 提交模态框后不显示编辑后的值。 回答1 我在 textarea 中使用它来解决这个问题 $("#descripcion").keydown
  • 将 flexbox 用于小型(移动)媒体查询是否安全?(Safe to use flexbox for small (mobile) media query?)
    问题 对于我的响应式站点,我需要支持 IE9,这意味着我还不能使用 felxbox。 然而,我在 500px 定位手机上得到了一个断点。 在此媒体查询中使用 flexbox 是否安全? 移动浏览器支持似乎不错。 这是一个新网站,所以我没有任何现有的分析数据来做出这个决定。 回答1 在支持的浏览器的任何断点处使用 Flexbox 都是安全的,只要您使用所有必要的旧前缀,请这样做。 不支持flexBox Android 和 iPhone 浏览器基本上已经死了。* *除了 Opera Mini 在 2014 年(目前还没有)支持 FlexBox,并且有 2.5 亿用户使用,这比旧版 Windows Phone 7 上的 IE9 的市场份额更高。在这一点上,IE 9 可能是一个垂死的品种移动现在仅占移动市场的 0.29%。 然而,对于 Flexbox 布局有一个表后备解决方案仍然相当重要,特别是如果您的站点迎合亚洲或非洲大陆或东欧的 Opera Mini,或者如果仍然需要针对 IE8 或 IE9 用户。 知道从技术上讲,您可以使用table + table cel/row将 Flexbox 与 IE8-9 兼容性回退一起使用。 这取决于您的上下文,以及正在使用哪些 Flexbox 功能......如果您不使用 flexWrap 或重新排序,则table回退应该在 IE8-9 上运行得相当好
  • Opera12 和 IE9 中的 rem 单位不准确(Inaccurate rem units in Opera12 and IE9)
    问题 虽然我对响应式设计的想法并不陌生,但我经历了一件非常麻烦的事情...... 我决定完全转向rem单位,但我仍然遵循62.5%规则(我已经将它与em )。 所以对于初学者来说: html { font-size: 62.5%; } 我假设1rem = 10px (我知道这并不总是正确的,但是嘿,这是让我稍微简化数学,对于浏览器它仍然是相对的吗?) 恐怖从Opera开始( 12.12 linux 和 win 版本,其中默认字体大小分别设置为14px和16px )。 header nav ul li a span { padding: 1.8rem 2.7rem 3rem 0; font-family: 'sawasdeebold', sans-serif; font-size: 2rem; line-height: 3rem; letter-spacing: -0.3rem; display: block; } 正如您所看到的,由于使用rem单位,我的导航的一部分是“像素完美”。 在 linux 下页面更窄一点(字体更小没问题,所以1rem代表更少的像素)。 但是,如果默认大小更改为14px以外的其他内容, nav所有内容都会严重缩放......在 Windows 下, 16px也是如此......整个缩放想法不起作用。 我不需要每个像素都匹配,但它看起来很难看
  • IE9 现在会支持 WebSocket 吗?(Will IE9 now be supporting WebSocket?)
    问题 这个问题很简单,老话题就在这里。 我希望能得到最新的答案,因为 IE9 将于 2011 年 3 月 14 日发布。 另外,我还想问一下 Firefox 和 Opera 什么时候支持 WebSockets? 回答1 我一直在关注 IE9 的开发,也参与了 HyBi WG(WebSockets 协议)。 Microsoft 一直在使 WebSockets 的演示实现与协议的最新版本保持同步,但是,我怀疑 IE9 的初始版本不会内置 WebSockets 支持。 除非他们开始将其视为巨大的竞争劣势,否则可能不会在 IE10 之前出现,在这种情况下,我们可能会在 IE10 之前的 IE9 更新中看到它添加。 Firefox 可能会在 FF4 或 FF5 的更新中支持 WebSockets(但计划是今年将推出 5)。 此外,您可以使用 about:config 选项打开 FF4 中的当前实现。 我对歌剧一无所知。 他们在协议中很有趣,但在 HyBi 列表中却一直保持沉默。 此外,如果您现在需要 WebSockets,您可以随时使用 Flash shim/fallback web-socket-js。 更新: 我忘了,Opera 11.00 确实内置了 WebSockets 支持,但已禁用。 转到opera:config并搜索WebSocket 。 总而言之
  • 如何使用jQuery禁用文本选择?(How to disable text selection using jQuery?)
    问题 jQuery或jQuery-UI是否具有禁用给定文档元素的文本选择功能? 回答1 在jQuery 1.8中,可以按照以下步骤进行操作: (function($){ $.fn.disableSelection = function() { return this .attr('unselectable', 'on') .css('user-select', 'none') .on('selectstart', false); }; })(jQuery); 回答2 如果您使用jQuery UI,则可以使用一种方法,但是它只能处理鼠标选择(即CTRL + A仍然有效): $('.your-element').disableSelection(); // deprecated in jQuery UI 1.9 如果您不想使用jQuery UI,则代码非常简单: $(el).attr('unselectable','on') .css({'-moz-user-select':'-moz-none', '-moz-user-select':'none', '-o-user-select':'none', '-khtml-user-select':'none', /* you could also put this in a class */ '-webkit-user-select'
  • Chrome的localStorage实施有问题吗?(Bug with Chrome's localStorage implementation?)
    问题 进一步解决这个问题,将功能绑定到Chrome 8.0.552.224中存储对象的change事件时,我得到了一个奇怪的结果。 考试: <!DOCTYPE html> <html> <head> <title>Chrome localStorage Test</title> <script type="text/javascript" > var handle_storage = function () { alert('storage event'); }; window.addEventListener("storage", handle_storage, false); </script> </head> <body> <button id="add" onclick="localStorage.setItem('a','test')">Add</button> <button id="clear" onclick="localStorage.clear()">Clear</button> </body> </html> 在两个Chrome窗口中打开页面,一个窗口中包含两个标签, 点击“添加”按钮 当我这样做时,我在第二个选项卡和第二个窗口上显示一个警报框,但没有在调用该事件的选项卡上显示(我单击)。 据我了解,我应该看到三个警报框(每个打开的选项卡一个)。