2009-03-02 3 views
5

Я пытаюсь выяснить, как создать добавочный упорядоченный список, который в настоящее время нацелен на IE6 и IE7.Внесение списка в элементы списка упорядоченного списка?

E.G. Это должно оказать что-то, как показано ниже:

1.0 
    1.1 
    1.2 
    1.3 
2.0 
    2.1 
    2.2 

Из того, что я понимаю, что это возможно создать в CSS с чем-то вроде этого:

UL, OL { counter-reset: item; } 
LI { display: block } 
LI:before { content: counters(item, "."); counter-increment: item } 

Однако, конечно же, IE6 и IE7 не поддерживают это.

Какие параметры доступны для создания соответствующего добавочного списка в IE6/7? Я застрял в том, чтобы жестко кодировать это.? К сожалению, использование JavaScript не является вариантом.

Есть ли обновленные методики для новых браузеров?

+0

O Кстати, спасибо Эндрю для исправления форматирования. –

ответ

0

Если javascript не является вариантом (и, следовательно, также я не предполагаю, что нет вспышки), извините, что у вас нет вариантов для клиентского решения. Если у вас есть сценарий на стороне сервера, который генерирует ваш HTML, вы можете нажать на заказ на сервер и просто создать вывод на клиенте, используя CSS как неупорядоченный список без пули. IE6 - ваш лимитирующий фактор здесь, и этого не так много. Извините, что являюсь плохими новостями.

0

Если JavaScript не является вариантом, вам придется жестко запрограммировать его/реализовать на стороне сервера.

Положительная сторона: он будет работать для других менее способных пользовательских агентов/устройств (думаю, браузер BlackBerry и т. Д.) Сразу.

1

XSLT (включая XSLT 1.0) может генерировать многоуровневые последовательности нумерации с <xsl:number>.

+0

Это похоже на возможность, так как конечный результат - строгий XHTML 1.0. Спасибо всем за быстрые ответы. Любые другие предложения будут более чем счастливо рассмотрены. –

1

Вот CSS единственное решение (должно работать в IE8 и выше):

<ol> 
    <li> 
     Heading 
     <ol> 
      <li>list</li> 
      <li>list</li> 
     </ol> 
    </li> 
    <li> 
     Heading 
     <ol> 
      <li>list</li> 
      <li>list</li> 
     </ol> 
    </li> 
</ol> 



ol{ 
    list-style-position:inside; 
    list-style-type: none; 
    counter-reset:mainNum; 
} 

ol li:before{ 
    content: counter(mainNum) ".0"; 
    counter-increment:mainNum; 
} 

ol ol{ 
    counter-reset:item; 
} 

ol ol li{ 
    list-style-type:none 
} 

ol ol li:before{ 
    content: counter(mainNum) "." counter(item) " "; 
    counter-increment:item; 
} 
Смежные вопросы