Divと入力がSafariで正しく調整されていません

Question

divと入力を隣り合わせに並べると、アイコン付きの古典的な入力が作成できます。私はサファリ/ 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/