html - 输入填充跨浏览器问题？

Question

我有一个应该如下所示的搜索表单:

这是 HTML:

<form method="post" action="#" class="search-form">
    <input type="text" class="nav-search-input input-initial" data-initial='Search' value="Search">
    <input type="submit" class="nav-search-submit" value="&#57384;"><!-- &#57384; is the code for the Glyphicons search icon -->
</form>

我正在使用 Bootstrap 和 Bootstrap 响应式样式，以及搜索表单的以下样式:

.search-form{
    display: block;
    margin: 0;
}

input.nav-search-input,
input.nav-search-submit{
    color: #eeeeee;
    background-color: #181818;

    border-top: 1px solid #303030;
    border-bottom: 1px solid #303030;
}

input.nav-search-input{
    width: 90px;
    height: 20px;

    -moz-transition:border-color 75ms;
    -o-transition:border-color 75ms;
    -webkit-transition:border-color 75ms;

    outline: 0!important;
    -webkit-appearance:none!important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    margin-top: 10px;

    padding: 0px 0px 0px 8px;

    line-height: normal;
    font-weight: normal;
    font-size: 14px;

    border-right: none;
    border-left: 1px solid #303030;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;


    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;

    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;

}

input.nav-search-submit{
    font-family: Glyphicons;

    box-sizing: content-box;

    padding: 0px 6px 0px 5px;

    color: #aaaaaa;

    -moz-transition:border-color 75ms;
    -o-transition:border-color 75ms;
    -webkit-transition:border-color 75ms;

    border-left: none;
    border-right: 1px solid #303030;

    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;

    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}

这在 Chrome、Firefox 和 Safari 上运行良好，但 Opera 呈现的表单如下:

有问题的 Opera 版本是 12.02。

这似乎是填充的问题。我已经尝试了 this question 中列出的解决方案无济于事。如果我增加顶部和底部填充以使其在 Opera 中看起来正确，它在其他浏览器中看起来不再正确。

这是一个working version of the page .

旁注，我没有在 IE 中测试过，因为我在 Mac 上。

Answer 1

一些想法:

1. 您依靠一种字体来产生放大镜……那是有风险。有些设备不支持@face 字体(替换 Glyphicons使用 Droid Sans，你会看到你的一些用户将要做什么get - 填充无关紧要)

2. 您只是尝试过使用 <input type="image"...>

3. 你试过使用{ background:url('mag-glass') }吗？

我有 50 美元说你的问题与 Opera 如何呈现该字体或该字体的行高有关。是的——为 Opera 修复这个问题将会提升 FF、Chrome 和 Safari。

此外，我浏览了您的 CSS 文件，但没有看到 CSS 重置。有关详细信息，请参阅 Eric Meyer 的 CSS 重置。当一切都在重置中“均衡”时，消除了很多小麻烦。