CSS:当div扩展时，图像在safari中移动

Question

我在我的网站上实现了一个 ajax 搜索建议，它在 chrome 上运行顺利。 这就是它应该的样子，这就是它在 chrome 上的样子:

然而，在 Safari 上，搜索图像会向下跳转:

这是我的 div HTML:

<div class ='searchBox'>
<form>
<input id = 'searchInput' type = 'text' placeholder = 'Search'> 
<img id = 'goSearch' class ='sprites'/>
<div class = 'liveSearch'></div>
</form>
</div>

这是我的 CSS:

 .mainContainer .sideContainer .searchBox{
    margin-top:2%;
    background-color:rgb(188, 190, 192);
    position:relative;
    display:table;
    -moz-border-radius: 0.125em;
    -webkit-border-radius: 0.125em;
    padding-bottom:10%;
    width:100%;
    min-width:220px;
    letter-spacing: 0.0625em;
 }
 .mainContainer .sideContainer .searchBox #searchInput{
    letter-spacing: 0.0625em;
    background: rgb(241, 242, 242);
    color: rgb(109, 110, 113);
    font-size: 1em;
    -moz-border-radius: 0.125em;
    -webkit-border-radius: 0.125em;
    border:#aaaaaa 0.0625em solid;
    width:75%;
    padding-top:4px;
    padding-left:2px;
    height:21px;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
    position:relative;
    min-width:75%;
    margin-top:5%;
    left:5%;
    font-family: 'utsaah';
 }
 .mainContainer .sideContainer .searchBox #goSearch{
    width:28px;
    height:28px;
    left:82%;
    margin-top:5%;
    background-position: -0px -0px;
    position:absolute;
    cursor:pointer;
 }
 .mainContainer .sideContainer .searchBox #goSearch:hover{
    background-position:-0px -38px;
 }
 .mainContainer .sideContainer .searchBox .liveSearch{
    text-decoration: none !important;
    color: rgb(188, 190, 192);
    width:73%;
    left:5.5%;
    position:relative;
  }

我怎样才能让它不跳来跳去？任何想法将不胜感激!

谢谢。

Answer 1

我无法尝试，(我没有 osx safari)但我在其他浏览器中遇到了几乎相同的问题，这解决了问题:

   #searchInput, #goSearch{
       position: static;
       display: inline-block; /*and this may needed */
       vertical-align: top; /*and this*/
       margin: 0px;
   }

我觉得这两个元素不需要绝对positionong。 如果这没有帮助，我将删除此评论。这只是一个想法。