테두리가 Internet Explorer에 표시되지 않습니다.

Question

왜 테두리가 IE 8-9에 표시되지 않을지 모르겠지만 10 이상을 확인하지 않았습니다. 또한 CSS :hover 효과가 작동하지 않으며 모달 팝업도 표시되지 않습니다. IE에 대한 해결 방법이 있는지 모르겠습니다.

그것은 FF와 크롬에서 완벽하게 작동

FIDDLE

HTML :

<div class="tree"> 
    <ul> 
     <li> 
      <a href="chairman"><span class="accent">Chairman/Owner</span><p>Name</p></a> 



      <ul> 
       <li> 
        <a href="financemanager"><span class="accent">Finance &<br> 
        Managing Director</span><span>Name</span></a> 

        <ul> 
         <li><a href="financeteam"><span class="accent">Finance 
         Team</span> <span>Name</span><br></a></li> 

         <li><a href="salesdirector"><span class="accent">Sales 
         Director</span><span>Name</span></a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS :

body { 
    width:100%; 
} 

* {margin: 0; padding: 0;} 

ul { 
    line-height:20px; 
} 

.tree ul { 
    padding-top: 20px; position: relative; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

.tree li { 
    float: left; text-align: center; 
    list-style-type: none; 
    position: relative; 
    padding: 20px 5px 0 5px; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

/*We will use ::before and ::after to draw the connectors*/ 

.tree li::before, .tree li::after{ 
    content: ''; 
    position: absolute; top: 0; right: 50%; 
    border-top: 1px solid #ccc; 
    width: 50%; height: 20px; 
} 
.tree li::after{ 
    right: auto; left: 50%; 
    border-left: 1px solid #ccc; 
} 

/*We need to remove left-right connectors from elements without 
any siblings*/ 
.tree li:only-child::after, .tree li:only-child::before { 
    display: none; 
} 

/*Remove space from the top of single children*/ 
.tree li:only-child{ padding-top: 0;} 

/*Remove left connector from first child and 
right connector from last child*/ 
.tree li:first-child::before, .tree li:last-child::after{ 
    border: 0 none; 
} 

/*Adding back the vertical connector to the last nodes*/ 

.tree li:last-child::before{ 
    border-right: 1px solid #ccc; 
    border-radius: 0 0px 0 0; 
    -webkit-border-radius: 0 0px 0 0; 
    -moz-border-radius: 0 0px 0 0; 
} 

.tree li:first-child::after{ 
    border-radius: 0px 0 0 0; 
    -webkit-border-radius: 0px 0 0 0; 
    -moz-border-radius: 0px 0 0 0; 
} 

/*Time to add downward connectors from parents*/ 
.tree ul ul::before{ 
    content: ''; 
    position: absolute; top: 0; left: 50%; 
    border-left: 1px solid #ccc; 
    width: 0; height: 20px; 
} 

.tree li a{ 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 13px; 
    display: inline-block; 

    border-radius: 0px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 

    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

/*Time for some hover effects*/ 
/*We will apply the hover effect the the lineage of the element also*/ 
.tree li a:hover, .tree li a:hover+ul li a { 
    background: #E9E9E9; color: black; border: 1px solid #94a0b4; 
} 
/*Connector styles on hover*/ 
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{ 
    border-color:#06C; 
} 

span.accent{ 
    background-color: #113963; 
    display: block; 
    margin: -5px -10px 5px; 
    padding: 5px; 
    color: white; 
    font-weight:bold; 
} 

모달 CSS :

.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.modalDialog > div { 
    width: 400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 5px; 
    background: #F4F4F4;  
} 

.close { 

    background: #FF2E28; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
} 

.close:hover { 
    background: #600; 
} 

.modalDialog + image { 
    border:solid 1px black; 
} 

Answer 1

MDN에 따르면 Internet Explorer < 9는 CSS3 ::before 유사를 지원하지 않습니다. 8을 지원하려면 CSS2 :before 의사를 사용해야합니다. 이것은 국경 문제를 해결할 것이다.

호버 문제는 의견에서 설명한대로 오른쪽 doctype을 선언하는 것과 관련이있을 수 있습니다.

모달의 문제는 IE에서 실제로 보이지 않는 다른 요소 앞에 있다는 것입니다. 이 실제로 표시 될 때 당신은 그것을 display: none을 설정 한 후 배치해야합니다 :

.modalDialog { 
    display: none; 
} 

.modalDialog:target { 
    display: block; 
} 

그 이유는 그 pointer-events CSS 속성 isn't supported in IE (또는 적어도 11 전). 슬프게도 IE8에서 모달 팝업을 완료하는 것은 CSS32 만 사용하기 때문에 어렵습니다. :target 의사 isn't supported in that version입니다.

이 답변의 모든 수정 사항을 피하십시오 : http://jsfiddle.net/V8H6T/12/.

Answer 2

롤, 내 머리를 긁적이 alot로 보았다. 대답은 간단하다 당신은 두 개의 콜론 대신 중 하나를 사용하는

을 밝혀이 여전히 약간의 스타일링 오류가 있지만

ul::before

이

ul:before

을해야하므로 그것들을 고쳐야 할 것입니다. 하지만 최소한 지금은 국경이 보입니다. : P