0

私のサイトにはajax検索候補が実装されており、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 サファリを持っていません)。

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

この 2 つの要素には、絶対的な位置付けは必要ないと思います。これが役に立たない場合は、このコメントを削除します。これは単なるアイデアでした。

于 2013-03-05T15:44:59.483 に答える