Question

晚上，

HTML：

<input type="text" class="search" value="Search"><input type="button" class="searchimg" value="Search" />

CSS：

input.search {
    font-size: 1em;
    color: #383838;
    margin: 7px 0 0 7px;
    padding: 3px;
    border: 1px solid #969696!important;
    background: #FEFEFE!important;
    height: 16px;
    width: 250px;
} 

input.searchimg { 
   text-indent: -99999px;
   width: 24px; 
   height: 24px; 
   display: inline;
   background: url(../images/search.jpg) 0 0 no-repeat;
   border: 0px;
   margin: 7px 0 0 0;
}

（search.jpg尺寸：24x24px，1px边框是图片的一部分，而不是CSS！http://img267.imageshack.us/img267/6779/searchr.png）

顶级版本显示了它应该如何呈现，底部图片显示了它在所有broswers中的实际呈现方式。它比它应该的高2px。我不确定为什么会这样做。

感谢。

Answer 1

尝试删除行margin: 7px 0 0 7px;

Answer 2

在vertical-align:top上尝试input.search { ... }这应该有效，因为您的输入会受（上一个？）内联样式的影响。

对于未来：对使用display:inline-block样式的元素进行操作更容易，并且它在浏览器中得到很好的支持（IE 7需要一个小的黑客，IE 6应该已经死了）。

CSS位置问题

2 个答案: