Tạo các góc tròn trong IE7/IE8

Question

Tôi đang tạo các tab góc tròn, hoạt động tốt trong IE9, Mozilla và Chrome, nhưng không hoạt động trong IE7/IE8.

Đây là mã:

<div id="navbar"> 
<div id="holder"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About Us</a></li> 
<li><a href="#">Contact Us</a></li> 
<li><a href="#">News</a></li> 
</ul> 
</div> 
</div> 

#navbar {} 
#holder { 
border-bottom:1px solid #000; 
overflow:hidden; 
} 

#navbar #holder ul { 
margin:0; 
padding:0; 
list-style:none; 
margin-top:15px; 
} 

#navbar #holder ul li { } 
#navbar #holder ul li a { 
text-decoration:none; 
float:left; 
margin-right:5px; 
border:1px solid #000; 
padding:15px; 
text-align:center; 
width:90px; 
border-bottom:none; 
display:block; 
behavior:url(border-radius.htc); 
border-radius:5px 5px 0 0; 
} 

#navbar #holder ul li a:hover { 
background:#C09; 
color:#fff; 
} 

bạn có thể vui lòng cho tôi biết mã để nó làm việc cho IE7/IE8 cũng?

Answer 1

IE 7/8 không hỗ trợ border-radius. Tôi nghe IE9 mặc dù.

Trang web này chứa hack để làm đường viền tròn trong IE7/8 mặc dù: http://dimox.net/cross-browser-border-radius-rounded-corners/. Bạn sẽ cần phải tải về border-radius.htc và đặt mã sau trong CSS của bạn:

.rounded-corners { 
    behavior: url(http://yoursite.com/border-radius.htc); 
} 

Answer 2

Sử dụng jquery góc, nó sẽ làm việc trên tất cả các trình duyệt lớn

http://jquery.malsup.com/corner/

Bạn thậm chí có thể cấu hình các góc theo cách bạn thích !!

Answer 3

Internet Explorer hỗ trợ thuộc tính CSSborder-radiusnatively không cho đến khi phiên bản 9. Đối với phiên bản thấp hơn của IE, đánh dấu vào kvijayhari jQuery plugin đã đề cập, jQuery Corner.

Answer 4

bán kính biên giới được hỗ trợ ie-7, ie-8, ie-9 qua kiểm tra javascript hướng dẫn này làm thế nào để hiển thị bán kính biên giới tức là http://davidwalsh.name/css-rounded-corners

Answer 5

Có giải pháp sau:

1. CSSPie (http: //css3pie.com/ nhưng tập tin js nén của nó là 40 KB)

2. có một giải pháp sử dụng tập tin htc cho IE

   behavior: url(http://yoursite.com/border-radius.htc); 
        (almost 40 KB of size) 
   

   Hướng dẫn có thể được tìm thấy ở đây http://dimox.net/cross-browser-border-radius-rounded-corners/

3. Một giải pháp mà cá nhân tôi khuyên bạn nên là:

    jquery.corner.js (http://jquery.malsup.com/corner/) 
   

   Đó là tập tin nén js là 10 KB.