border-radius không hoạt động trên IE10

Question

Tôi cần có vùng chứa "DIV" với các góc tròn. Đoạn mã sau hoạt động hoàn hảo trên tất cả các trình duyệt ngoại trừ IE10 của tôi. Tôi không có đầu mối làm thế nào để làm cho nó hoạt động.

#about-kader { 
    width: 200px; 
    height: 180px; 
    float: left; 
    margin: 0px auto; 
    background-color: #9bafc4; 
    padding: 3px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    -ms-border-radius: 5px; 
    behavior: url(border-radius.htc); 
} 

Và đây là phần HTML, hãy:

<div id="about-kader"> 
... 
... 
... 
</div> 

Không có cách nào để thực hiện bất kỳ góc tròn có thể nhìn thấy trên IE10. Phiên bản tôi có là: 10.0.9200.16576, Cập nhật phiên bản: 10.0.5 (KB289530).

Answer 1

Chỉ thử sử dụng bán kính đường viền: 5px, nó có hoạt động không? Nếu có, sau đó thêm các thuộc tính bán kính phụ thêm từng cái một cho đến khi bạn tìm thấy vấn đề phát sinh. Tôi nghi ngờ rằng nó là một trong những thuộc tính border-radius phụ đang gây ra vấn đề. Tôi nghi ngờ rằng hành vi có thể là nguồn gốc của vấn đề.

Answer 2

Hành vi bán kính biên giới bị ảnh hưởng bởi chế độ tương thích trong IE10.

Nếu bạn nhấn F12, bạn có thể xem bảng điều khiển dành cho nhà phát triển và thay đổi cài đặt tương thích.

Nếu chế độ Tài liệu được đặt thành tiêu chuẩn IE7 hoặc IE8 thì bán kính đường biên 5px không hoạt động, tuy nhiên nếu chế độ tiêu chuẩn được đặt thành Tiêu chuẩn hoặc tiêu chuẩn IE9 thì nó hoạt động như mong đợi.

Tôi đã kết thúc việc tắt chế độ tương thích vì nó cũng phá vỡ hoạt động của các trang web khác mà tôi sử dụng.

Ravenstar68

Answer 3

Xin cảm ơn Flipbed's answer Tôi đã tìm thấy câu trả lời. Trên IE10, "border-radius" với tôi không hoạt động. Để làm cho nó hoạt động, cần phải xác định từng góc:

border-top-left-radius:5px; 
border-top-right-radius:5px; 
border-bottom-left-radius:5px; 
border-bottom-right-radius:5px; 

Thật vậy, trang web bạn đã gửi, thực hiện chính xác điều đó (xem nguồn trang). Nó cung cấp cho đầu ra hướng dẫn:

border-radius: 5px; 

nhưng nội bộ nó tuyên bố 4 góc riêng biệt như trên.

_{Điều này được trích xuất từ ​​câu hỏi và được đăng thay mặt OP.}