Question

我正在做一个小项目，我想添加一个打开菜单的按钮。该按钮在Firefox上看起来不错，但是当我检查勇敢或镀铬时，按钮元素似乎滑出，我无法查明它是什么...

这是里面带有元素的按钮。

<button id="add-menu">
        <img src="plus.png" height="40px" id="plus-minus-icon"><p>Add New Menu</p>
    </button>

这是CSS代码，希望对您有所帮助。

#add-menu {
grid-area: 5 / 1 / 5 / 3;
height: 100%;
width: 80%;
background-color: #333333;
border-radius: 25px;
justify-self: center;
display: flex;
align-items: center;
border: 1px solid black;

z-index: 1;
}
#add-menu img {
margin-left: 5px;
}
#add-menu p {
color: white;
font-size: 24px;
line-height: 50px;
}

Answer 1

使用 -webkit-和 -moz-解决此问题。

请在这里查看：what-are-moz-and-webkit

Answer 2

请注意按钮，字段集的某些已知问题，以及具有显示柔性或网格的其他问题。您可以浏览此问题here。

也许在较新版本的chrome中，他们解决了这个问题，这就是为什么@ sumeshsn1看起来不错的原因。

因此，为了解决此问题，请将按钮内容包装在span元素上，并在其中添加flex属性：

<button class="button">
  <span class="button__wrapper">
    <img class="button__image" aria-hidden="true" src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/7-128.png">
    <span class="button__label">Add New Menu</span>
  </span>
</button>

一些注意事项：

我删除了ID并添加了类，因为这将帮助您维护代码，并使您可以在成为有效文档的同时使用html上的多个按钮（应该在文档中只有一个id）。
由于图像的用途只是按钮功能的视觉提示，因此可以向图像元素添加aria-hidden=true属性。
删除内联样式（图像标签上的height属性）。

现在，让我们回顾一下CSS：

.button {
  height: 100%;
  width: 80%;
  background-color: #333333;
  border-radius: 25px;
  border: 1px solid black;
}

.button__wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.button__image {
  margin-right: 5px;
  height: 40px;
}

.button__label {
  color: white;
  font-size: 24px;
  line-height: 50px;
}

一些注意事项：

删除grid-aria声明，因为此属性仅在使用display: grid元素时才有意义，而您不需要。
也要删除z-index，因此您需要解决此属性。

我也使用BEM编写了此代码段。您可能想看一下这种方法的工作原理以及它如何为您here提供帮助。

您可以找到更新的笔here。

按钮元素滑出（镀铬）

2 个答案: