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

中删除以下内容

• display：flex;
• display：-webkit-flex;

我已经在父级上设置了这些，所以在这种情况下需要在子级上设置它们。

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

• -webkit-flex-shrink：0;
• flex-shrink：0;

这解决了Safari中的问题。

Answer 1

将此添加到您的代码中：

.btn { margin-left: 0; }