브라우저 호환성을 위한 CSS calc() 함수의 가장 좋은 대안은 무엇입니까?

CSS를 위한 Calc 함수 대안

calc() 함수는 CSS에서 값을 동적으로 계산하는 편리한 방법을 제공합니다. 그러나 IE 5.5와 같은 이전 브라우저 및 특정 모바일 브라우저에서는 지원되지 않을 수 있습니다. 다음은 더 넓은 범위의 브라우저에서 더 잘 작동하는 대체 접근 방식입니다.

Box-sizing: border-box

calc(100% - )는 box-sizing: border-box;를 설정하여 대체할 수 있습니다. 한 요소에는 패딩을 추가하고 다른 요소에는 여백을 추가합니다. 예를 들어 div 요소의 너비를 동적으로 설정하려면:

원래 접근 방식(calc() 사용):

width: calc(100% - 500px);

대체 접근 방식(사용 안 함) calc()):

.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}

.content {
  padding-left: 300px;
  width: 100%;
  box-sizing: border-box;
  background: wheat;
}

호환성:

이 대체 접근 방식은 IE 5.5 이상, Opera 및 Android 브라우저를 포함한 대부분의 주요 브라우저를 지원합니다. .

참고: 이 솔루션은 요소 치수의 정확한 값에 의존합니다. 요소의 크기가 유동적이거나 사전에 결정될 수 없는 경우 calc()가 실행 가능한 유일한 옵션일 수 있습니다.

위 내용은 브라우저 호환성을 위한 CSS calc() 함수의 가장 좋은 대안은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!