0

私はこの本当に奇妙な問題を抱えています。ボタンと入力には同じ CSS (背景を除く) がありますが、Firefox はそれらを異なる方法でレンダリングします。IE や Chrome では問題ありません。

#searchInput {
    width: 80%;
    margin: 0 auto;
    display: block;
    height: 40px;
    border: 1px solid #D8D8D8;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
}
#searchButton {
    width: 80%;
    margin: 4px auto;
    display: block;
    height: 40px;
    border: 1px solid #D8D8D8;
    font-size: 1rem;
    padding: 10px;
    text-align: center;
    background: #F2F2F2;
    cursor: pointer;
}

コンテナー CSS も含めました。両方とも同じです。

.section {
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    background-color: #FAFAFA;
    border-radius: 5px;
    border: 1px solid #D8D8D8;
    padding: 30px;
    position: relative;
}
.toggleIcon {
    width: 28px;
    height: 20px;
    top: 0;
    right: 10px;
    position: absolute;
    border-radius: 5px;
    background: #FAFAFA;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #D8D8D8;
    cursor: pointer;
    box-sizing: content-box;
}

HTML:

<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
    <img id='logo' src='img/logo.png'>
    <form id='searchForm'>
        <input type='text' id='searchInput' name='searchInput'>
        <button type='submit' id='searchButton' name='searchButton' value='Search'>
            <img src='img/icons/glyphicons_027_search.png' alt='Search'>
        </button>
    </form>
    <div id='searchResults'></div>
</div>

注意！ナビゲーションには PageSlide を使用し、検索には AJAX を使用しています

4

2 に答える 2

0

あなたの最後のコメントに基づいて...

マージンは私の問題を引き起こしません。問題は、入力がはるかに広くて高いことです

プロパティを追加する必要がありますbox-sizing:border-boxinput#searchInput

お気に入り：

#searchInput {
    ....
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
}

作業例: http://jsfiddle.net/XLyBR/1/

于 2013-08-05T10:09:01.283 に答える
0

マージンは、searchInput および searchButton css クラスで異なります

また、これらの要素のデフォルトの css line-height はどうですか - それらは異なりますか - line-height を指定してみてください。

羽

ところで - レンダリングの違いを教えていただけると助かります

于 2013-08-05T09:45:20.843 に答える