2013-08-12 1 views
3

나는 유틸리티 목록을 정렬되지 않은 목록으로 설정하고 li :: before를 사용하여 파이프 "|"를 삽입하고 싶습니다. 기호는 유틸리티 탐색기의 각 링크 사이에 있습니다.li :: before 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; 
} 

배관 파이프

는 크롬과 사파리에 큰 표시하지만, IE9에 표시되지 않습니다. 사실 IE9는 입력을 무시합니다 .horizontalnavlinks li + li::before 스타일.

내가 읽은 모든 것은 의사 스타일을 지원합니다. 뭐라 구요?

+0

JSFiddle을 설치해 주시겠습니까? –

답변

2

quirksmode에서 실행되는 IE9는 의사 요소를 지원하지 않으므로 적절한 doctype 선언 (예 : <!DOCTYPE html>)을 사용하고 있는지 확인하십시오.

IE9에서 의사 요소 사용에 대한 자세한 내용은 this SO thread을 참조하십시오.

+0

이것은 어느 쪽의 상황도 아닙니다. 싱글 콜론이나 더블 콜론을 사용하든 항상': before'와': after'를 사용하려면 doctype이 필요합니다. IE9 이상. – BoltClock

+0

@BoltClock 원래 문장이 혼란 스러웠습니다 (독점적 인 두 가지 가능한 솔루션을 제안했습니다). 그에 따라 내 대답을 업데이트했습니다. –