私は、Web開発コースのプロジェクトのボタンメニューを作成しています。私は<div>を使用して、ホバリング時に陰影を変更するクリック可能なメニューを作成しています。ユーザーがテキストを選択できないようにしたいのです（ボタンなので）。私はフレックスレイアウトスキームを使用しています（少なくとも私はそれを正しくやっていると思います）。私は次のコードを持っていますが、それは異なったブラウザで異なった振る舞いをしています。私は左から右のChrome、Firefox、Safariのスクリーンキャップのリンクを含んでいました。divベースのボタンメニューは、さまざまなブラウザで異なる動作をします
は、ここでメニューバーのためのコードです：
<style type="text/css">
.button {
margin: 0;
padding: 5px;
background-color: #CCCCCC;
height: 100%;
font-family: helvetica, sans-serif;
display: flex;
align-items: center;
user-select: none;
}
.buttonDivider {
border-left: gray 1px solid;
height: 100%;
}
.button:hover{
background-color: gray;
cursor: pointer;
}
#buttonBar {
display: flex;
border: gray 1px solid;
border-radius: 5px;
overflow: hidden;
margin: 0 auto;
align-items: center;
user-select: none;
}
#titleBar {
display: flex;
width: 100%;
height : 40px;
padding: 5px;
background-color: #CCCCCC;
user-select: none;
}
#titleText {
display: flex;
align-items: center;
font-family: helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
}
body{
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="titleBar">
<span id="titleText">CodePlayer</span>
<div id="buttonBar">
<div id="buttonHTML" class="button">HTML</div>
<div class="buttonDivider"></div>
<div id="buttonCSS" class="button" style="user-select:none">CSS</div>
<div class="buttonDivider"></div>
<div id="buttonJS" class="button">JavaScript</div>
<div class="buttonDivider"></div>
<div id="buttonOutput" class="button">Output</div>
</div>
</div>
しかし、あなたがビデオから見ることができるように、動作は3つのブラウザ（すべてこの記事のように、クロム56、最新バージョンにアップデートでかなり異なっています、 Firefox 51、およびSafari 10.0.3）をサポートしています。クロムが最も近い。ユーザーがテキストを選択するのを防ぎ、ホバー上で領域全体を塗りつぶします。奇妙なことは、テキストを選択していない状態でクリックしてドラッグすると、カーソルがハイライトカーソルに変わります。 Firefoxは、ホバー上のボタン全体を暗くするが、user-select: noneには従わないので、Safariはボックス全体を塗りつぶすことも、他の2つはホバー上で塗りつぶすのではなく、完全に選択することもできる。ここ
SCREENCAP： Video of different behaviors in different browsers. From Left to Right: Chrome, FireFox, Safari
私が何か非標準をやっていますか？またはこれらのバグはありますか？もしそうなら、彼らはすべて正しく行動する方法がありますか？ ありがとう！
ありがとうございました。実験的な技術としてまだラベル付けされているので、エンジン固有のCSSタグなしでは受け入れられません。 – FrostedCookies