Flexbox с процентной шириной на Firefox не работает - PullRequest
5 голосов
/ 05 марта 2012

Я пытался заархивировать простую боковую панель | содержимое визуально с обычными числами с плавающей точкой, а затем я использовал классическую технику для столбцов одинаковой высоты с (margin-bottom: -99999px; padding-bottom: 99999px и т. д.), но мне это не понравилось, и у меня возникли некоторые проблемы с этим, поэтому я решил использовать flex-box, Я попробовал это некоторое время назад с фиксированным размером ширины, и он работал нормально, но теперь у меня есть процентная ширина, так что, похоже, Firefox это совсем не понравилось ...

Этот пример показывает, как я обычно ожидал, что flex-box будет работать, и он отлично работал в safari и chrome, но firefox просто игнорировал процентную ширину ... Я обнаружил, что это известная выпуск Firefox, но он старый, и я думал, что они уже решили его ...

Затем я попробовал что-то другое , чтобы обмануть Firefox, но все же это было не так, как я ожидал, потому что боковая панель имела разный размер от страницы к странице в зависимости от содержимого ...

В итоге я отказался от гибкого бокса с плавным расположением и использую что-то более простое, соответствующее моим потребностям ...

Но мне любопытно узнать, решит ли кто-нибудь эту проблему с помощью какого-либо обходного пути или мы все в очереди, чтобы это исправило Мозила ...

Спасибо!

1 Ответ

1 голос
/ 05 марта 2012

Я настоятельно не рекомендую использовать обходной путь margin-bottom: -99999px; padding-bottom: 99999px. Если вы хотите плавную компоновку (я предполагаю, что это вопрос?) С 14%, 86% разделением, просто используйте старый CSS вместо Flex.

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

Зачем заново изобретать колесо. Если вы ищете лучший способ размещения вашего сайта, попробуйте «сетку».

Это предполагает, что вам не нужен flex по какой-то конкретной причине, если вы это сделаете, то проигнорируйте это;). Кроме того, учитывайте обратную совместимость при использовании определенных атрибутов CSS3!

...