Question

我创建了一个小型可重用的类来处理网站上的所有按钮，使它们统一。该按钮使用display:inline-flex和min-width以及其他似乎无关的其他样式。

在测试过程中，我注意到在Safari上，任何与我班级在一起的<button>都没有正确地将其子元素居中。问题似乎出在min-width: 200px上，将其删除或将其放在子元素上，反而使所有视觉行为返回其预期状态。

我还注意到，如果我颠倒了供应商前缀的顺序，Safari将正确地将元素居中。但是，这会对具有额外子元素的按钮产生副作用。

这是生成我的按钮的代码的片段。

body {
  margin: 15px;
}

body .base-btn {
  font-size: 16px;
  font-weight: 400;
  font-family: Tahoma, Arial, Helvetica, Sans-serif;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  line-height: 1.15;
  max-width: 100%;
  min-width: 200px;
  height: 56px;
  background-color: #2A51A0;
  padding: 10px 15px;
  border: 0px;
  border-radius: 20px;
  cursor: pointer;
  -webkit-transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
body .base-btn > span {
  display: block;
  position: relative;
  pointer-events: none;
}
body .base-btn:active, body .base-btn:focus, body .base-btn:hover {
  color: #2A51A0;
  text-decoration: none;
  background-color: #000;
  display: inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: -webkit-inline-box;
}
body .base-btn + .base-btn {
  margin-left: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body">
  <button type="button" class="base-btn"><span>Click me</span></button>
  <a href="#void" class="base-btn"><span>Click me</span></a>
</div>

按钮的子元素未在Flexbox的Safari中正确居中

0 个答案: