2012-08-24 5 views
2

jQuery를 사용하여 UI의 탭에 둥근 모서리를 가져옵니다. 내 문제는,이 파이어 폭스와 IE9에서 잘 작동하지만 IE7과 IE8 (탭. 사각형처럼 보이는이 모든 사람에게 문제인가, 아니면?IE 7/8의 탭에 둥근 모서리가있는 CSS

<div id="fig"> 
     <div id="fig-tabs"> 
      <strong class="tab-current">1st tab</strong> <a href="" class="tab">2nd tab</a> <a href="" class="tab">3rd tab</a> 
     </div> 
...</div> 

과 CSS는 수정이 실패입니다

#fig-tabs { } 

strong.tab-current 
{ 
    background-color: #FFF; 
    padding: 3px 8px 7px 8px; 
    -moz-border-radius: 4px 4px 0px 0px; 
    border-radius: 4px 4px 0px 0px; 
    text-decoration: none; 
} 

a.tab 
{ 
    background-color: #999; 
    padding: 3px 8px 2px 8px; 
    -moz-border-radius: 4px 4px 0px 0px; 
    border-radius: 4px 4px 0px 0px; 
    text-decoration: none; 
} 

a.tab:hover { background-color: #9ffff; } 
+2

의 낳는다에 배경을 사용하여 을하는 고전적인 방법에 대해 당신이 jQuery를하고 대신 CSS의 를 사용하는 어떤 이유가 있습니까? 그리고 당신이 코드의 일부를 게시 할 수 [jsfiddle] (http://jsfiddle.net) 그래서 우리는 어떤 문서를 다루고 있는지 알고 있습니다. 함께? –

+0

예, CSS를 사용하고 IE 6-8을 지원해야하는 경우 CSS3 PIE (http://css3pie.com/) 사용을 고려하십시오. – mg1075

+0

지금 CSS를 사용했는데, Ie7/8에서 같은 문제가 발생합니다. – JNPW

답변

6

내가 당신의 문제는 당신이 작성하는 코드가 인터넷 익스플로러의 이전 버전에서 지원하지 않는 <canvas> 태그/요소를 사용한다는 것입니다 말하고 싶지만 시작합니다. What you can use

방금 ​​설정하는 CSS3에게 border-radius 속성을 사용하지 왜

당신의 반올림. e는 여전히 인터넷 익스플로러에서는 작동하지 않지만 코드 작성이 더 쉽고 편리합니다. 정말로이 시대에이 종류의 일은 css3을 사용하여 이루어져야합니다. IE 9 이전에 작동하는 호환성 라이브러리가 있습니다.

이전 브라우저 버전에서 둥근 모서리를 실제로 사용하려면 미리 생성 된 이미지를 사용해야합니다.

편집 : 다른 답변을 언급 한 바와 같이 당신은 인터넷 익스플로러 캔버스 라이브러리를 사용할 수 있지만 다음과 같은 캔버스 태그를 동적으로 생성 될 때

var el = document.createElement('canvas'); 
G_vmlCanvasManager.initElement(el); 
var ctx = el.getContext('2d'); 

EDIT2 당신에게 getContext 전화를 변경해야합니다 : 이제 문제는 IE 7/8에서도 css3 속성이 지원되지 않는다는 것입니다. 라이브러리를 사용해보십시오 (의견 중 하나는 당신이 그것을 here 발견 지원을 제공하는 라이브러리를 사용할 수 있습니다, 캔버스 요소는 IE7/IE8에서 지원되지 않습니다

0

무엇 div의

<div><!--top--> 
    <div><!--repeat--> 
    <div><!--bottom--> 

    </div> 
    </div> 
</div> 
관련 문제