我正在为一个输入字段使用 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 中的问题。
最佳答案
将此添加到您的代码中:
.btn { margin-left: 0; }
关于html - Safari 中的输入/按钮呈现不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42520214/