Question

我的搜索表单应如下所示：

enter image description here

这是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 Responsive样式，以及搜索表单的以下样式：

.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正在呈现如下形式：

enter image description here

有问题的Opera版本是12.02。

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

这是working version of the page。

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

Answer 1

几点想法：

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

我有50美元，说你的问题与歌剧渲染该字体的方式或该字体的行高有关。是的 - 确定Opera的功能将会支持FF，Chrome和Safari。

另外，我嗡嗡作响你的CSS文件，并没有看到CSS重置。有关详细信息，请参阅Eric Meyer的CSS重置。当一切都在重置中被“均衡”时，会带走很多小问题。

Answer 2

输入始终会导致跨浏览器css出现问题。

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

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

它违反了几条规则 - “不要混合html和样式”，但它有效;]

记住：焦点轮廓。

输入填充跨浏览器问题？

2 个答案: