Firefox에서 대역폭 비율이 적용된 Flexbox가 작동하지 않습니다.

간단한 사이드 바를 보관하려고했습니다. 콘텐츠를 시각적으로 정상 수레로 시각적으로 표현한 다음 등고선에 대해 (margin-bottom: -99999px; padding-bottom: 99999px 등) 고전적인 기술을 사용했지만 마음에 들지 않았으며 여기저기서 문제가 발생하여 플렉스 상자를 사용하기로 결정했습니다. 그것은 고정 된 크기의 너비로 얼마전에 작동했지만 괜찮 았지만 지금은 파이어 폭스가 전혀 좋아하지 않았던 것 같습니다 그래서 백분율 너비가 있습니다 ...Firefox에서 대역폭 비율이 적용된 Flexbox가 작동하지 않습니다.

This 예제는 플렉스 박스가 정상적으로 작동하는 것을 보여줍니다. 그것은 사파리와 크롬에서 잘했지만 파이어 폭스는 단지 비율 폭을 무시 ...

가 그럼 난 뭔가 different을 시도 ... 나는 파이어 폭스의 it is a known issue 것을 발견하지만 오래된 일이고 나는 이미 그것을 해결 생각 파이어 폭스를 속이려면 명령을 내리십시오. 내용에 따라 페이지마다 페이지 크기가 다르기 때문에 예상하지 못했습니다.

그래서 유체 레이아웃이있는 플렉스 박스를 포기하고 내 필요에 맞는 간단한 것을 사용합니다. ..

하지만 사람이 어떤 해결 방법으로이 문제를 해결할 수 있는지 알고 궁금하거나 우리가 이것에 대한 대기열의 모든 경우 mozila에 의해 해결 될 ...

감사합니다!

출처

2012-03-05 panosru

가짜 열이 해결책 일 수 있습니까? http://www.alistapart.com/articles/fauxcolumns/ – fcalderan

여백/패딩 -bottom -/+ 99999px와 거의 동일한 해킹이므로 열의 높이가 같지만 실제로는 보이지 않는 모양을 제공합니다. 't, flexbox와 table은 같은 높이 기술이지만, 설명하는 문제는 높이가 같은 칼럼과 관련이 없지만 파이어 폭스가 플렉스 상자에있을 때 가로 세로 비율을 무시한다는 사실과 관련이 있습니다. – panosru

margin-bottom: -99999px; padding-bottom: 99999px 해결 방법을 사용하는 것이 좋습니다. 유체 레이아웃 (14 %, 86 % 분할)을 사용하려면 Flex 대신 일반 오래된 CSS를 사용하십시오.

http://jsfiddle.net/97dtV/7/

왜 바퀴를 다시 발명. 사이트를 배치하는 더 좋은 방법을 찾고 있다면 "그리드"방식을 시도하십시오.

시맨틱 그리드 (http://semantic.gs/)
부트 스트랩은 - (http://twitter.github.com/bootstrap/index.html)

이는 것으로 가정 이것을 무시한다면 어떤 특별한 이유 때문에 flex를 필요로하지 않는다;). CSS3 특정 속성을 사용할 때 이전 버전과의 호환성을 고려하십시오!

출처

2012-03-05 11:32:19 JustAnotherDeveloper

-/+ 99999px 접근법의 문제점은 사이드 바에'position : absolute'가 있어야한다는 것입니다. 이것은 피할 필요가있는 것입니다. – panosru

흠 나는 [this] (http://jsfiddle.net/97dtV/9/)과 같은 것을 가질 수있다. 솔직히 말해서 나는 현재 [this] (http://jsfiddle.net/97dtV/11/)를 사용하고있다.) 접근법과 지금까지 나는 그걸로 행복합니다 ...하지만 당신 대답에 감사드립니다! – panosru

열의 높이가 같지 않으면 평범한 CSS가 떨어집니다 (http://jsfiddle.net/mlms13/97dtV/73/). 그래서 사람들은 -/+ 9999px 접근법, 또는 flexbox 또는 CSS 표를 사용합니다. 시맨틱 그리드 접근법이 가장 좋은 방법 일지 모르지만 flexbox는 파이어 폭스에서 그렇게 부숴졌다. –

Firefox에서 대역폭 비율이 적용된 Flexbox가 작동하지 않습니다.

답변

관련 문제