2012-06-30 71 views
0

問題是搜索按鈕是在下一行而不是pf側輸入,這只是在ie7中,在所有瀏覽器中都能正常工作 #search-form {#} background#e1e1e1;/*非css3瀏覽器的備用顏色*/ width:365px;在IE7中搜索欄對齊

/* Gradients */ 
background: -webkit-gradient(linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225))); 
background: -moz-linear-gradient(center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%); 

/* Rounded Corners */ 
border-radius: 17px; 
-webkit-border-radius: 17px; 
-moz-border-radius: 17px; 

/* Shadows */ 
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); 
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); 
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); 
} 

/*** TEXT BOX ***/ 
input[type="text"]{ 
background: #fafafa; /* Fallback color for non-css3 browsers */ 

/* Gradients */ 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230))); 
background: -moz-linear-gradient(center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%); 

border: 0; 
border-bottom: 1px solid #fff; 
border-right: 1px solid rgba(255,255,255,.8); 
font-size: 16px; 
margin: 4px; 
padding: 5px; 
width: 250px; 

/* Rounded Corners */ 
border-radius: 17px; 
-webkit-border-radius: 17px; 
-moz-border-radius: 17px; 

/* Shadows */ 
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); 
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); 
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); 
} 

/*** USER IS FOCUSED ON TEXT BOX ***/ 
input[type="text"]:focus{ 
outline: none; 
background: #fff; /* Fallback color for non-css3 browsers */ 

/* Gradients */ 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235))); 
background: -moz-linear-gradient(center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); 
} 

/*** SEARCH BUTTON ***/ 
input[type="submit"]{ 
background: #44921f;/* Fallback color for non-css3 browsers */ 

/* Gradients */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21))); 
background: -moz-linear-gradient(center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); 

border: 0; 
color: #eee; 
cursor: pointer; 
float: right; 
font: 16px Arial, Helvetica, sans-serif; 
font-weight: bold; 
height: 30px; 
margin: 4px 4px 0; 
text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
width: 84px; 
outline: none; 

/* Rounded Corners */ 
border-radius: 30px; 
-webkit-border-radius: 30px; 
-moz-border-radius: 30px; 

/* Shadows */ 
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); 
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2); 
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); 
} 
/*** SEARCH BUTTON HOVER ***/ 
input[type="submit"]:hover { 
background: #4ea923; /* Fallback color for non-css3 browsers */ 

/* Gradients */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); 
background: -moz-linear-gradient(center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); 
} 
input[type="submit"]:active { 
background: #4ea923; /* Fallback color for non-css3 browsers */ 

/* Gradients */ 
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); 
background: -moz-linear-gradient(center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); 
} 

回答

0

在div其中輸入提交和輸入文本是可能太小(寬度)爲IE7,因此使用不同的樣式表爲IE7,並定義不同的屬性的寬度IE7。你只發布了輸入框的CSS,但我猜。無論如何,嘗試將float左或右也用於輸入[type =「text」]並同時提交,提交和文本輸入,display:block;並定義它們的寬度和高度,也許線條高度ie7在px中。