Почему на Iphone переносится текст на следующую строку после изображения?

Question

[mosikus]

Здравствуйте. Помогите, пожалуйста, я уже не знаю что делать. Есть *код*, на андроиде отображается замечательно, а на айос текст после стрелочки съезжает вниз (см. скрин). Сразу скажу - добавление маркера через background мне не подходит, поэтому добавляю через img.

Answer 1

[Stopy]

Сделай изображению float: left, либо display: inline-block

Comments

[mosikus]

Нет, не помогло (

[Mikhail Osher]

Font Awesome рисует свои иконки через inline-block

[Stopy]

Mikhail Osher, там не FA

[Stopy]

durak22212, измените структуру вот таким образом,

<summary>
        <div><img src="..."/>Summary1</div>
</summary>

а для img сделайте то что я описал выше

[profesor08]

Stopy там флекс

[Ankhena]

profesor08, и флекс не очень работает с summary

[profesor08]

Ankhena, множество элементов, введенных в html5, до сих пор работаю непонятно как, и никакой стандартизации нет. Поэтому единственный верных выход - не использовать их вовсе, благо их реализация простая. Для details, summary вообще примитивная.

[Mikhail Osher]

Stopy, я имел ввиду, мол "делайте inline-block, как это делается в проверенных решениях".

Answer 2

[Ankhena]

Потому что вы применяете флекс к summary
https://github.com/philipwalton/flexbugs#flexbug-9

p.s. и замените img на фон или контент у псевоэлемента.

Answer 3

[profesor08]

Задай фиксированную ширину для картинки.

width: 20px;
flex: 0 0 20px;

Для div задай display: inline-block