DIV背景不會在Chrome

我使用浮動正確顯示：左;和float：right;將兩個div容器放在一行中，左邊的一個容納一個輸入欄，右邊容納一個小背景圖片（搜索按鈕）。DIV背景不會在Chrome

它在Opera中顯示得很好& Firefox，MSIE 9.0+，但是當我在chrome中查看它時右邊容器的背景圖像稍微偏離了位置（向下移動了幾個像素）。

我將背景色設置爲紅色來突出問題： screenshot

的index.php出氣：

<div class="header_inner_right"> 
    <form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();"> 
      <div class="left"> 
       <input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer" 
        onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();"> 
      </div> 
      <div class="right"> 
       <input id="search_button" src="images/search_button.gif" type="submit" value=""> 
      </div> 
    </form> 
</div>

index_chrome.css（如果使用PHP腳本檢測Chrome瀏覽器）：

@charset "ISO-8859-1"; 

#search_bar { 
    width: 450px; 
    height: 37px; 
    background-color: red 
} 

#search_bar #search_field { 
    border: 0px; 
    width: 365px; 
    height: 37px; 
    padding-left: 20px; 
    padding-right: 20px; 
    background-image: url(../images/search_field.gif); 
    background-repeat: no-repeat; 
    font-weight: bold; 
    color: #c0c0c0; 
    background-color: #ffffff 
} 

#search_bar #search_button { 
    cursor: pointer; 
    border: 0px; 
    outline: none; 
    height: 37px; 
    width: 45px; 
    background-image: url(../images/search_button.gif); 
    background-repeat: no-repeat 
}

如何修復和調整放大鏡背景圖像的Y位置，以便它完美地與左div的backgro對齊und image並完全隱藏右側div容器的紅色背景？

編輯：http://jsfiddle.net/YcraM/

對不起，忘了的jsfiddle！

來源

2012-08-26 phew

你可以提供一個[的jsfiddle（http://jsfiddle.com/）與相應的資源，這樣我們就可以在我們的機器上編輯它？ –

你可以使用'display：inline-block' css來爲你的div把它們放在一行中。 –

剛剛添加的鏈接的jsfiddle，好奇這個問題，但可能只是我的缺乏與跨瀏覽器CSS的experiance造成的。 – phew

這可能不是你想要聽到的答案，但是這幾乎是不可能讓大多數輸入元素，看起來相當的橫瀏覽器。我強烈建議您按照div元素設計提交按鈕。例如：

<div class="left"> 
    <input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer" 
     onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();"> 
</div> 
<div class="right"> 
    <div id="search_button"></div> 
</div>

風格與CSS根據自己的喜好股利 - 記得使用:hover和:active僞類。然後，使用例如jQuery的，使它的功能是這樣的：

$('#search_button').on('click', function(e) { 
    $(e.currentTarget).closest('form').submit(); 
});

來源

2012-08-26 03:23:14 Hubro

嗯，我對任何解決方案都是開放的，因爲昨天這個問題真的和我混淆了。感謝您的回答，您的JavaScript解決方案和div容器的工作就像一個魅力。現在唯一的問題離開了，我注意到在search_field的頂部出現了同樣的問題[喜歡這裏（http://img51.imageshack.us/img51/3172/msie8und7.jpg）如果你查看MSIE7或MSIE8的網站。有沒有機會我可以使用div作爲輸入字段？ – phew

我已經在Chrome 21測試了它和FF 14，似乎設置line-height:0px;修復該問題。

div.right { 
    float: right; 
    line-height:0px; 
}  
div.left { 
    float: left; 
    line-height:0px; 
}

http://jsfiddle.net/YcraM/3/

我沒有在其他瀏覽器進行測試，所以原諒我，如果這是不是最好的解決辦法。

來源

2012-08-26 03:30:53 DACrosby

您可以添加float:right（或左）到#search_bar #search_button，是解決這個問題以及

來源

2012-08-26 03:42:02 Choma

謝謝，我現在固定使用浮動的所有問題：對本search_field和search_button和Codemonkey的建議，使用一個div用JS提交的輸入標籤代替。 – phew

DIV背景不會在Chrome

回答

相關問題