只能在Firefox中使用的CSS

Question

我正嘗試在Apple website上創建搜索文本字段。

的HTML看起來像這樣：

<div class="frm-search"> 
    <div> 
    <input class="btn" type="image" src="http://www.wdmadvertising.com.au/preview/cfs/i/btn-search.gif" /> 
    <input type="hidden" name="cx" value="012437731193502990522:kx_jllw0ckq" /> 
    <input type="hidden" name="cof" value="FORID:11;NB:1" /> 
    <input type="hidden" name="ie" value="UTF-8" /> 
    <input class="btn text" type="text" name="q" size="30" /> 
    <input type="submit" class="hide" name="sa" value="Search" /> 
    </div> 
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box"></script> 
</div> 

的CSS是這樣的：

.header .frm-search{ 
width:178px; 
/* overflow:hidden; */ 
padding:0 18px 0 0; 
float:right; 
background:none; 
/* border-right:1px solid #a9a8a9; */ 
} 
.header .frm-search .text{ 
background:url(../i/bg-search.gif) no-repeat; 
float:right; 
margin:10px 0 0; 
width:158px; 
padding-top: 5px; 

} 
.header .frm-search .text input{ 
width:148px; 
border-style:none; 
background:none; 
font:12px/13px "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif; 
padding:5px; 
color:#a2a2a2; 
} 
.header .frm-search .btn { 
float:left; 
margin:10px 0 0; 
border: 0; 
height: 23px; 
display: block; 
margin-top: 0; 
} 

#searchresults { 
padding-left: 40px; 
} 

.header input.button { 
display: none; 
} 


div.header input.hide { 
display: none; 
} 

並實時預覽看起來像這樣：[鏈接刪除]

Answer 1

在我看來像輸入[type = text]和輸入[type = image]都不適合容器，並且輸入[type = text]的頂部邊距正在縮小。

使窗體的寬度稍寬一點似乎在IE8中訣竅。

如果您要支持IE6，請記住破損的盒子模型，並且不要在同一元素上指定填充和邊距。