0

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

在此处输入图像描述

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

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

这是该页面的工作版本。

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

4

2 回答 2

1

几个想法：

  1. 你依靠一种字体来制作放大镜……那是有风险的。一些设备不支持@face 字体（用 Droid Sans 替换 Glyphicons，你会看到你的一些用户会得到什么 - 填充无关紧要）

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

  3. 您是否尝试过使用{ background:url('mag-glass') }

我有 50 美元说你的问题与歌剧如何渲染该字体或该字体的行高有关。是的 - 为 Opera 修复该问题将提升 FF、Chrome 和 Safari。

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

于 2012-12-26T05:43:18.057 回答
0

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

我建议您使用良好的 css 重置和输入容器，例如

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

它打破了几个规则 - “不要混合 html 和样式”，但它有效；]

记住 :focus 大纲。

于 2012-12-26T20:39:19.417 回答