0

我在我的网站上实施了 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;
  }

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

谢谢。

4

1 回答 1

1

我无法尝试，（我没有 osx safari）但我在其他浏览器早期遇到了几乎相同的问题，这解决了问题：

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

我认为这两个元素不需要绝对定位。如果这没有帮助，我删除此评论。这只是一个想法。

于 2013-03-05T15:44:59.483 回答