使 <img> 不可选择和不可拖动在 Firefox 中同样有效，但在 Chrome 或 Opera 中无效

Question

我有一张图片，我想让它既 unselectable 又 undraggable。（并非试图阻止用户复制）

我可以通过

实现

添加 .noselect class 到 <img> 标签。按照建议 here.
正在禁用 pointer-events。（我知道这也会禁用 onclick，但由于我不需要单击此图像，所以我根本不在乎。）

body,
html {
  background-color: #181A1B;
  color: white;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Oxygen', sans-serif;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.introduction {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.introduction p,
h1 {
  margin: 0px 0px 0px 10px;
}

.introduction img {
  border-radius: 100%;
  pointer-events: none;
}

.clearfix {
  clear: both;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer / Edge */
  user-select: none;
  /* Non-prefixed version */
}

@font-face {
  font-family: 'Oxygen';
  src: url('../fonts/oxygen/Oxygen-Regular.ttf');
}

<!DOCTYPE html>
<html>

<head>
  <title>Amir A. Shabani</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/style.css" type="text/css">
</head>

<body>
  <div class="container">
    <div class="introduction">
      <img class="noselect" src="https://raw.githubusercontent.com/amirashabani/shabani.xyz/master/images/profile.png" alt="profile picture">
      <div class="introduction-text">
        <h1 class="noselect">Hi, my name is Amir.</h1>
        <p class="noselect">I'm a backend developer and an avid Linux and FOSS enthusiast.<br/>I enjoy programming and developing software that works efficiently.<br/>Currently, I'm studying Software Engineering at the University of Qom, Iran.</p>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</body>

</html>

现在这在 firefox 69.0-1 中按预期工作，但在 google-chrome 77.0.3865.75-1 中：

我无法拖动图像本身，但如果我尝试突出显示包含图像的 div，那么我可以拖动图像。 opera 63.0.3368.88-1 中的相同内容：

为了证明它在 Firefox 上有效：

我该如何解决这个问题？

我也在我的 <img> 标签中使用了 draggable="false"，但同样的事情发生了。

Answer 1

只需在图像上添加一个空的 div 并在其上添加 noselect class，它应该可以正常工作

编辑：或使用您的 noselect class.

添加图像作为 div 的背景图像

使 <img> 不可选择和不可拖动在 Firefox 中同样有效，但在 Chrome 或 Opera 中无效

Making <img> unselectable and undraggable at the same works in Firefox but not in Chrome or Opera

html

css

google-chrome

firefox

opera