用户选择:所有继承不适用于Chrome 62 [英] User-select: all inheritance not working in chrome 62

问题描述

我刚刚在PC和Mac上将Google Chrome升级到了版本62，并且CSS属性user-select: all已停止正常工作.

I just upgraded Google Chrome on my PC and Mac to version 62, and the CSS property user-select: all has stopped working, correctly.

如果您有一个将user-select设置为none的父项，并且将一个将user-select设置为all的孩子，则parent属性不会被正确覆盖.

If you have a parent with the user-select set to none, and a child with user-select set to all, the parent property is not overwritten correctly.

-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;

其他人是否经历过此事，并且知道这是否是新版本的Google Chrome浏览器中的错误，或者是否有正确的方法来实现呢?

Has anyone else experienced this and know if this is a bug in the new version of Google Chrome or if there is a correct way to implement this?

以下是演示该问题的代码(使用Chrome 62查看该问题)- JSFiddle :

Here is the code demonstrating the issue (use Chrome 62 to see the problem) - 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 has user-select set to none, Try to select this text
  </div>
</div>

<div class="child">
  No parent, Try to select this text
</div>

推荐答案

Chrome浏览器上存在此问题.该错误已被报告.您可以在

It is an issue on the Chrome browser. The bug was already reported. You can find more details about the bug with another (not working example) on this bug report.

在修复该错误之前，您可以使用一些JavaScript来获取该行为.参见 StackOverflow上的此答案.

Until the bug is fixed you have the possibility to use some JavaScript to get the behavior. See this answer on StackOverflow.

另一个非JavaScript解决方案如下:

Another non JavaScript solution would be the following:

.parent :not(.selectable-all) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectable-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

<div class="parent">
  <span>user-select set to none and not selectable all.</span>
  <div class="child selectable-all">
    Parent has user-select set to none, Try to select this text
  </div>
</div>

<div class="child selectable-all">
  No parent, Try to select this text
</div>

这篇关于用户选择:所有继承不适用于Chrome 62的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！