2012-04-15 2 views
-2

크로스 브라우저 크기 조절 버튼 결함

은 버튼에 대한 위의 HTML과 CSS에서 봐 주시기 바랍니다.

버튼의 오른쪽 부분을 표시하는 데 사용되는 기간이이 브라우저에서 1px 아래쪽으로 이동합니다. Firefox에서 올바르게 작동합니다.

윈도우 : IE8, 오페라, 사파리 맥 : FF, 사파리, 오페라, 크롬

UPDATE 1] 윈도우의 높이를 변경하는 동안 버그가 11.0 창 무작위도 파이어 폭스에서 볼 수 있습니다.

위에서 언급 한 jsfiddle 링크로 이동하여 결과의 ​​프레임 크기를 조정하십시오. 스팬 깜박임을 볼 수 있습니다 ... [편집 2 : 실제로 firefox 패널의 크기를 재조정했습니다. 버튼의 오른쪽에 점프 스팬, 이전에 나는 그것이 파이어 폭스에서 잘 작동한다고 생각했다.]

나는 또한 모든 인라인 요소 예제를 시도했다. http://jsfiddle.net/sbWCD/

P. 이 단순한 이미지는 좀 더 복잡한 디자인을위한 자리 표시 자일 뿐이며 CSS3 솔루션을 찾고 있지 않습니다.

+0

우분투의 Firefox 11에서 1 픽셀 아래로 이동합니다. 잠시 후에 해결책을 모색 할 것입니다. – 0b10011

+0

왜 두 개의 요소로 버튼을 분할 했습니까? – Dion

+1

최신 브라우저에서는 둥근 모서리가있는'background-color :'를 사용하지 않는 이유는 무엇입니까? 당신은 환상적으로 문제를 극복하고 새로운 문제를 도입합니다. – Bojangles

답변

0

코드는 달성하기가 너무 복잡합니다. 다음은 정리 된 버전입니다. http://jsfiddle.net/KKL5G/4/ 크로스 브라우저에서 작동해야합니다.

border-radius을 사용하면 둥근 모서리가있는 상자를 쉽게 만들 수 있으며 배경 이미지가 필요 없습니다.

+0

미안 배경 이미지가 필요합니다. 나중에 CSS 대체가 불가능한 이미지를 바꿀 계획입니다. –

0

흠 나는 스팬의 예에서 span.l에서 총 높이 32px까지의 세로 패딩을 조정하고 33px로 변경했습니다. 이제 파이어 폭스와 사파리에서 작동하는 것 같습니다.

http://jsfiddle.net/sbWCD/3/

작품 여전히 문제의 원인을 단서.