Html 基于Div的按钮菜单在不同的浏览器中有不同的行为
我正在为一个网络开发课程的项目制作一个按钮菜单。我用s创建了一个可点击的菜单，当鼠标悬停时可以改变阴影。我想要它，这样用户就不能选择文本，因为它是一个按钮。我使用的是flex布局方案，至少我认为我做得对。我有以下代码，但在不同的浏览器中表现不同。我在下面添加了一个screen cap链接，从左到右依次是Chrome、Firefox和Safari 以下是菜单栏的代码：Html 基于Div的按钮菜单在不同的浏览器中有不同的行为,html,css,Html,Css,我正在为一个网络开发课程的项目制作一个按钮菜单。我用s创建了一个可点击的菜单，当鼠标悬停时可以改变阴影。我想要它，这样用户就不能选择文本，因为它是一个按钮。我使用的是flex布局方案，至少我认为我做得对。我有以下代码，但在不同的浏览器中表现不同。我在下面添加了一个screen cap链接，从左到右依次是Chrome、Firefox和Safari 以下是菜单栏的代码： <style type="text/css"> .button { margin: 0;
<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>
谢谢 添加前缀-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;
}
至于Safari和填充元素的完整高度的问题，我无法通过我的Windows机器预览它，但此线程可能会有所帮助：在用户选择其他浏览器的功能之前，添加前缀-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;
}
至于Safari和填充元素的完整高度的问题，我无法通过我的Windows机器预览它，但此线程可能会有所帮助：我想我看到了区别。 也许这能帮上忙
border-top-style: none;`
border-bottom-style: none;
我想我看到了区别。 也许这能帮上忙
border-top-style: none;`
border-bottom-style: none;
作为针对Safari特定问题的后续行动，由于Kylegill的链接，我找到了一个更好的解决方案 答案如下： 四,。嵌套的Flex容器建议去掉百分比高度。去掉表属性。摆脱垂直对齐。避免绝对定位。只要一直坚持使用flexbox即可。将display:flex应用于flex item.item，使其成为flex容器。这会自动设置align items:stretch，它告诉子.item inner扩展父级的完整高度 我去掉了身高：100%；在.button类中，保持对齐项：buttonBar容器的中心和下方更改为对齐项：拉伸；现在它在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;
}
作为针对Safari特定问题的后续行动，由于Kylegill的链接，我找到了一个更好的解决方案 答案如下： 四,。嵌套的Flex容器建议去掉百分比高度。去掉表属性。摆脱垂直对齐。避免绝对定位。只要一直坚持使用flexbox即可。将display:flex应用于flex item.item，使其成为flex容器。这会自动设置align items:stretch，它告诉子.item inner扩展父级的完整高度 我去掉了身高：100%；在.button类中，保持对齐项：buttonBar容器的中心和下方更改为对齐项：拉伸；现在它在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;
}
谢谢Kylegill，用户代理技巧成功了。我看到它仍然被认为是实验性的，所以没有引擎特定的标注，还没有人支持它。是的。我试着在每一个可能的地方，看看它是否有区别，但忘记了删除它们。他们现在走了。我看到它是从父元素继承的。谢谢多亏了你的链接，我解决了下面发布的safari问题。多亏了Kylegill，用户代理技巧成功了。我看到它仍然被认为是实验性的，所以没有引擎特定的标注，还没有人支持它。是的。我试着在每一个可能的地方，看看它是否有区别，但忘记了删除它们。他们现在走了。我看到它是从父元素继承的。谢谢感谢你的链接，我发现了我在下面发布的safari问题。谢谢你，这解决了这个问题。我看到它仍然被标记为实验性技术，因此如果没有特定于引擎的css标记，它是不被接受的。谢谢，这解决了这个问题。我看到它仍然被标记为实验性技术，因此如果没有特定于引擎的css标记，它是不被接受的。