基于 Div 的按钮菜单在不同的浏览器中具有不同的行为答案

【问题标题】：Div based button menu has different behavior in different browsers基于 Div 的按钮菜单在不同的浏览器中具有不同的行为
【发布时间】：2017-02-22 06:05:44
【问题描述】：

我正在为 Web 开发课程的项目制作按钮菜单。我正在使用<div>s 创建可点击的菜单，该菜单在悬停时会改变阴影。我想要它，以便用户无法选择文本（因为它是一个按钮）。我正在使用弹性布局方案（至少我认为我做得正确）。我有以下代码，但它在不同的浏览器中表现不同。我在下面添加了一个屏幕截图链接，从左到右依次是 Chrome、Firefox 和 Safari。

这是菜单栏的代码：

<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）。铬是最接近的。它可以防止用户选择文本并在悬停时填充整个区域。唯一奇怪的是当您单击并拖动而不选择文本时，光标变为突出显示光标。 Firefox 次之，因为它在悬停时遮住了整个按钮，但不服从user-select: none，正如您所见，Safari 既不像其他两个在悬停时那样填充整个框，但也允许完全选择。

此处的屏幕截图： Video of different behaviors in different browsers. From Left to Right: Chrome, FireFox, Safari

我在做一些非标准的事情吗？还是这些错误？如果是这样，有没有办法让他们都表现得正常？谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

在用户选择之前添加前缀（-moz、-webkit 和 -ms），以便在其他浏览器中使用不同的行：

#titleBar {
  display: flex;
  width: 100%;
  height : 40px;
  padding: 5px;
  background-color: #CCCCCC;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

当您试图查找错误所在的位置时，您似乎在按钮和 HTML 等多个位置有用户选择无的代码。随着项目变得更加复杂并且仅将其应用于#titleBar ID并使其继承下来，删除冗余代码将对您有所帮助。

Mozilla 在这里有关于用户选择的解释：https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

这也是我使用该更改所做的 JSFiddle：https://jsfiddle.net/0uvrpohp/1/

关于 Safari 和填充元素的完整高度的问题，我无法通过我的 Windows 机器预览它，但这个帖子可能会有所帮助：Chrome / Safari not filling 100% height of flex parent

【讨论】：

感谢 Kylegill，用户代理技巧成功了。我看到它仍然被认为是“实验性的”，所以没有一个引擎特定的标注还没有人支持它。是的。我在每一个可能的位置都尝试过，看看它是否有所作为，却忘了删除它们。他们现在走了。我看到它是从父元素继承的。谢谢。感谢您的链接，我发现了我在下面发布的 safari 问题。

【解决方案2】：

    .button {
      margin: 0;
      padding: 5px;
      background-color: #CCCCCC;
      height: 100%;
      font-family: helvetica, sans-serif;
      display: flex;
      align-items: center;
      -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, currently
                                  supported by Chrome and Opera */
    }

    .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;
    }

  <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>

尝试使用前缀...

【讨论】：

感谢您解决了这个问题。我看到它仍然被标记为实验性技术，因此没有引擎特定的 css 标签是不被接受的。

【解决方案3】：

我想我看到了不同之处。也许这会有所帮助？

border-top-style: none;`
border-bottom-style: none;

【讨论】：

【解决方案4】：

作为 Safari 特定问题的后续行动，感谢 Kylegill 的链接，我找到了更好的解决方案。 Link to 100% vertical fill issue

答案下：

"4. 嵌套 Flex 容器（推荐）摆脱百分比高度。摆脱表格属性。摆脱垂直对齐。避免绝对定位。一直坚持使用 flexbox。将display: flex 应用于弹性项目 (.item)，使其成为弹性容器。这会自动设置 align-items: stretch，它告诉子项目 (.item-inner) 扩展父项目的整个高度。"

我删除了.button 类中的height:100%;，将align-items: center 和#buttonBar 容器下的align-items: stretch; 更改为align-items: stretch;，现在它在Safari 和其他两个浏览器中运行良好。

.button {
      margin: 0;
      padding: 5px;
      background-color: #CCCCCC;      
      font-family: helvetica, sans-serif;
      display: flex;
      align-items: center;
    }

    .buttonDivider {
      border-left: gray 1px solid;
      height: 100%;
    }

    .button:hover{
      background-color: gray;
      cursor: pointer;
    }

    #buttonBar {
      top: 0;
      left: 0;
      display: flex;
      border: gray 1px solid;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
      align-items: stretch;
    }

【讨论】：