Question

我正在尝试在输入文本字段旁边设置一个按钮。除非我降低按钮的字体大小（我需要这样做）并给我的按钮一个背景渐变，否则每个都有效。如果我降低字体大小（或设置除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;
}

Answer 1

您的按钮现在没有文本框那么高，因为您在ems中添加了填充，因此使用较小的字体大小，按钮上的填充将少于文本框。

在您的其他填充线下方添加以下行，这将解决问题：

section.search form button {
    padding: 1.2em 0.7em 1.1em 0.7em;
}

你的盒子阴影没有显示，因为0.2em对于阴影的宽度太小，如果你将它增加到至少0.5em，你应该能够看到你的阴影

Here is a working example

表单按钮样式，字体大小和框阴影问题

1 个答案: