Глюк Chrome

[Vlad02]

Верстаю сайт, обнаружил такой глюк выпадает иконка поиска. Происходит это когда добавляю блок с тегом form.

<div>    <div>        <form>        </form>    </div></div>

Проявляется этот глюк только в Chrome, даже в IE всё ок. С чего бы это происходит?

З.Ы. Про баги фона в курсе.

 

 

[afdw]

.nav {  float: none;}.nav ul {  float: right;}

И поменять местами меню и иконку поиска.

[Vlad02]

.nav {  float: none;}.nav ul {  float: right;}

И поменять местами меню и иконку поиска.

 

иконка поиска должна быть последней (справа), а не переносить её вперёд (налево).

Edited April 11, 2015 by Vlad02

[afdw]

 

.nav {  float: none;}.nav ul {  float: right;}

И поменять местами меню и иконку поиска.

 

иконка поиска должна быть последней (справа), а не переносить её вперёд (налево).

 

И поменять местами меню и иконку поиска.

 

Сделайте это в HTML.

[Vlad02]

как вариант, может быть и сделаю, но всё же, что за фигня? может кто знает.

[Switch74]

подозреваю, что в хроме ей тупо места не хватает вот она и переносится на след строку

[afdw]

подозреваю, что в хроме ей тупо места не хватает вот она и переносится на след строку

Хм, правда. Но странно, что она сама для себя место не освобождает. Похоже, что и правда глюк: пощелкал галочками, отвевающими за работу свойства, - заработало. F5 - сломалось.

Edited April 11, 2015 by afdw

[SelenIT]

У браузеров есть проблемы с определением ширины плавающих элементов со вложенными плавающими элементами. Что удивительно, лучше всего (по букве и духу стандарта) себя ведет как раз IE (и Опера Престо, мир кешу ее). Firefox не учитывает ширину вложенного флоата при обсчете текста внешнего, а Хром, выходит, и с двумя вложенными флоатами разобраться не в состоянии.

 

Мораль — не надо использовать float для всего (см. п. 11 здесь)! Для размещения элементов по горизонтали хватает других способов — флексбоксы (работающие уже даже в Опере Мини!), инлайн-блоки, display:table-cell на худой конец....

[raptor-dm]

У браузеров есть проблемы с определением ширины плавающих элементов со вложенными плавающими элементами. Что удивительно, лучше всего (по букве и духу стандарта) себя ведет как раз IE (и Опера Престо, мир кешу ее). Firefox не учитывает ширину вложенного флоата при обсчете текста внешнего, а Хром, выходит, и с двумя вложенными флоатами разобраться не в состоянии.

 

Мораль — не надо использовать float для всего (см. п. 11 здесь)! Для размещения элементов по горизонтали хватает других способов — флексбоксы (работающие уже даже в Опере Мини!), инлайн-блоки, display:table-cell на худой конец....

интересные статьи. спасибо за ссылки))

[Vlad02]

подозреваю, что в хроме ей тупо места не хватает вот она и переносится на след строку

Места хватает, баг появляется, когда добавляется именно форма, а 3-4 section ниже  с своими потомками и стилями, не приводят к этому, причём форма вставляется в другой блок, а не в тот где эта "беда" находится. Здесь тупо закоментил форму и всё ок.

флексбоксы (работающие уже даже в Опере Мини!)

 

Это всё хорошо, но IE8 живее всех живых.

 

а Хром, выходит, и с двумя вложенными флоатами разобраться не в состоянии.

 

Он в состоянии, пока форма не появилась.

 

У браузеров есть проблемы с определением ширины плавающих элементов со вложенными плавающими элементами.

 

За это спасибо, когда-то читал, но забыл.

Edited April 12, 2015 by Vlad02

[Vlad02]

Мораль — не надо использовать float для всего (см. п. 11 здесь)

По поводу глупостей можно по подробней?

[Sergik+]

По поводу ие8 так скажу, недавно предложили присоединится к коллективу одно

из моих требований было не ниже ие11 верстать, коллектив единодушно поддержал.

Я и сейчас крупный проект верстаю, поддержка эксплорера вообще не требуется,

флексбоксы в полный рост использую.

[Vlad02]

По поводу ие8 так скажу, недавно предложили присоединится к коллективу одно

из моих требований было не ниже ие11 верстать, коллектив единодушно поддержал.

Я и сейчас крупный проект верстаю, поддержка эксплорера вообще не требуется,

флексбоксы в полный рост использую.

Везёт вам.

[afdw]

IE8 живее всех живых

Нет, просто его заставляют поддерживать. На самом деле он давно мёртв.

[Sergik+]

 

 

Везёт вам.

 

Не совсем везет, во всем остальном полный капец а не проект, разрабатывал

структуру проекта полностью заказчик, до меня два верстальщика просто ушли,

они ничо умнее не придумали как просто все элементы спозиционировать на

бакграунд, свою часть я более менее неплохо сделал но сейчас заставляют

много правок делать у прошлых верстальщиков (мне очень не нравится такая

работа), чтобы было представление то там примерно 60-70 страниц только

основных. Короче доверстаю и больше никогда ни за какие деньги не возьму

такую работу, отвращение к верстке вырабатывается после таких проектов.

[SelenIT]

IE8 живее всех живых

Даже в таком состоянии он прекрасно поддерживает и инлайн-блоки, и display:table-* без костылей.

 

Он в состоянии

...но лишь если не подходить близко и не дышать. О том и речь: плавающий блок без заданной ширины, на ширину которого влияют плавающие блоки внутри него — карточный домик, который может рухнуть от малейшего ветерка даже издали. Спецификация для этого случая написана так, что целый W3C без бутылки не разберется, в официальных тестах на поддержку CSS эта ситуация упущена, поэтому браузеры могут (пока) трактовать ее как хотят получается. Не надо особо полагаться на такие конструкции. Наглядный пример, подтверждающий ту статью)

[Vlad02]

Не надо особо полагаться на такие конструкции.

Спасибо, учту.

[SelenIT]

Собственно, подумал, что как раз для этого случая (внутри nav только два блока, который должны быть рядом по горизонтали) логичный быстрый фикс — поставить на nav display:flex. Flex у контейнера отменяет float у непосредственных потомков, поэтому в современных браузерах будет работать предсказуемо. А в старых будет, как и раньше, работать плавучая магия

[Vlad02]

SelenIT, спасибо, я переделал, слегка, по своему.