html - フォームボタンのスタイル、フォントサイズ、ボックスの影の問題

Question

入力テキスト フィールド以外のフォームでボタンのスタイルを設定しようとしています。ボタンのフォントサイズを下げて（これを行う必要があります）、ボタンに背景のグラデーションを付けない限り、すべてが機能します。font-size を下げる (または 1em 以外を設定する) と、ボタン テキストの下に神秘的なスペースができ、それがどこから来たのかわかりません。下げたフォントサイズに合わせてパディングを上げても、スペースはまだあります。ボタンにグラデーションを追加すると、周囲のフォームのボックス シャドウが消えます。

どうすれば両方を修正できますか?

これが実際の例です: http://jsfiddle.net/WTrQy/

HTML:

<section class="grid-100 search">
    <header class="none">
            <h1>Schnell finden</h1>

    </header>
    <form class="grid-90 grid-parent" action="action.php">
        <input type="text" aria-required="true" placeholder="Suche nach PLZ oder Ort" class="grid-80 mobile-grid-80">
        <button class="grid-20 mobile-grid-20">Suchen</button>
    </form>
</section>

CSS:

section.search h1 {
    margin-top: 1.7em;
    margin-bottom: .5em;
    font-size: 1.285714285714286em;
    text-transform: uppercase;
}

section.search form {
    margin-top: 1em;
    background-color: #353535;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;

    -webkit-box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
}

section.search form input, section.search form button {
    padding: 0.7em;
}

section.search form input {
    -webkit-border-radius: 0.2em 0 0 0.2em;
    -moz-border-radius: 0.2em 0 0 0.2em;
    border-radius: 0.2em 0 0 0.2em;
}

section.search form button {
    font-size: 0.7em;
    -webkit-border-radius: 0 0.2em 0.2em 0;
    -moz-border-radius: 0 0.2em 0.2em 0;
    border-radius: 0 0.2em 0.2em 0;

    background: #d60e64;
    background:
        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2MGU2NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YzA0MzciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #d60e64 0%, #6c0437 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d60e64),
        color-stop(100%, #6c0437));
    background: -webkit-linear-gradient(top, #d60e64 0%, #6c0437 100%);
    background: -o-linear-gradient(top, #d60e64 0%, #6c0437 100%);
    background: -ms-linear-gradient(top, #d60e64 0%, #6c0437 100%);
    background: linear-gradient(to bottom, #d60e64 0%, #6c0437 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#d60e64',
        endColorstr='#6c0437', GradientType=0);
    cursor: pointer;
    color: #fff;
    /*font-size: 0.7857142857142857em;*/
}

section.search button:hover {
    background: #a4145a;
    background:
        url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E0MTQ1YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ODAyMmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #a4145a 0%, #58022c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a4145a),
        color-stop(100%, #58022c));
    background: -webkit-linear-gradient(top, #a4145a 0%, #58022c 100%);
    background: -o-linear-gradient(top, #a4145a 0%, #58022c 100%);
    background: -ms-linear-gradient(top, #a4145a 0%, #58022c 100%);
    background: linear-gradient(to bottom, #a4145a 0%, #58022c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#a4145a',
        endColorstr='#58022c', GradientType=0);
}

section.search form input::-webkit-input-placeholder {
    font-size: 0.8em;
}

section.search form input:-moz-placeholder {
    /* Firefox 18 - */
    font-size: 0.8em;
}

section.search form input::-moz-placeholder {
    /* Firefox 19 + */
    font-size: 0.8em;
}

section.search form input:-ms-input-placeholder {
    /* Internet Explorer 1em is by purpose */
    font-size: 1em;
}