CSS 仅在 Firefox 中有效

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] 都无法放入容器中，并且 input[type=text] 的上边距正在向下推。

在 IE8 中使窗体的宽度稍宽一点似乎可以解决问题。

如果您要支持 IE6，请记住破盒模型，并且不要在同一元素上同时指定填充和边距。