Chrome CSS 문제

몇 주 전 모든 브라우저 (Chrome, FF, IE7/8/9, Opera)에서 작동하는 검색 창과 버튼이 있지만 지금은 Chrome에서만 약간 잘못 오프셋되어 있습니다.Chrome CSS 문제

는 여기 크롬 enter image description here

에 그리고 여기에는 오페라, FF, IE enter image description here

공지 크롬 오프셋 약간입니다. 여기

#function_search_form #basic_search_button { 
    border: 1px solid #FFFFFF; 
    border-radius: 0px 4px 4px 0px; 
    background: #FFFFFF; 
    vertical-align: middle; 
    height: 25px; 
    width: 27px; 
    margin: 0.5em 0px; 
    padding: 1px 0px; 
} 

#function_search_form #basic_search_input { 
    border: 1px solid #FFFFFF; 
    border-radius: 4px 0px 0px 4px; 
    color: #050; 
    font: bold 12px 'trebuchet ms', helvetica, sans-serif; 
    width: 250px; 
    height: 25px; 
    padding-right: 5px; 
    vertical-align: middle; 
}

전 사업부의 입력을 포장하고, 절대 위치 또는 상대 위치를 사용하는 것을 시도했다,이 검색 상자에 대한 HTML,

<form id="function_search_form" method="post" class="span-24 textcenter last"> 
    <input type="text" name="basic_search_input" id="basic_search_input" /> 
    <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp; 

    <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a> 
    <input type="hidden" name="search_type" value="basic" /> 
    <div id="autocomplete_choices" class="autocomplete"></div> 
</form>

입니다 그리고 여기이 요소의 CSS입니다 . 그러나 내가 변경 한 모든 것은 다른 브라우저에서 깨졌지만 Chrome에서 수정되었습니다. 크롬에서 수정 한 텍스트 입력에서 수직 정렬을 취하는 경우에도 해당되는 것으로 보입니다.

최신 버전의 Chrome에 새로 추가 된 버그인지 잘 모르겠지만 이전 버전에서는 Chrome에서 작동했음을 기억하며 이후로 변경된 사항은 없습니다. 스티브 캠벨의 솔루션

에 대한

는

UPDATE 내가 내 CSS 파일이 HTML을 제외한 모든 것을 가지고가는 경우에 때문에 당신이 작동하는 방법을 잘 모르겠습니다, 그것은 다음과 같습니다

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title></title> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> </head> <body> <form id="function_search_form" method="post" class="span-24 textcenter last"> <input type="text" name="basic_search_input" id="basic_search_input" /> <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />   <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a> <input type="hidden" name="search_type" value="basic" /> <div id="autocomplete_choices" class="autocomplete"></div> </form> </body> </html>

내가 생각할 수있는

만 일이 바이올린을 가지고 있다는 것입니다 어떤 다른 리셋 또는 뭔가.

출처

2012-08-22 Metropolis

1px 불일치? JSFiddle 또는 다른 실제 예제가 있나요? –

@RoddyoftheFrozenPeas 죄송합니다. 자사의 비밀 번호로 보호 된 응용 프로그램에. Cant는 그것을 모두 보여줍니다. 그 밖의 무엇을 찾고 계십니까? 원한다면 좀 더 CSS와 HTML을 시도해 볼 수는 있지만, 얼마나 도움이 될지 모르겠다. – Metropolis

CSS를 표준화 했습니까? 다른 브라우저는 일부 속성에 대해 다른 기본값을 갖는 경향이 있습니다. 일반적으로 재설정하는 것이 좋습니다. – toniedzwiedz

이 fiddle은 정상적으로 작동합니다. 브라우저 간 일관성을 유지하기 위해 상대 및 절대 및 조정 상자 크기를 사용하여 스타일을 지정하고 그 안에 있던 여백을 제거했습니다.

#function_search_form 
{ 
    position: relative; 
} 
#function_search_form #basic_search_button { 
    border: 1px solid #FFFFFF; 
    border-radius: 0px 4px 4px 0px; 
    background: #FFFFFF; 
    height: 25px; 
    width: 27px; 
    margin: 0; 
    padding: 1px 0px; 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    position: absolute; 
    top: 4px; 
    left: 250px; 
} 

#function_search_form #basic_search_input { 
    border: 1px solid #FFFFFF; 
    border-radius: 4px 0px 0px 4px; 
    color: #050; 
    font: bold 12px 'trebuchet ms', helvetica, sans-serif; 
    width: 250px; 
    height: 25px; 
    padding-right: 5px; 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box;  
    position: absolute; 
    top: 4px;  
} 

#function_search_form a { 
    position: absolute; 
    top: 8px;  
    left: 280px; 
}

출처

2012-08-22 19:47:28

나는이 요소들과 절대 위치를 잡으려고 노력했지만 Chrome, FF, IE9에서는 작동하지만 IE7/8에서는 깨지기 쉽습니다. 귀하의 특정 CSS는 모두 엉망입니다. 피들의 사물과 다른 사물이나 내 측면의 사물과는 다른 것을 할 수 있습니다. – Metropolis

방금 실제로 리셋되어있는 청사진을 사용하고 있다는 것을 깨달았습니다. 어쩌면 당신이 그것을 바이올린에 추가하면 당신이 가진 것을 바꿀 수 있습니다. – Metropolis

수정 된 답변은 IE7 수정 –

Chrome CSS 문제

답변

관련 문제