왜 unstyled 입력 텍스트의 테두리 너비가 2px입니까?

다음과 같은 HTML 마크 업을 사용하면 text 유형의 입력 양식 요소가됩니다. <input> 요소를 검사 할 때 왜왜 unstyled 입력 텍스트의 테두리 너비가 2px입니까?

Sample

그런 다음, 브라우저가 테두리를 보여이 (오른쪽에서의 확대 된 이미지를) 다음 화면 캡처와 같은 렌더링 괜찮은 브라우저에서

<!DOCTYPE html> 
<html> 
    <body> 
     <input type="text" /> 
    </body> 
</html>

너비 2px? 우리는 시각적으로 수 있습니다 입력 요소를 주셔서 감사 1 픽셀 있습니다. jQuery로도 jQuery('input').css('border-width')과 같은 것을 할 때 2px이 나옵니다.

물론 이것은 입력되지 않은 양식 입력 요소 인 경우에만 이 발생합니다. http://jsfiddle.net/HBDUZ/

감사 :

나는 또한 JsFiddle 데모를 만들었습니다!

브라우저 기본 스타일 시트. – alex

브라우저가 기본 스타일로 텍스트 필드를 렌더링하도록 설정 한 것 같습니다. 예를 들어 텍스트 입력란에 iOS 용 Chrome에서 "1px"라고 표시됩니다. (iPhone) –

각 브라우저에는 특정 요소에 대한 기본 스타일링을 포함하는 기본 제공 스타일 시트 ("사용자 에이전트 스타일 시트"라고 함)가 있습니다. 이 경우

(크롬 25 베타 m, 윈도우), 스타일은 다음과 같습니다

이

border: 2px inset;

inset의 결과는 대비되는 배경색으로,이 JSFiddle에 정말 볼 수 있습니다.

2013-01-17 02:14:00

흥미 롭습니다 ...'border-color : red'를 설정할 때 2px를 볼 수 있습니다 ... 이상합니다 ... –

답변