브라우저 전체에서 일관된 요소 너비를 보장하려면 어떻게 해야 합니까?

요소 너비 및 박스 크기:** 브라우저 동작 통합

웹 디자인에서 요소의 너비는 다양한 브라우저의 다양한 해석으로 인해 혼란이 발생합니다. 예를 들어 Internet Explorer와 Firefox는 역사적으로 이 측면을 다르게 처리해 왔습니다.

IE의 Border-Box 모델과 FF의 Content-Box 모델

전통적으로 Internet Explorer를 사용했습니다. 요소 너비에 패딩과 테두리가 모두 포함된 "테두리 상자" 모델. 따라서:

foo {

너비: 10em;
패딩: 2em;
테두리: 1em;
}

너비가 10em인 요소를 렌더링합니다.

In 대조적으로, Firefox 및 기타 표준 호환 브라우저는 기본적으로 "콘텐츠 상자" 모델을 사용합니다. 여기서 요소 너비는 패딩과 테두리를 제외했습니다. 따라서 동일한 CSS를 사용하면 너비가 16em인 요소가 생성됩니다:

foo {

width: 10em;
padding: 2em;
border: 1em;
}

달성 일관성

개발자는 브라우저 간 동작을 조화시키기 위해 상자 크기 조정 속성을 ​​사용할 수 있습니다. "border-box"로 설정:

• {
  box-sizing: border-box;

또는:<br>*{

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box

}

Firefox를 포함한 최신 표준 호환 브라우저 , "경계 상자" 모델을 채택하도록 강요될 수 있습니다. 이 선언은 Opera 및 Chrome과 같은 Webkit 기반 브라우저도 지원합니다.

그러나 Webkit은 선언을 통해 "패딩 박스" 모델을 지원하지 않습니다.

위 내용은 브라우저 전체에서 일관된 요소 너비를 보장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!