div 배경이 크롬에서 제대로 표시되지 않습니다.

Question

저는 float : left를 사용하고 있습니다. 부유물 : 오른쪽; 두 개의 div 컨테이너를 한 행에 넣으려면 왼쪽에는 입력 막대가 있고, 오른쪽에는 작은 배경 이미지 (검색 버튼)가 있습니다.

Firefox의 MSIE 9.0 이상에서는 Opera가 올바르게 보입니다. 그러나 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 스크립트는 크롬 브라우저를 감지 한 경우 사용)

@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와 완벽하게 정렬하는 방법 이미지 및 오른쪽 div 컨테이너의 빨간색 배경을 완전히 은폐?

편집 : http://jsfiddle.net/YcraM/ 죄송합니다

이 JSFiddle 잊었다!

Answer 1

이것은 듣고 싶은 대답이 아니지만 대부분의 입력 요소를 동일한 크로스 브라우저로 보이게 만드는 것은 거의 불가능합니다. 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와 DIV - :hover 및 :active 의사 클래스를 사용해야합니다. 그런 다음, 예를 jQuery를 위해 사용하는, 이런 식으로 작동 할 수 있도록 : 나는 크롬 21에서 테스트 및 FF (14) 한

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

Answer 2

, 그것은 line-height:0px; 수정 문제를 설정하는 것 같다. 내가 다른 브라우저에서 테스트하지 않았습니다

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

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

, 그래서 이것은 최선의 해결책이 아닌 경우 용서해.

Answer 3

당신은