CSS位置问题

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 dimentions：24x24px，1px的边界是图像的一部分，而不是CSS http://img267.imageshack.us/img267/6779/searchr.png）

顶级版本显示它应该如何渲染，底部图片显示了它是如何交流在所有的交响乐中都可以进行渲染。它比它应该高2px。我不确定它为什么这样做。

谢谢。

来源

2012-01-15 Tom

也许试试'outline：0;'？ – motoxer4533 2012-01-16 00:04:44

我什么也不害怕。 – Tom 2012-01-16 00:12:37

经过铬15测试，并按预期工作。用另一个24像素x 24像素图像替换搜索图像。见http://jsfiddle.net/C4ayu/ – 2012-01-16 00:21:38

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

来源

2012-01-16 00:07:38

这没有效果。它仍然没有正确渲染。 – Tom 2012-01-16 00:12:22

上input.search { ... }这个尝试vertical-align:top应该工作，因为你的输入由（前？）内嵌样式的影响。对于未来：使用display:inline-block样式的元素更容易操作，并且它在浏览器中得到很好的支持（IE 7需要小小的破解，IE 6应该已经死了）。

来源

2012-01-16 00:17:58 veritas

它不会允许我回答我自己的问题，但我现在已更正此问题。已解决此问题。作为参考：已通过编辑input.search类中的填充来更正为 \t padding-top：5px; 谢谢。 – Tom 2012-01-16 00:20:44

CSS位置问题

回答

相关问题