Блог

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

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

#css #internet-explorer-9 #css-float

#css #internet-explorer-9 #css-float

Вопрос:

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

Скрипка
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;
}

Комментарии:

1. извините, я использую Linux (без ie9) вы имеете в виду, что ul находится в левой части изображения или что маркеры находятся над изображением, но текст с правой стороны от него. потому что, если вы имеете в виду, что маркированные точки находятся на изображении, вам просто нужно установить правильные поля и отступы для li и ul (это в каждом браузере по-разному)

2. @micha маркированные точки отображаются в левой части изображения, а текст — в правой.

Ответ №1:

 list-style-position: inside;

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

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

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

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

Комментарии:

1. Извините, вероятно, следовало упомянуть об этом, но с list-style-position: inside; текст последнего маркера смещается, поэтому в нем больше текста, чем в других маркерах, чтобы проиллюстрировать это.

2. Не самое лучшее решение, но вот что: http://jsfiddle.net/fdHN6/3 /

3. Это не работает в режиме совместимости, поэтому мне придется использовать условное обозначение, но это нормально. Спасибо, чувак.

4. Я не слишком доволен тем, что мне приходится размещать текст с точным значением для заполнения, но это все, что я смог придумать на данный момент. Я дам вам знать, если найду лучшее решение; хотя не уверен, когда столкнусь с этой же проблемой. Рад, что смог помочь!

Ответ №2:

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

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

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

Комментарии:

1. Если вы используете text-indent, отступ будет только в первой строке элемента списка. Из-за этого ваше решение не подходит для многострочных элементов списка. Смотрите CSS-Reference

Ответ №3:

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

 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/

Кажется, работает нормально.

Ответ №4:

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

ul{display:table;}