Internet Explorer 8不正確地顯示搜索表單

Question

使用IE 8，我的搜索表單無法正確顯示。輸入字段太低。在Firefox，Chrome和Safari中，一切都很好。

這是我的HTML：

<form class="search" role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>"> 
<input type="text" placeholder="Suchen..." name="s" id="s" /> 
<input type="submit" id="searchsubmit" value="Start" /> 
</form> 

這是我的CSS：

.search { 
background: #F3F4F3; 
padding: 10px; 
width: auto; 
color: #666; 
font-size: 11px; 
line-height: 1.3em; 
padding-top: 10px; 
margin-bottom: 20px; 
margin-top: 0px; 

}

input { 
color:#fff; 
border:1px solid #B3B5B3; 
background:transparent; 
outline:none; 
height:21px; 
padding:0; 
margin: 0; 
padding: 0px 8px; 
font-family: $std-sans-font; 

}

input[type="text"] { 
color: #515b57; 

}

:-moz-placeholder { 
color:#515b57; 

}

::-webkit-input-placeholder { 
color:#515b57; 

}

input:focus { 
font-style: normal; 
@include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px); 

}

form { 
display:inline-block; 

}

input[type="submit"] { 
background:#B3B5B3; 
height:23px; 
border:0; 
&:hover, &:focus { 
    @include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px); 
} 

}

也許，有一個與填充有問題？

Answer 1

你只是缺少float property所以這種波紋管

input[type="text"] { 
    color: #515b57; 
    margin-right: 2px; 
    float: left; 
} 

input[type="submit"] { 
background:#B3B5B3; 
height:23px; 
float: left; 
&:hover, &:focus { 
    @include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px); 
}​ 

input::-moz-focus-inner 
{ 
    border: 0; 
    padding: 0; 
} 

編輯CSS和它應該工作。請參閱jsfiddle上的it。 input::-moz-focus-inner正確輸入text-align。

Answer 2

試試這個CSS，我已刪除填充：0從輸入

.search { 
background: #F3F4F3; 
padding: 10px; 
width: auto; 
color: #666; 
font-size: 11px; 
line-height: 1.3em; 
padding-top: 10px; 
margin-bottom: 20px; 
margin-top: 0px; 

} 
input { 
color:#fff; 
border:1px solid #B3B5B3; 
background:transparent; 
outline:none; 
height:21px; 
margin: 0; 
padding: 0px 8px; 
font-family: $std-sans-font; 

} 
input[type="text"] { 
color: #515b57; 

} 
:-moz-placeholder { 
color:#515b57; 

} 
::-webkit-input-placeholder { 
color:#515b57; 

} 
input:focus { 
font-style: normal; 
@include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px); 

} 
form { 
display:inline-block; 

} 
input[type="submit"] { 
background:#B3B5B3; 
height:23px; 
border:0; 
&:hover, &:focus { 
    @include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px); 
}