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

问题描述

我有一张图片，我想让它同时成为unselectable和undraggable。（并非试图阻止用户复制）

我可以通过

将.noselect类添加到<img>标签。正如这里建议的那样。
禁用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 中运行：

我怎样才能解决这个问题？

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

标签： htmlcssgoogle-chromefirefoxopera

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

问题描述

解决方案

推荐阅读