Я создаю меню Button для проекта для курса веб-разработки. Я использую <div> s для создания интерактивного меню, изменяющего оттенки при наведении курсора. Я хотел, чтобы пользователь не мог выбрать текст (так как это кнопка). Я использую схему гибкого макета (по крайней мере, я думаю, что я делаю это правильно). У меня есть следующий код, но он ведет себя по-разному в разных браузерах. Я включил ссылку на скриншот ниже, это слева и справа 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 браузерах (все обновлено до последней версии, как этот пост, Chrome 56, Firefox 51 и Safari 10.0.3). Chrome является самым близким. Это предотвращает выбор пользователем текста и наведение на всю область. Единственное, что странно, когда вы нажимаете и перетаскиваете, пока он не выбирает текст, курсор меняется на курсор выделения. Firefox лучше всего подходит, поскольку он затеняет всю кнопку при наведении курсора, но не подчиняется user-select: none, и, как вы можете видеть, Safari не заполняет всю коробку, так как другие два делают наведение, но также позволяют полностью выбирать.
ScreenCap здесь: Video of different behaviors in different browsers. From Left to Right: Chrome, FireFox, Safari
я делаю что-то нестандартное? Или эти ошибки? и если да, то есть ли способ заставить их всех вести себя правильно? Спасибо!
Спасибо, что исправил проблему. Я вижу, что он по-прежнему помечен как экспериментальная технология, поэтому он не принимается без тегов css, специфичных для двигателя. – FrostedCookies