Chrome에서 CSS3 계산 (100 % -88px)이 작동하지 않음

Chrome에서 CSS3 계산 (100 % -88px)이 작동하지 않음

---

CSS3 calc()기능을 단위로 width사용하는 것이 최신 버전의 Chrome에서 작동하지 않는 것으로 나타났습니다 .

Chrome 개발자 도구 에서이 있는 규칙 calc()에는 취소 선 이 있고 왼쪽에 노란색 삼각형 안에 느낌표가 있습니다. 이것은 속성 또는 값이 인식되지 않음을 나타냅니다.

최신 브라우저에서 작동하도록하려면 어떻게해야합니까? 속성이 아니라 값이기 때문에 공급 업체 접두사는 어디에 있습니까?

최신 정보:

작동하지 않는다고 말하는 것은 Chrome Dev Tools가 내 사용을 인식하지 못한다는 의미 width: calc(100%-88px);입니다. 인식하지 못하는 것을 어떻게 알 수 있습니까? 취소 선과 크롬 개발 도구의 스타일 규칙 옆에있는 노란색 삼각형 아이콘 때문입니다.

---

문제의 문제는 빼기 연산자 주변에 공간이 부족하기 때문에 발생했습니다.

문법에는 이진 '+'및 '-'연산자 주위에 공백이 필요합니다. '*'및 '/'연산자에는 공백이 필요하지 않습니다.

https://www.w3.org/TR/css3-values/#calc-syntax

^{나는 이것이 연산자와 부호있는 숫자의 구별을 명확히하기위한 것이라고 추측합니다.}

나쁨 : calc(100%-88px)
좋음 : calc(100% - 88px)

---

인식하지 못하는 것을 어떻게 알 수 있습니까? 취소 선과 크롬 개발 도구의 스타일 규칙 옆에있는 노란색 삼각형 아이콘 때문입니다.

되는 특성 강타 유효하지만, 오버라이드 (override) 할 수있다 크롬의 개발자 도구에서 볼 때의; 그러나, 속성을 통해 당했다 과 는 무효 옆에있는 아이콘 경고 삼각형.

---

기타 참고 사항

• Chrome은 꽤 오랫동안 지원 calc()되었습니다 (OSX 및 Windows에서 확인 됨).
• Chrome 은 내부 vh / vw와 같은 뷰포트 단위를 지원하지 않을 수 있습니다 calc(). 2014 년 말 현재이를 구현하기위한 활동이 있지만 관련 버그 는 아직 열려 있습니다.
• 내 테스트에서 Safari는 OSX calc()에서 -webkit공급 업체 접두사를 지원 하지만 Windows 는 지원 하지 않습니다.
• IE9 +는 calc()공급 업체 접두사없이 지원 합니다.
• FF는 calc()공급 업체 접두사없이 지원 합니다.

---

-webkit연산자 주위에 접두사와 공백 사용

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);

---

나는 calc재산으로 약간 고생했고 접근 방식 아래에서만 작동했습니다.

-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)

위의 모든 제안은 다음과 같습니다.

-webkit-calc(100% - 40px); // bad: result 60%

60 %와 같은 잘못된 계산으로 끝났습니다.

누군가에게 도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/16290873/css3-calc100-88px-not-working-in-chrome