Как я могу иметь «позицию стиля списка снаружи» и плавающие элементы в IE9? - PullRequest
Новая
       26

Как я могу иметь «позицию стиля списка снаружи» и плавающие элементы в IE9?

1 голос
/ 11 ноября 2011

Следующую разметку я не могу изменить, так как она основана на пользовательском контенте. Проблема в том, что в IE9 маркеры в ul, которые находятся рядом с плавающим img, появляются на неправильной стороне изображения. Это только проблема в IE9. То, как ul оборачивает изображение, - это желаемое поведение и то, что я хотел бы сохранить, но это делает эту проблему действительно трудной для решения. Любые идеи о том, как решить эту проблему без изменения разметки и таким образом, чтобы кросс-браузер выглядел хорошо?

Fiddle http://jsfiddle.net/fdHN6/

РЕДАКТИРОВАТЬ: Я должен был упомянуть это, list-style-position: inside заставляет последнюю точку маркера, который имеет более одной строки текста, выровняться неправильно, поэтому одно это не очень хорошее решение. 

<html>
    <body>
        <div style="width:500px;">
            <img src="http://placekitten.com/g/200/303" alt="smelly cat" />
            <ul style="margin-left: 10px;">
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine!</li>
                <li>Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine! Mine</li>
            </ul>
        </div>
</body>
</html>

body{
    margin-left:35px;
}

img {
    margin:20px;
    float:left;
}

ul li {
    list-style-type: disc;
}

Ответы [ 4 ]

1 голос
/ 15 мая 2015

Сделать отображение ul в виде таблицы.

ul{display:table;}

1 голос
/ 20 декабря 2011

У меня была та же проблема, и мне удалось найти исправление.

У меня было изображение с плавающей точкой слева и UL с правой стороны.Я хотел, чтобы позиция в списке находилась снаружи, чтобы текст, занимающий несколько строк, выровнялся по левому краю.Однако в IE9 пули бегут налево, поверх изображения, а не плавают справа от изображения.

Поэтому я использую list-style-postion: inside;для UL, и я также добавил для него отрицательный текстовый отступ: -12px работал отлично для меня, вам нужно будет изменить его, пока он не будет соответствовать вашим потребностям.

1 голос
/ 08 июня 2012

Просто была такая же проблема. Я использовал 

ul {
 overflow: hidden;
 list-style-position: inside;
 text-indent: 1em;
 margin-left: 0;
}

li {
 padding-left: 1em;
}

переполнение скрыто, создайте новый контекст форматирования и заставьте поле «очистить» плавающий элемент. Таким образом пуля «уважает» всплывающее изображение.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Кажется, работает хорошо.

1 голос
/ 11 ноября 2011 
list-style-position: inside;

должен решить вашу проблему.

http://jsfiddle.net/fdHN6/1/

ОБНОВЛЕНИЕ: Используя псевдоэлементы, вы можете добиться аналогичного эффекта, сохраняя отступ текста:

http://jsfiddle.net/fdHN6/3/

...