搜索欄無法在Safari中使用？

Question

好的，我不知道該怎麼做。我有這個搜索欄問題。我的網站是kissoff.weebly.com，該網站適用於IE，Chrome，Firefox，Opera，Seamonkey--但由於搜索欄的原因，它不兼容safari。

我需要將搜索欄向右推，就像它在IE，Chrome，Firefox，Opera中的樣子一樣。以下是Safari中的網站截圖：http://files.andrewjudd.ca/kiss-off-search.png

Darn Safari。有任何想法嗎？我會分享我的搜索欄和導航欄的css & html，但我真的很感謝任何人檢查我的網站的完整CSS/HTML。

#navigation { 
position: fixed; 
margin-top: 0; 
left: 0; 
top: 0; 
right: 0; 
width: 100%; 
color: #ffffff; 
height: 35px; 
text-align: center; 
padding-top: 15px; 
/* Adds shadow to the bottom of the bar */ 
-webkit-box-shadow: 0px 0px 8px 0px #000000; 
-moz-box-shadow: 0px 0px 8px 0px #000000; 
box-shadow: 0px 0px 8px 0px #000000; 
/* Adds the transparent background */ 
background-color: rgba(125, 180, 18, 0.8); 
color: rgba(1, 1, 1, 0.8); 
z-index: 900; 
    } 


    #search { 
display: inline; 
    } 
    #search input[type="text"] { 
display: inline; 
background: url(search-white.png) no-repeat 10px 6px #fcfcfc; 
border: 1px solid #d1d1d1; 
position: fixed; 
margin-left: 450px; 
margin-right: 0px; 
margin-top: 0px; 
color: #bebebe; 
width: 150px; 
padding: 6px 15px 6px 35px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 
transition: all 0.7s ease 0s; 
} 

    #search input[type="text"]:focus { 
width: 200px; 
margin-right: 200px; 
-o-margin-right: 10px; 
display: inline; 
} 

/*SNIPPET OF HTML FOR NAVIGATION BAR & SEARCH HERE:*/ 
    <div id="navigation"> 
<div id="title"> 
KISS OFF 
</div> 
<form method="get" action="/search" id="search"> 
<input name="q" type="text" size="40" placeholder="Search..." /> 
</form> 
<a href="#">Home</a> 
<a href="#">Login</a> 
<a href="#">Register</a> 
<a href=#terms>Terms</a> 
</div> 

感謝您的期待，我很感激。 :) --Dijji

Answer 1

你可以嘗試改變這一點：

#search input[type="text"]{ 
... 
margin-left: 450px; 
margin-right: 0px; 
.... 
} 

到

#search input[type="text"]{ 
... 
float: right; 
margin-right: 0px; 
... 
} 

希望這個解決方案可以幫助你。