Firefox，在輸入表單上顯示問題HTML/CSS

Question

我不知道爲什麼，但在Firefox中，當我輸入一個輸入時，文本被隱藏（但當我點擊輸入文本顯示時），在谷歌鉻它運作良好，我試圖改變Z - 索引，但它不會改變任何東西。

這是我的HTML

<div id="searchBar" class="{% if query %}cancelable{% endif %}"> 
    <input class="searchInput" type="text" autocomplete="off" 
     value="{{ query|default_if_none('')|escape }}" 
     name="query" id="keywords"/> 
    <input type="submit" value="" name="search" class="searchBtn" style="display: none;"/> 
</div> 

這是我的CSS

#searchBar input.searchInput { 
    z-index: 99; 
    font-size: 22px; 
    height: 26px; 
    line-height: 26px; 
    font-weight: 300; 
    background: #FFF; 
    border: 0px; 
    color: #484848; 
    font-family: Arial; 
    width: 100%; 
    margin: 8px 0 6px 0; 
    padding: 0 80px 0 8px; 
    top: 0; 
    left: 0; 
    -webkit-box-shadow: 0 0 0 #929292; 
    -moz-box-shadow: 0 0 0 #929292; 
    box-shadow: 0 0 0 #929292; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

#searchBar input.searchInput:focus { 
    margin: 0px 0 0px 0; 
    padding: 20px 40px 18px 8px; 
    border: solid 1px rgba(82, 168, 236, 0.8); 
    -webkit-box-shadow: 0 0 0 rgba(82, 168, 236, 0.8); 
    -moz-box-shadow: 0 0 0 rgba(82, 168, 236, 0.8); 
    box-shadow: 0 0 0 rgba(82, 168, 236, 0.8); 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -webkit-transition:border linear .2s, box-shadow linear .2s; 
    -moz-transition:border linear .2s, box-shadow linear .2s; 
    -o-transition:border linear .2s, box-shadow linear .2s; 
    transition:border linear .2s, box-shadow 
} 

PS：#searchBar有1000我嘗試切換到10的z-index它仍然具有相同的行爲在Firefox上。

Answer 1

您已經的padding這是造成問題，而且你正在使用的26pxheight，因此文本大量隱藏

padding: 20px 40px 18px 8px; 

Demo

以後，您可以去除紅色邊框（我已保留用於測試目的）

Demo

上重構代碼一些提示

• 該保證金：0px 0 0px 0;可以簡單地寫爲margin: 0;
• 沒有必要在你的代碼中的任何影子，因爲它們被設置爲0
• z-index不需要
• line-height （如果您沒有使用任何固定高度）
• top，left不需要