IE BUG_HTML/Xhtml_Webpage Production에서 버튼이 양쪽으로 늘어납니다.

버튼(입력, 버튼)을 작성하면 IE에서 다음과 같은 내용을 알 수 있습니다.
단어 수가 늘어날수록 양쪽 사이의 간격이 점점 더 넓어집니다.
WIN의 XP 스타일에서는 단어 수가 많으면 양쪽에 심한 들쭉날쭉한 가장자리가 나타납니다.
이유는 무엇인가요?
Blue Ideal의 원래 WEB 표준화 칼럼의 Bamboo zbm2001z는 다음과 같이 대답했습니다.
1. IE가 버튼의 값을 4바이트(한자 2자) 증가시키면 버튼 양쪽에 표시됩니다. 총 패딩 너비는 1바이트입니다.
2. IE 버튼의 기본 스타일(XP 스타일)은 고정된 크기의 둥근 직사각형 이미지를 배경으로 하므로 버튼의 폭이 점점 커지면 이 고정된 크기의 둥근 직사각형 이미지의 가장자리가 자연스럽게 나타납니다. 머리카락 잡아당김' 현상.
두 번째 문제는 WIN 시스템에서 BUG 자체를 수정하지 않는 한 당분간은 해결할 수 없지만, 첫 번째 문제는 해결할 수 있습니다.
IE에서 버튼 요소에 대한 오버플로 속성의 표시 값을 설정합니다(참고: 패딩 값은 Overflow:visible 속성이 설정된 후에만 유효합니다). 이 속성은 실제로 "배경 클립 및 배경- Origin' 글은 지난번에 쓴 글인데, 'Then Application' 글에 사용되었습니다. 그러나 오늘 "IE의 늘어난 버튼 문제"를 읽은 후 여전히 작은 버그가 있음을 발견했습니다. 버튼이 테이블 셀에 배치되면 버튼이 올바르게 표시되지만 원래 예약된 너비 크기는 변경되지 않았습니다. , 여전히 공간을 차지하고 있으므로 IE6에서는 버튼 너비를 0으로 설정해야 합니다(IE7에도 이 버그가 있지만 아직 해결할 수 있는 좋은 방법이 없습니다).
최종 복구 코드는 다음과 같습니다(데모):
input.button { padding: 0 .25em; width: auto _width: 0;