Список маркеров, которые не отображаются правильно в Internet Explorer - PullRequest
Новая
       18

Список маркеров, которые не отображаются правильно в Internet Explorer

2 голосов
/ 27 апреля 2011

У меня есть <ol> с некоторыми <li> в нем, в FF это выглядит хорошо, но по некоторым причинам в IE это выглядит так:

List Bullet weirdness in 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;
}

Есть идеи?

Спасибо,

Ответы [ 2 ]

6 голосов
/ 27 апреля 2011

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>
0 голосов
/ 27 апреля 2011

Вы можете попробовать добавить свойство 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;
}
...