html - SafariのCSSリンクが並んでいません

Question

Safari に問題があります。2 行目の入力とリンクは、Safari を除くすべてのブラウザで同じ行にあります。理由はありますか？

HTML

<div id="searchWrapper01">
<div id="regulationsSearch">
    <span class="item01">Traži u:</span>
    <select class="item02">
        <option value="0">Naslovu i tekstu</option>
        <option value="1">Naslovu</option>
    </select>
    <input type="text" class="item03" /><a href="/#search" onclick="vent.trigger('loadData:searchRegulationsResults')" class="item04">Traži</a>
</div>

jsfiddle.net

Answer 1

ブラウザーやバージョンなどによって 1 ピクセルの違いが生じることがあります。これは、マージンとフロートを使用しているためです。display: inline-blockこの場合は代わりに使用してください。

デモjsFiddle

#regulationsSearch .item03{
    display: inline-block;
    position:relative;
    width:181px;
    height:24px;
    border:solid 1px #333;
    padding:0 5px;
    margin:5px 5px 0 0;
    outline:none;
}
#regulationsSearch .item04{
    display: inline-block;
    position:relative;
    width:60px;
    height:26px;
    text-align:center;
    line-height:26px;
    background-color:#333;
    color:#fff;
    text-decoration:none;
    margin:5px 0 0 0;
    font-size:12px;
}