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

그것은 나에게 보인다 input [type = text]와 input [type = image]처럼 둘 다 컨테이너에 맞지 않습니다. 입력 [type = text]의 위쪽 여백은 아래로 밀어 내리고 있습니다.

양식의 너비를 약간 넓게 만드는 것은 IE8에서 트릭을 수행하는 것처럼 보입니다.

IE6을 지원하려면 깨진 상자 모델을 기억하고 동일한 요소에 여백과 여백을 모두 지정하지 마십시오.