在Safari

Question

将div和输入相邻对齐以创建带图标的经典输入时遇到问题。但是，当我使用Safari / Mac和Safari / iOS时，它看起来像这样：

Broken in Safari

......我无法理解它！它在Chrome上很好用，我试过玩浮标，垂直对齐（不知道这是多么相关），但仍然没有。

HTML：

<div class="input-with-icon">
    <div class="icon">X</div>
    <div class="input"><input type="text" placeholder="Start typing to find a customer..."></div>
</div>

CSS：

.input-with-icon .icon {
    float: left;
    background-color: #fff;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: 1px solid #dcdcdc;
    padding: 13px 0 14px 10px;
    color: grey;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
}

.input-with-icon .input {
    overflow: hidden;
}

.input-with-icon input[type="text"]{
    -webkit-appearance: none;
    width: 100%;
    outline: none;
    font-size: 16px;
    padding: 13px;
    font-family: 'Roboto Light', sans-serif;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: 0;
    border-radius: 0 5px 5px 0;
}

这是一个小提琴，如果这可以帮助你们使用我的代码 - 出于某种原因，正确的边框不想在小提琴上工作，但不会因为它在其他任何地方都很好而烦恼。

https://jsfiddle.net/r08gxre3/1/

非常感谢任何帮助，谢谢你们！ ：）

Answer 1

只需添加margin: 0px;到你的输入元素。它应该是！

像：

.input-with-icon input[type="text"]{
    -webkit-appearance: none;
    width: 100%;
    outline: none;
    font-size: 16px;
    padding: 13px;
    font-family: 'Roboto Light', sans-serif;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: 0;
    border-radius: 0 5px 5px 0;
    margin: 0px;
    /* or just margin-top: 0px; */
}

小提琴： https://jsfiddle.net/bbdkzuyn/