#html #css #internet-explorer #html-lists
#HTML #css #internet-explorer #html-списки
Вопрос:
У меня есть файл, в котором есть <ol> некоторые <li> ‘s, в FF это выглядит хорошо, но по какой-то причине в IE это выглядит так:
HTML:
<ol start="1">
<li>Free gifts click here</li>
<li>Free gifts click here</li>
<li>Bonus gifts</li>
</ol>
CSS:
ol {
list-style: none outside none;
}
li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
}
Есть идеи?
Спасибо,
Комментарии:
1. Как это выглядит в FF / IE, когда вы удаляете поля?
2. Я не думаю, что вы предоставляете здесь достаточно информации. Я не могу воспроизвести это. jsfiddle.net/Xv3k9 — работает в IE6-9. jsbin.com/ejeno6 — (Режим причуд) работает в IE8. Не могли бы вы предоставить тестовый пример или оперативную ссылку на эту страницу?
3. Я думаю, что вы создали несколько стилей для родительского элемента списка (ol), что приводит к следующему .. Добавьте полный htmlкод, из которого вы получаете ошибку
4. Это из системы внутренней сети, я не могу опубликовать ссылку.. Я использовал firebug для извлечения всего соответствующего css
5. Вам нужно создать тестовый пример, в котором возникает ошибка. Попробуйте использовать полный исходный код вашей страницы в Интрасети ( НЕ используйте Firebug. Используйте обычный «Просмотр исходного кода».). Скопируйте соответствующие встроенные таблицы стилей (как внутри
<style>/*CSS here*/</style>) в свой тестовый документ. Продолжайте удалять содержимое и проверять, что ошибка все еще присутствует в IE. Когда у вас будет минимально возможный рабочий тестовый пример, добавьте этот код в свой вопрос.
Ответ №1:
Здесь где-то задействован hasLayout, это причина <ol> неправильной нумерации, а также нескольких других странностей списков, вам нужно будет опубликовать больше CSS для списка, чтобы мы могли увидеть, есть ли обходной путь для вашего случая, но пока вот код, который его воспроизведет
ol {
list-style: none outside none;
background: #444;
color: #fff;
}
li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
zoom: 1;
}
главное, чтобы hasLayout не отображался в li элементе, для этого вам нужно сделать так, чтобы IE не производил никакого подсчета!, в этом случае левое поле означает, что для вычисления ширины требуется подсчет — так что, если эти элементы внутри списка являются ссылками, возможно, вы могли бы убрать левое поле из li и вместо этого добавить отступы к ссылкам?
определенно нужно больше кода для варианта использования, хотя
Обновить:
некоторые проблемы с упорядоченными; списками неизлечимы, и рекомендуемое решение — обернуть ol в div и применить к ним любую ширину и цвет, а также любую высоту к вложенным элементам (например, внутренним ссылкам), чтобы сами элементы списка можно было оставить по умолчанию
Смотрите раздел «Списки» на; О наличии макета
Некоторые из этих проблем не могут быть устранены, поэтому, когда требуются маркеры, лучше избегать размещения в списках и элементах списка. Если необходимо применить какое-либо измерение, это лучше применить к другим элементам: например, ширина может быть применена к внешней оболочке, а высота — к содержимому каждого элемента списка.
итак, принимая это во внимание и предполагая, что элементы вашего списка содержат ссылки (они говорят, нажмите здесь ;))
div {
width: 180px;
overflow: hidden;
background: #444;
color: #fff;
}
ol {
padding: 0 0 0 30px;
margin: 0;
}
li {
margin-bottom: 12px;
}
a {
background: #444;
color: #fff;
text-decoration:none;
display: block;
line-height: 30px;
}
a:hover {
color: #444;
background: #fff;
}
с
<div>
<ol start="1">
<li><a href="#">Free Gifts Click Here</a></li>
<li><a href="#">Free gifts click here</a></li>
<li><a href="#">Bonus gifts</a></li>
</ol>
</div>
Комментарии:
1. 1 за воссоздание этого и объяснение. Это не то, с чем я сталкивался раньше.
2. @thirtydot, спасибо, это проблема.. добавлена ссылка на статью satzansatz, где подробно объясняются странности, которые могут возникнуть, радуйтесь, когда HL войдет в историю 😉
Ответ №2:
Возможно, вы захотите попробовать добавить свойство float: left; к каждому li :
li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
}
Редактировать: Также для дальнейшего использования вы можете захотеть сделать это, просто чтобы, если вы добавите будущие правила для, li они не перекрывались и ol li оставались наиболее специфичными.
ol li {
list-style: decimal outside none;
margin-left: 30px;
margin-bottom: 12px;
}