단추 높이 불일치 (브라우저 간)

단추의 높이를 설정하는 동안 문제가 있습니다. 기본적으로 크로스 브라우저를 관리 할 수 없습니다. Firefox에서는 아무 이유없이 보통보다 높습니다. 코드 여기단추 높이 불일치 (브라우저 간)

Initial

: 그리고 여기

은은 (이 순서 파이어 폭스, 사파리와 오페라)의 스크린 샷이다 나는 또한 내가에서 발견 된 일부 특정 선언을 추가하는 시도 http://jsfiddle.net/TMUnS/2/

웹, 실제로 그들은 단지 높이를 조금 감소하지만, 여전히 그들은 (동일한 순서로) 동일하지 않습니다 :

Second try

여기 코드는 http://jsfiddle.net/TMUnS/4/입니다.

어떻게 해결할 수 있습니까?

출처

2012-02-08 entropid

글쎄, 이건 그냥 일어 났고이 질문은 끝없이 물어 왔습니다. 입력과 픽셀 완전성은 브라우저의 불일치로 인해 대부분 혼합되지 않습니다. ** normalize.css **와 같이 시작한 다음 거기에서 조정하는 것이 좋습니다. – elclanrs

이미 초기화가되어 있지만이 설정을 재설정하지 않는 것 같습니다. – entropid

Firefox에는 -moz-focus-inner이라는 재미있는 것이 있습니다. 난 그냥 당신이 가끔 버튼이 동작하도록 얻기 위해이 작업을 수행 할 필요가 있다는 것을 알고 그것을 위해 무엇 완전히 확실하지 않다 :

button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner { 
    padding:0; 
    border:0; 
}

당신이 필요로 할 수 있음. 여기서 차이점을 볼 수 있습니다 (Firefox에서) : http://jsfiddle.net/TMUnS/9/

출처

2012-02-08 01:57:30

음, 실제로이 속성을 설정했지만'padding : 0' 부분을 추가하는 것을 잊어 버렸기 때문에 제대로 작동하지 않았습니다! 하지만 이제는 새로운 문제가 생겼습니다. http://jsfiddle.net/TMUnS/12/에서 볼 수 있습니다. 버튼의 높이는 같지만 Firefox에서는 세로로 길지 않습니다. – entropid

문제가 명확하게 보이지 않습니다. 주목해야 할 사항 : 1) 방금 링크 한 데모는'-moz-focus-inner' 코드를 포함하지 않습니다. 2)'font-family'를 지정하지 않았습니다. Chrome VS Firefox에서 다른 기본 글꼴을 사용하므로 렌더링이 다릅니다. 3)'

그게 좋을 것 같아. 팁 고마워. :) – entropid

CSS 재설정을 사용하고 있습니까? CSS 재설정은 브라우저의 CSS를 표준화합니다. YUI CSS RESET

출처

2012-02-08 01:51:55 thisisablock

이미 CSS 재설정을 사용하고 있습니다. http://meyerweb.com/eric/tools/css/reset/. – entropid

이 버튼의 라인 높이를 제한 파이어 폭스에서 설정하는 기능입니다 :

이 YUI 재설정을 시도합니다. 버튼의 기본 행 높이를 설정합니다 ( http://www.cssnewbie.com/input-button-line-height-bug/). 나는 고정 된 높이의 단추를 사용하고 패딩으로 놀아 볼 것입니다.

출처

2012-02-08 01:54:53

그래, 네가 할 수있는 최선이야. 텍스트를 세로로 가운데 맞추기위한 고정 높이 및 동일한 선 높이. 이 기술을 텍스트 입력을 터치하는 검색 버튼과 함께 사용 했으므로 모든 브라우저에서 일관되게 보이게하는 것이 중요합니다. – elclanrs

단추 높이 불일치 (브라우저 간)

답변

관련 문제