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，请记住损坏的盒子模型，并且不要在同一元素上指定填充和边距。

CSS仅适用于Firefox

1 个答案: