브라우저에서 테두리가 렌더링되는 방식

브라우저에서 테두리 속성을 렌더링하는 방법은 QQ 그룹에서 오랫동안 논의되었으며 나는 이를 처리하기 위해 항상 border:0 none;을 사용해 왔습니다. 물론 제가 그렇게 하는 이유도 있습니다. 이 이유는 아래 분석에서 언급하겠습니다. 테두리 속성을 분석하기 전에 설명해야 할 몇 가지 사항은 다음과 같습니다.

1. Xiaozhi, 저는 분석 전문가가 아닙니다. 저는 Firebug와 IE 개발자라는 두 가지 도구를 사용하여 FF 브라우저와 IE 브라우저에서 브라우저 렌더링 결과를 봅니다.
2. FF 브라우저와 IE 브라우저의 렌더링 결과만 살펴봤기 때문에 모든 브라우저가 같은 방식으로 렌더링된다는 의미는 아닙니다.

테두리 스타일을 더 잘 비교하기 위해 여기서는 "버튼" 요소를 선택했지만 사용된 태그는 입력 태그 요소와 버튼 태그 요소입니다. 그런데 한 가지 언급해야 할 점은 이 두 레이블 요소가 다양한 브라우저에서 공통적으로 갖는 점은 둘 다 시스템 제어 요소라는 것입니다. 테두리 스타일과 버튼 배경은 시스템 테마와 절대적인 관계가 있습니다.

동일한 XHTML 구조 코드를 사용하여 FF 브라우저와 IE 브라우저를 각각 비교합니다.

<입력 유형="버튼" 값="버튼" />
<시간 />
<버튼>버튼

데모 애니메이션 1 데모 애니메이션 2

현재 시스템 테마의 기본 스타일의 영향을 통해 IE 브라우저는 버튼과 입력이라는 두 태그 요소의 구문 분석에 이미 약간의 차이가 있음을 발견했습니다. 이 점에 관심이 있는 학생들은 스스로 실험해 볼 수 있습니다. CSS 스타일 정의가 없는 위 열의 속성 결과에서 우리가 얻는 결과는 다음과 같습니다.

*FF 브라우저: 입력 태그 및 버튼 태그의 테두리 스타일은 border-width:3px; border-color:#E5E5E5;
* IE 브라우저: 입력 레이블 테두리 스타일은 border-width:2px; border-style:outset;

이 데이터를 사용하여 테두리 속성에 대한 스타일을 정의할 때 결과가 어떻게 될지 살펴보겠습니다.