使 <img> 不可选择和不可拖动同样适用于 Firefox，但不适用于 Chrome 或 Opera答案

【问题标题】：Making <img> unselectable and undraggable at the same works in Firefox but not in Chrome or Opera使 <img> 不可选择和不可拖动同样适用于 Firefox，但不适用于 Chrome 或 Opera
【发布时间】：2020-01-17 01:40:54
【问题描述】：

我有一张图片，我想让它不可选择和不可拖动。（并非试图阻止用户复制）

我可以做到这一点

将.noselect 类添加到<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"，但同样的事情发生了。

【问题讨论】：

标签： html css google-chrome firefox opera

【解决方案1】：

只需在带有 noselect 类的图像上添加一个空 div，它应该可以非常干净地工作

编辑：或使用 noselect 类将图像添加为 div 的背景图像。

【讨论】：

在图像上添加一个空 div 效果很好，谢谢。