html - Safari css 链接不在行中

Question

我的 Safari 有问题。在第二行的所有浏览器中，输入和链接都在同一行，除了 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

有时浏览器、版本等之间可能存在 1px 的差异。这是因为您使用的是边距和浮动。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;
}