Html 带flex的内联表单，safari中的bug

我用flex创建简单的内联表单。 但在safari中，我发现一个错误-按钮失去宽度，以下是屏幕截图：

在所有其他浏览器中都很好

如何在safari中修复此错误？ 注：我无法设置按钮的固定宽度

这是我的密码：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <form action="" class="form-inline-flex">
        <div>
          <input type="text" />
        </div>
        <button type="submit" />Subscribe</button>
      </form>
      </div>
  </div>
</div>


.form-inline-flex{
    display: -ms-flexbox;
    display: -webkit-flex ;
    display: flex;
}

button{
  display:inline-block;
  padding: 13px 28px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 13px 20px;
  font-size: 16px;
  line-height: 1.375;
}

input{
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 7px 18px;
  line-height: 34px;
  color: #000;
  border: 1px solid #d2d1d1;
}

订阅
.表单内联flex{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
钮扣{
显示：内联块；
填充：13px28px；
字号：700；
文本对齐：居中；
光标：指针；
边框：1px实心透明；
填充：13px 20px；
字体大小：16px；
线高：1.375；
}
输入{
显示：块；
宽度：100%；
字体大小：14px；
填充：7px 18px；
线高：34px；
颜色：#000；
边框：1px实心#d2d1d1；
}

---

将此添加到您的按钮：

button {
  …
  flex: none;
}

---

考虑删除

div

围绕

input

的包装，制作

按钮

和

input

同级。如果需要围绕input的div，则可能需要引导中的某些内容。考虑运行自己的代码进行测试。（顺便说一句，

按钮

中的两个填充规则）Oops。我删除了一个填充，但它没有改变任何东西。