輸入填充跨瀏覽器問題？

enter image description here

這是HTML：

<form method="post" action="#" class="search-form"> 
    <input type="text" class="nav-search-input input-initial" data-initial='Search' value="Search"> 
    <input type="submit" class="nav-search-submit" value="&#57384;"><!-- &#57384; is the code for the Glyphicons search icon --> 
</form>

我使用的是引導和引導響應風格，以及以下搜索表單的樣式：

.search-form{ 
    display: block; 
    margin: 0; 
} 

input.nav-search-input, 
input.nav-search-submit{ 
    color: #eeeeee; 
    background-color: #181818; 

    border-top: 1px solid #303030; 
    border-bottom: 1px solid #303030; 
} 

input.nav-search-input{ 
    width: 90px; 
    height: 20px; 

    -moz-transition:border-color 75ms; 
    -o-transition:border-color 75ms; 
    -webkit-transition:border-color 75ms; 

    outline: 0!important; 
    -webkit-appearance:none!important; 
    box-shadow: none!important; 
    -moz-box-shadow: none!important; 
    -webkit-box-shadow: none!important; 
    margin-top: 10px; 

    padding: 0px 0px 0px 8px; 

    line-height: normal; 
    font-weight: normal; 
    font-size: 14px; 

    border-right: none; 
    border-left: 1px solid #303030; 

    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 


    -webkit-border-top-left-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    border-top-left-radius: 10px; 

    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-left-radius: 10px; 

} 

input.nav-search-submit{ 
    font-family: Glyphicons; 

    box-sizing: content-box; 

    padding: 0px 6px 0px 5px; 

    color: #aaaaaa; 

    -moz-transition:border-color 75ms; 
    -o-transition:border-color 75ms; 
    -webkit-transition:border-color 75ms; 

    border-left: none; 
    border-right: 1px solid #303030; 

    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-right-radius: 10px; 

    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    border-bottom-right-radius: 10px; 
}

這對Chrome，Firefox以及Safari瀏覽器，但歌劇是呈現形式是這樣的：

enter image description here

歌劇院有問題的版本是12.02。

這似乎是填充問題。我試過this question列出的解決方案無濟於事。如果我增加頂部和底部填充以使其在Opera中看起來正確，則在其他瀏覽器中不再顯示正確。

這是working version of the page。

注意，我沒有在IE中測試，因爲我在Mac上。

來源

2012-12-26 DC_

我想測試一些行高修正，但將我的Opera 22指向您的Dropbox示例頁面，並且不再可用。 –

夫婦的想法：

你依靠的字體產生放大鏡......這是風險。有些設備不支持@face字體（與德羅伊德桑取代Glyphicons ，你會看到一些用戶要 GET - 填充關係不大）
你有沒有使用<input type="image"...>只是嘗試
您是否嘗試過使用{ background:url('mag-glass') }

我有一個說，你的問題與歌劇是如何呈現的字體，或者該字體的行高到$ 50是的 - 修復Opera的問題將會使FF，Chrome和Safari升級。

此外，我嗡嗡通過您的CSS文件，並沒有看到CSS重置。請參閱Eric Meyer的CSS重置以獲取更多信息。當一切都在復位時被「均衡化」時，會帶來很多令人頭痛的問題。

來源

2012-12-26 05:43:18 Dawson

謝謝，它最終導致了不同瀏覽器渲染字體的問題。我最終使用了「背景圖像」。 –

輸入始終會導致跨瀏覽器css的問題。

我建議你使用好的CSS復位輸入容器，像

<div class="input-border"> 
    <input type="text" name="cokolwiek"> 
</div>

它打破夫婦規則 - 「不要混用HTML和風格」，但它的工作原理]

記住：重點大綱。

來源

2012-12-26 20:39:19 Tymek

輸入填充跨瀏覽器問題？

回答

相關問題