css - Opera、Safari、FF 和 IE 之间的像素差异

Question

我有以下代码：

<div id="search">
    <form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
        <input type="text" name="keyword" size="35" class="rounded" style="width: 320px;" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
        <input id="searchSubmit" type="submit" value="" />
    </form>
</div>

和

input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 18px;
padding: 2px 7px;
outline: 0;
-webkit-appearance: none;
behavior: url(PIE.htc);
z-index:10;
}

input.rounded:focus {
border-color: #339933;
}

#searchSubmit{
background: transparent url(button_search.gif) no-repeat;
width: 21px;
height: 21px;
border: none;
cursor: pointer;
margin-left: -23px; /* image is 20x20px, so leave little extra */
margin-top: 2px; /* leave some space from the top, so button looks in the middle */
z-index:1;
}

编辑：这是提交按钮的链接：http ://traditionalirishgifts.c​​om/button_search.gif

但我无法让提交按钮在 FF、Opera、IE 和 Chrome 中正确排列。我试过摆弄它，但我束手无策。

解决这个问题的唯一方法是进行浏览器黑客攻击，然后我会在不同版本的浏览器之间遇到问题吗？

Answer 1

我稍微简化了 CSS 以使其更易于管理并向您展示我的方法：

http://jsfiddle.net/G8wcP/

<div id="search">
    <form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
        <input type="text" name="keyword" size="35" class="rounded" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
        <input id="searchSubmit" type="submit" value="" />
    </form>
</div>​

#search{ 
    width:207px;
    position:relative;
    display:block;
    border:1px solid #ccc;
}

input.rounded {
    display:block;
    width:180px;
    height:30px;
    border:0;
}

#searchSubmit{
    display:block;
    position:absolute;    
    left:180px;
    top:5px;   
    background: red;
    width: 20px;
    height: 20px;
    cursor: pointer;
}​

正如您已经见证的那样，您采用的方法可能无法经受住跨浏览器的考验。

基本上，使用边框设置#search div 的样式。相对定位输入（文本）元素，然后绝对定位提交元素。如果您愿意，您可以相对定位这两个元素。

Answer 2

见http://jsfiddle.net/KUWYY/1/

添加

input{
    vertical-align:middle;
}

并删除

#searchSubmit{
    margin-top: 2px;
}