CSS : 배경 정렬 이미지

Question

검색 양식에 사용하고있는 제출 버튼에 배경 이미지를 사용하고 있으며 제출 버튼/배경 이미지를 정렬하여 검색 입력의 가운데에 세로로 배치합니다. 바.

체크 아웃 내 코드로 JSFiddle 무슨 뜻인지의 더 나은 아이디어를 얻을 수 있습니다 : http://jsfiddle.net/XVx5A/3/

그것은 FF와 크롬 완벽하게 정렬을하지만, 어떤 이유로 IE의 입력 줄 위에 붙어, 그리고 이유를 알아낼 수없는 것 같습니다. 여기에서 무슨 일이 일어나고 있는지 그리고 IE에서이 작업을 수행하는 방법에 대한 조언이 필요하십니까?

참고 : 원래 양식을 제출할 때 이미지 자체를 사용했지만 자동 x & 좌표가 깨끗한 URL 구조를 어지럽게 만들기 때문에 이런 식으로 가고 싶지는 않습니다.

미리 도움을 주셔서 감사합니다.

Answer 1

버튼을 플로팅하고 검색 필드에 고정 된 높이를 추가하면 위치가 정규화됩니다. 업데이트 : http://jsfiddle.net/XVx5A/21/

제출을 투명하게 만들고 검색 아이콘을 텍스트 필드 배경으로 포함시킬 수도 있습니다.

Answer 2

height:20px을 .submit_search_icon에서 삭제하려고하십시오. 적어도 Mac에서는 Chrome에서 더 좋아 보입니다.