Элементы кнопок выдвигаются (chrome)

Question

Я работаю над небольшим проектом, где я хочу добавить кнопку, которая открывает меню. Кнопка отлично смотрится на Firefox, но когда я проверяю на храбрость или chrome элементы кнопки, кажется, выскальзывают, и я не могу точно определить, что это ...

Кнопка на Firefox

Кнопка на Chrome

Это кнопка с элементами внутри.

<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

Имейте в виду некоторые известные проблемы с кнопками, набором полей и некоторыми другими, когда у вас есть дисплей сгибания или сетки. Вы можете получить представление об этой проблеме здесь .

Может быть, в более новых версиях 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>

Некоторые примечания:

• Я удаляю идентификатор и вместо этого добавьте классы, так как это поможет вам поддерживать ваш код и позволит вам использовать несколько кнопок на вашем html, будучи действительным документом (у вас должен быть только один идентификатор в документе).
• Поскольку назначение изображения - это всего лишь визуальная подсказка для функции кнопки, давайте добавим атрибут aria-hidden=true к элементу изображения.
• Удалим встроенные стили (атрибут высоты, который есть в вашем теге изображения).

Теперь давайте рассмотрим 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, который вы не делаете. * 1 029 *
• Удалите также z-index, вам нужно связываться с этим свойством для вашей проблемы.

Я также написал этот фрагмент, используя BEM. Возможно, вы захотите взглянуть на то, как работает эта методология и как она может помочь вам здесь .

Вы можете найти обновленную ручку здесь .

Answer 2

Используйте -webkit- и -moz- для решения этой проблемы.

Пожалуйста, посмотрите здесь: what-are-moz-and -webkit