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

我在玩flex布局，输入字段的右边有一个按钮。它在Chrome和Firefox中工作得很好，但在Safari中表现得很奇怪。 我添加了一个代码笔链接来查看问题

如果您在Chrome中查看画笔并调整窗口大小，它将缩放并保持在一起。如果您在Safari中也这样做，您将看到submit按钮和输入字段之间有一个微小的间隙。此外，当您缩小浏览器时，您将看到“提交”按钮文本被截断。 试图找到一种方法，使这三种浏览器都保持一致

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>

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

---

--更新-- 由于Michael_B对flex shrink属性的评论，问题得以解决

从中删除以下内容。输入组btn

• 显示器：flex
• 显示：-webkit flex

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

然后将以下内容添加到。输入组btn

• -webkit flex收缩：0
• 弹性收缩：0

这解决了Safari中的问题。

将此添加到代码中：

.btn { margin-left: 0; }

---

这对于差距问题非常有效，但我提到的第二个问题仍然存在。“当您缩小浏览器时，您将看到提交按钮文本被截断”。谢谢，我知道你提到的第二个问题。但在我的旅行中它并不存在。因此，我只讨论了我可以复制的问题。但是，考虑一下：Flex项默认设置为收缩（<代码> Flex收缩：1 < /代码>）。不妨考虑一下缩水。将此添加到您的项目中：

flex-shrink:0

。正如我前面所说，我无法复制第二个问题。可能提供更多细节或插图。删除显示：flex；从输入组btn解决了文字问题。但这反过来又导致按钮超出了父级宽度。这就是flex shrink:0修复该问题的地方。再次感谢你的帮助，迈克尔。见我的更新意见在我的职位以上。

.btn { margin-left: 0; }