Firefox와 Edge가 Flex 항목의 백분율 패딩과 여백을 다르게 처리하는 이유는 무엇입니까?

Firefox 및 Edge에서 백분율 패딩 및 여백의 미스터리 공개

플렉스 항목 영역에서 백분율 패딩 및 여백의 전설 Firefox와 Edge를 사용하는 개발자를 당황하게 만들었습니다. Chrome은 훌륭하게 작동하지만 이러한 브라우저는 우리의 머리를 긁게 만드는 독특한 동작을 나타냅니다.

Flexbox 사양에 따르면 Flex 항목은 패딩이나 여백의 백분율과 관련하여 예측하기 어려울 수 있습니다. 문제의 근본 원인은 다음과 같습니다.

다중 여백/패딩 해결 메커니즘:

Flexbox 사양에서는 이러한 차원에서 백분율을 계산할 때 두 가지 해석이 가능합니다.

1. 축 기반 해상도: 백분율 항목의 자체 축을 기준으로 계산됩니다(예: 너비는 왼쪽/오른쪽, 높이는 위쪽/아래).
2. 인라인 축 해상도: 모든 백분율은 항목의 인라인을 기준으로 계산됩니다. 축(즉, 너비).

Firefox와 Edge는 서로 다른 접근 방식을 채택하여 그들의 행동에 불일치가 있습니다. 이러한 변형은 브라우저가 선택한 해결 메커니즘에서 비롯되며 다음과 같은 결과를 가져옵니다.

Firefox의 해석:

• 패딩 및 여백의 백분율은 가로 및 세로 쓰기 모두에서 항상 너비인 인라인 축 모드.

Edge의 해석:

• Firefox는 아직 최신 Flexbox 사양으로 업데이트되지 않았으므로 이전 버전을 따릅니다. 동작.

해결책:

모든 브라우저에서 일관된 동작을 보장하려면 Flex 항목에 백분율 패딩과 여백을 함께 사용하지 마세요. 이 중요한 조언을 따르면 코드를 괴롭힐 수 있는 브라우저 간 불일치를 피할 수 있습니다.

위 내용은 Firefox와 Edge가 Flex 항목의 백분율 패딩과 여백을 다르게 처리하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!