Flex, Mozilla и абсолютно позиционированные элементы

#html #css #mozilla #flexbox

Давно встречаю данный баг в Мозилле но так и не нашел решения как его победить.
Итак, есть родительский блок с тремя дочерними элементами:




	

	

	






Блок .child-3 имеет position:absolute и по логике вырван из потока. На родительский
блок задаем display:flex и, например, justify-content:space-between. Все браузеры включая
IE11 отрабатывают правильно: .child-1 и .child-2 разъезжаются к противоположным краям
.parent. Но в Mozilla это не так: она резервирует место для .child-3, которого в потоке
нет, и из-за этого .child-2 болтается где-то посередине родительского блока. Более
того, если .child-3 заменить на .parent:after со свойствами content:""; position:absolute
то ничего не изменится - под псевдоэлемент браузер все так же будет резервировать место
и рассчитывать положение элементов с учетом абсолютно-позиционированного элемента.

Как можно решить данную проблему?
    

Ответы

Ответ 1

Решил такую проблему, отказавшись от flexbox в пользу display: table.

Было 3 кнопки, расположенных по диагонали при помощи justify-content: space-between;
align-items: center и крайним элементам были даны align-self: flex-start / flex-end
соответственно. Потом в блок были добавлены скрытые прозрачные абсолютно спозиционированные
кнопки, и в мозилле верстка сломалась (выделялось место в потоке под скрытые кнопки,
и центральная кнопка смещалась) Пришлось вынести 3 изначальные кнопки в таблицу (каждая
в своей строке), и все заработало, как надо.


Ответ 2

Попробуйте указать в родительском блоке: flex-wrap: wrap, а в child-ах указать их
размеры. Используйте в данном случае не display: flex, а display: inline-flex.

Линейное построение, с переносом при указании размеров, перенесет второй элемент
влево при justify-content: space-between, если первый элемент занимает пространство
столько, что второй по своим размерам туда не влезет и не будет никакого центрирования
второго элемента. 

Ширину элемента лучше указывать через flex-basis.

Как убрать рамку вокруг button, input и некоторых других элементов в Firefox? [дубликат]

#css #firefox #mozilla

        
             
                
                    
                        
                            This question already has answers here:
                            
                        
                    
                
                        
                            Как в Firefox убрать рамку для элементов таблицы в фокусе?
                                
                                    (3 ответа)
                                
                        
                                Closed 2 года назад.
            
                    
Применяю такой способ:

* {
  outline: 0 !important;
}


В Chrome все работает, а вот Firefox наотрез отказывается принимать этот код. 
    

Ответы

Ответ 1

Данная проблема может возникнуть и на input'ах. При этом, блоки могут иметь еще и
лишний отступ. Поэтому надежнее будет написать так:

// Remove border and padding in Firefox
::-moz-focus-outer, ::-moz-focus-inner {
    border: 0;
    padding: 0;
}


Ответ 2

вот так

button::-moz-focus-inner 
{
  border: 0;
}

Отличие работы кода в Mozilla и Chrome

#button #mozilla #click

Есть код

    


При клике на кнопке на слово Button в Chrome выдаёт I, а Mozilla  - BUTTON. Почему
так и как сделать так, чтобы и в Mozilla выдаrвался самый глубокий элемент
    

Ответы

Ответ 1

Похоже, Firefox следует рекомендациям W3C:


  Content model:
  Phrasing content, but there must be no interactive content descendant.


То есть 

Как убрать рамку вокруг button, input и некоторых других элементов в Firefox? [дубликат]

На данный вопрос уже ответили: Как в Firefox убрать рамку для элементов таблицы в фокусе? 3 ответа Применяю такой способ:
* { outline: 0 !important; }
В Chrome все работает, а вот Firefox наотрез отказывается принимать этот код.

Ответ

Данная проблема может возникнуть и на input'ах. При этом, блоки могут иметь еще и лишний отступ. Поэтому надежнее будет написать так:
// Remove border and padding in Firefox ::-moz-focus-outer, ::-moz-focus-inner { border: 0; padding: 0; }