输入填充跨浏览器问题？答案

【问题标题】：Input Padding Cross-Browser Issue?输入填充跨浏览器问题？
【发布时间】：2012-12-11 16:54:47
【问题描述】：

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

这是 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 上。

【问题讨论】：

我想测试一些行高修复，但将我的 Opera 22 指向您的 Dropbox 示例页面并且不再可用。

标签： html css twitter-bootstrap cross-browser

【解决方案1】：

几个想法：

您依靠字体来制作放大镜... 有风险。某些设备不支持@face 字体（替换 Glyphicons 使用 Droid Sans，你会看到你的一些用户会做什么 get - 填充无关紧要）
您是否尝试过使用<input type="image"...>
您是否尝试过使用{ background:url('mag-glass') }

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

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

【讨论】：

谢谢，它确实最终成为不同浏览器如何呈现字体的问题。我最终使用了background-image。

【解决方案2】：

输入总是会导致跨浏览器 css 出现问题。

我建议你使用好的 css 重置和输入容器，比如

<div class="input-border">
    <input type="text" name="cokolwiek">
</div>

它违反了一些规则 - “不要混合 html 和样式”，但它有效；]

记住 :focus 大纲。

【讨论】：