Internet Explorer 8에서 메뉴 탭이 올바르게 작동하지 않습니다.

Question

Internet Explorer 8 메뉴에서만 메뉴 탭이 올바르게 작동하지 않습니다. Internet Explorer 8에서 탭이 올바르게 작동하지 않습니다. 링크의 탭 위에있는 HTML 웹 페이지에서 IE8에서 작동하지 않습니다. 그들은 IE9, 사파리, 파이어 폭스, 오페라에서 일한다.

IE에서 문제는 탭을 클릭해도 열리지 않는다는 것입니다.

HTML :

div id="tab2" class="css-tabs"> 
     <ul class="noint11_menu"> 
      <li id="item-1"> <a href="#item-1">Shipping</a> 
       <div> 
        <p><img id="shippingtable" src="http://www.ubreakirepair.com/ebaysite/images/shippingtable.png"/></p> 
        <div class="footer">----------</div> 
       </div> 
      </li> 
      <li id="item-2"> <a href="#item-2">Payment</a> 
       <div> 
        <p>Tab Content 2</p> 
        <div class="footer">---------</div> 
       </div>     
      </li> 
      <li id="item-3"> <a href="#item-3">Returns</a> 
       <div id="notice"> 
        <p>content </p> 
        <div class="footer">---------</div> 
       </div> 
      </li> 
      <li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a> 
       <div> 
        <p>Tab Content 4</p> 
        <div class="footer">------------</div> 
       </div> 
      </li> 
     </ul> 
    </div></td> 

CSS : 당신이 그 탭을 보여주기에 의존하고 있는지

.css-tabs { 
    position: relative; 
    text-align: left; /* This is only if you want the tab items at the center */ 
    height: auto; 
    margin-left:-30px; 
    display: 
} 
.css-tabs ul.noint11_menu { 
    list-style-type: none; 
    display: inline-block; /* Change this to block or inline for non-center alignment */ 
} 
.css-tabs ul.noint11_menu > li { 
    display: block; 
    float: left; 
} 
.css-tabs ul.noint11_menu li > a { 
    color: #EEEEEE; 
    text-shadow: 1px 1px 1px #000; 
    font-family: 'MuliLight', Arial, sans-serif; 
    font-size: 14px; 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    border: 1px solid #002232; 
    padding: 5px 10px 5px 10px; 
    margin-right: 10px; 
    -moz-user-select: none; 
    cursor: pointer; 
    background: #014464; 

} 
.css-tabs ul.noint11_menu li > div { 
    display: none; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    color: #ccc; 
    text-align: left; 
    padding: 0; 
    margin-left: 32px; 
    background: #181818 /* added this */; 
    height:350px 

} 
.css-tabs ul.noint11_menu li > div > p { 
    border: transparent; 
    padding: 10px; 
    margin: 0; 
} 
.css-tabs ul.noint11_menu li > a:focus { 
    border-bottom: 1px solid #fff; 
} 
.css-tabs ul.noint11_menu li:target > a { 
    cursor: default; 
    border-bottom: 1px solid #fff; 
} 
.css-tabs ul.noint11_menu li:target > div { 
    display: block; 
} 
#item-1 div {display: block} 
#item-2 div { height:535px} 
#item-3 div { height:535px} 
#item-4 div { height:535px} 



.footer{color:#fff; text-align:center}​ 

Answer 1

IE8 does not support :target.

최상의 대안은 탭 콘텐츠를 다른 페이지로 분리하고 상단에 링크 집합을 사용하여 탐색하는 것입니다. 탐색 링크는 탭처럼 보이도록 스타일을 지정할 수 있으므로 사이트는 여전히 동일하게 보일 수 있습니다. 각 탭을 클릭하면 페이지가로드됩니다.

그 대안은 현대 브라우저가있는 사용자의 경우에도 앞뒤 단추가 사이트를 탐색하는 동안 예측 가능한 방식으로 작동하므로 덜 혼란 스럽습니다.

:target은 섹션 링크를 클릭 한 후 사용자가 점프 한 인 페이지 앵커를 강조 표시하는 데 더 적합합니다. 탭 컨트롤을 사용하여 페이지의 주요 콘텐츠가 숨겨져있어 가독성이 없거나 사용자에게 친숙하지 않은 것처럼 보입니다.

Answer 2

IE8에서 지원되지 않는 CSS 기능 :target을 사용하려고합니다.

이전 버전의 브라우저를 지원하려면 가장 좋은 해결책은 탐색기 디자인을 다시 생각하여 해당 브라우저에없는 최신 브라우저 기능을 사용하지 않는 것입니다.

그러나이 기능을 사용해야하는 경우 Selectivizr library에서 도움을 얻을 수 있습니다. 이것은 이전 버전의 IE에 다양한 최신 CSS 선택기에 대한 지원을 추가하는 polyfill 스크립트입니다.

여기에는 :target 선택자가 포함되어 있으므로 이론적으로 사이트에 Selectivizr을 추가하면 문제가 해결됩니다. 그러나 :target의 경우 Selectivizr은 IE8 만 지원하며, IE7 또는 IE6도 지원해야하는 경우 Selectivizr도 해당 기능을 많이 수행 할 수 있습니다.

(또한 Selectivizr에서는 jQuery와 같은 지원 라이브러리도 필요하지만 현재 페이지에 자바 스크립트가 전혀 없다는 점에 유의해야합니다. 추가 할 때 큰 부담이 될 수 있지만 적어도 IE8에서로드되도록 조건부 주석을 사용하여 코딩하여 영향을 최소화하십시오.