CSS：当div展开时，图片在safari中移动

我在我的网站上实现了一个ajax搜索建议，并且它在Chrome上运行平稳。这就是它应该如何看，这就是它的外观上镀铬：CSS：当div展开时，图片在safari中移动

enter image description here

然而，在Safari浏览器，搜索图像跳下来：

enter image description here

这里是我的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; 
    }

我该如何使它不会跳来跳去呢？任何想法，将不胜感激！

谢谢。

来源

2013-03-05 Lukas Bijaminas

我不能尝试，（我没有OSX版Safari浏览器），但我在其他浏览器遇到了几乎同样的问题earlyer，这解决了这一问题：

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

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

来源

2013-03-05 15:44:59 Kovge

'位置：静态'确实使它不会移动，但现在我怎样才能移动按钮？因为margin-top，也会移动搜索栏，所以使用CSS精灵不能正确显示填充顶部，top不能用于静态位置。 – 2013-03-05 15:55:31

没关系，边缘顶部确实有效！真棒，谢谢:) – 2013-03-05 15:59:30

是的，边缘顶部;）你欢迎。 – Kovge 2013-03-05 16:26:38

CSS：当div展开时，图片在safari中移动

回答

相关问题