2013-08-12 1 views
3

У меня есть служебная навигация, настроенная как неупорядоченный список, и я хотел бы использовать li :: before для вставки трубы "|" символ между каждой ссылкой в ​​утилите nav.li :: перед тем, как не работать в IE9

Вот моя утилита нав ...

<div class="horizontalnavlinks"> 
    <ul> 
     <li><a href="/ets/">Time & Expense</a></li> 
     <li><a href="/intrnl/voffice/TAC/default2.asp">TAC</a></li> 
     <li><a href="/people/search/srchframe.asp">Employee Information</a></li> 
     <li><a href="mailto:[email protected]">Can't Find It?</a> </li> 
    </ul> 
</div> 

Вот мои стили.

.horizontalnavlinks ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

.horizontalnavlinks ul li 
{ 
    display: inline; 
} 

.horizontalnavlinks li + li::before 
{ 
    content: " | "; 
    padding: 0 10px; 
} 

Трубы хорошо видны в Chrome и Safari, но не отображаются в IE9. Фактически IE9 игнорирует стиль ввода .horizontalnavlinks li + li::before.

Все, что я читаю, говорит, что IE поддерживает псевдо стили. Что дает?

+0

Можете ли вы настроить JSFiddle? –

ответ

2

Убедитесь, что у вас есть надлежащее объявление doctype (например, <!DOCTYPE html>), поскольку IE9, работающий в quirksmode, не поддерживает псевдоэлементы.

Для получения более подробной информации об использовании псевдоэлементов в IE9 см. this SO thread.

+0

Это не было бы ни одной из ситуаций. Если вы используете одиночные или двойные двоеточия, вам всегда понадобится doctype для использования ': before' и': after'. По крайней мере, в IE9. – BoltClock

+0

@BoltClock Мое первоначальное заявление было путаным (я предложил два возможных решения, которые должны были быть эксклюзивными). Я обновил свой ответ соответственно. –