Question

我正在为一个Web开发课程的项目制作一个Button菜单。我正在使用<div>来创建可点击的菜单，该菜单会在悬停时更改阴影。我想要它，以便用户无法选择文本（因为它是一个按钮）。我正在使用flex布局方案（至少我认为我正确地做到了）。我有以下代码，但它在不同的浏览器中表现不同。我在下面添加了一个屏幕截图链接，从左到右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）。 Chrome是最接近的。它会阻止用户选择文本，并在悬停时填充整个区域。唯一奇怪的是当你没有选择文本时单击并拖动时，光标变为高亮光标。 Firefox是次佳的，因为它会在悬停时遮住整个按钮，但不服从user-select: none，正如您所看到的，Safari既不会填充整个框，也不会像其他两个在悬停时那样填充，但也允许完全选择。< / p>

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

我做的事情是非标准的吗？或者这些错误？如果有的话，有没有办法让它们都表现得很好？谢谢！

Answer 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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

尝试使用前缀......

Answer 3

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

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

Answer 4

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

答案：

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

我摆脱了height:100%;课程中的.button align-items: center，而#buttonBar容器下的align-items: stretch;容器更改为.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; }现在它已经＃39}在Safari和其他两个浏览器中工作得很好。

{{1}}

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

4 个答案: