이전 브라우저에서 CSS Calc()를 사용하지 않고 동적 크기 조정을 달성하려면 어떻게 해야 합니까?

CSS Calc의 대안

CSS calc() 함수는 CSS 규칙 내에서 수학적 계산을 수행하는 편리한 방법을 제공합니다. 단, 레거시 브라우저 및 일부 모바일 브라우저의 경우 지원이 제한됩니다. 이 기사에서는 특히 IE 5.5 이상, Opera 및 Android 브라우저를 대상으로 calc()를 사용하지 않고 동적 크기 조정을 달성하기 위한 대체 접근 방식을 살펴봅니다.

expression() 속성은 IE-OLD에서 다음을 수행하는 데 사용할 수 있습니다. calc와 유사한 구문을 지원하므로 더 이상 사용되지 않으며 사용 시 보안 문제가 발생합니다. 대신, border-box 값과 함께 CSS 상자 크기 조정 속성을 채택하는 것을 고려해 보세요. 이 접근 방식에는 너비 속성에서 빼는 대신 패딩과 여백을 사용하여 원하는 크기를 얻습니다.

예를 들어 원래 질문에 제공된 예를 들어 보겠습니다. 고정 너비가 있는 사이드바가 인접한 콘텐츠의 너비. 콘텐츠 요소에 width: calc(100% - 300px)를 사용하는 대신 다음 코드를 사용하여 동일한 효과를 얻을 수 있습니다.

.sideBar {
  position: absolute; 
  top:0;
  left:0;
  width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

box-sizing: border-box, 요소 너비를 설정하여 요소의 상자 모델 외부에 있는 추가 공간으로 처리하지 않고 패딩과 테두리를 포함합니다. 이를 통해 padding-left는 CSS에 선언된 실제 너비에 영향을 주지 않고 콘텐츠 요소의 사용 가능한 너비를 효과적으로 줄일 수 있습니다.

이 접근 방식은 IE 5.5 이상뿐만 아니라 Opera 및 Android 브라우저는 다양한 브라우저에서 일관된 솔루션을 제공합니다.

위 내용은 이전 브라우저에서 CSS Calc()를 사용하지 않고 동적 크기 조정을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!