html - Safari 中的输入/按钮呈现不一致

Question

我正在为一个输入字段使用 flex 布局，它的右边有一个按钮。它在 Chrome 和 Firefox 中运行良好，但在 Safari 中表现奇怪。我添加了代码笔链接以查看问题。

http://codepen.io/e-man/pen/GWpXbJ

如果您在 Chrome 中查看笔并调整窗口大小，它会缩放并保持一致。如果你在 Safari 中做同样的事情，你会看到提交按钮和输入字段之间有一个小间隙。此外，当您缩小浏览器时，您会看到提交按钮文本被截断。试图找到一种方法使这在所有 3 个浏览器中保持一致。

HTML 文件

<div class="container">
<form class="input-group"><input placeholder="Search For Videos" value=""><span class="input-group-btn"><button type="submit" class="btn">Submit</button></span></form>
</div>

Scss 文件

$border-radius: 4px;
$search-font-size: 14px;
$search-padding: 10px;

.input-group{
  position: relative;
  display: flex;
  display: -webkit-flex;
  width: 100%;

  input{
    display: block;
    width: 100%;
    padding: $search-padding;
    font-size: $search-font-size;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d2d1d1;
    border-radius: $border-radius;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    outline: none;
  }
  .input-group-btn{
    position: relative;
    vertical-align: middle;
    margin-left: -1px;
    z-index: 2;
    white-space: nowrap;
    display: flex;
    display: -webkit-flex;

    .btn{
      display: inline-block;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      outline: none;
      border: 1px solid transparent;
      padding: $search-padding;
      font-size: $search-font-size;
      border-radius: $border-radius;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      background-color: #fff;
      border-color: #ccc;
    }
  }
}

代码笔的屏幕截图显示当窗口缩放到小尺寸时 Safari 在按钮右侧剪切文本。

---

-- 更新--由于 Michael_B 关于 flex-shrink 属性的评论，问题得到了解决。

从 .input-group-btn 中删除以下内容

• 显示: flex ；
• 显示:-webkit-flex;

我已经在 parent 身上设置了这些，所以在这种情况下需要在 child 身上设置它们。

然后将以下内容添加到.input-group-btn

• -webkit-flex-shrink: 0;
• flex 收缩:0；

这解决了 Safari 中的问题。

Answer 1

将此添加到您的代码中:

.btn { margin-left: 0; }