窗體按鈕樣式，字體大小和框陰影問題

我試圖在樣式中除了輸入文本字段的樣式中的按鈕。除非我降低按鈕的字體大小（這是我需要做的）並給我的按鈕一個背景漸變，否則Everyting作品。如果我降低字體大小（或設置除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; 
}

來源

2013-09-27 DarsVaeda

請移除填充到該按鈕，並給予修復高度的按鈕。 –

當然可以解決它，但一切都應該是響應和固定的寬度或高度是不是我想做的事情。我的意思是這個空間必須來自某個地方，而不是？大概知道它來自哪裏可以解決它。 – DarsVaeda

你的按鈕現在是不是你的文本框一樣高，你是在EMS添加填充所以在字體較小的情況下，按鈕上的填充比文本框更少。

添加其他填充線之下以下行，這將解決這個問題：

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

包裝盒中的陰影不顯示爲0.2em太小陰影的寬度，如果增加這在至少，你應該能夠0.5em看到你的身影

Here is a working example

來源

2013-09-27 08:31:15 Pete

窗體按鈕樣式，字體大小和框陰影問題

回答

相關問題