Hỗ trợ cho bán kính biên giới đường sắt trong IE


158

Có ai biết nếu / khi Internet Explorer sẽ hỗ trợ thuộc tính CSS "bán kính đường viền" không?

Câu trả lời:


220

Đúng! Khi IE9 được phát hành vào tháng 1 năm 2011.

Giả sử bạn muốn có 15px thậm chí ở cả bốn phía:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 sẽ sử dụng mặc định border-radius, vì vậy chỉ cần đảm bảo bạn bao gồm điều đó trong tất cả các kiểu gọi bán kính đường viền. Sau đó, trang web của bạn sẽ sẵn sàng cho IE9.

-moz-border-radiusdành cho Firefox, -webkit-border-radiusdành cho Safari và Chrome.

Hơn nữa: đừng quên khai báo mã hóa IE của bạn là eg9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Một số nhà phát triển lười biếng có <meta http-equiv="X-UA-Compatible" content="IE=7" />. Nếu thẻ đó tồn tại, bán kính đường viền sẽ không bao giờ hoạt động trong IE.


7
Có lẽ nếu bạn không sử dụng thẻ meta Tương thích X-UA, bạn không cần thêm nó chỉ để làm cho nó hoạt động trong IE9?
thepeer

72
Bạn nên đặt phiên bản tiền tố của nhà cung cấp FIRST và LAST tiêu chuẩn để nếu trình duyệt hỗ trợ tiêu chuẩn thực tế thì nó sẽ sử dụng phiên bản đó thay vì phiên bản tiền tố của nhà cung cấp.
Jason Berry

4
Đúng bạn không cần thẻ meta .. bạn chỉ cần thay thế trình giả lập eg7 nếu nó được bao gồm. Nếu không, đừng lo lắng về nó.
Kevin Florida

3
FYI trong 'bán kính biên giới' IE9 hiện tại hoạt động đúng bằng một giá trị duy nhất. Tất cả bốn giá trị không bắt buộc trừ khi bạn thực sự muốn chúng khác nhau.
mikemaccana

2
@nailer: Cảm ơn bạn đã cập nhật các góc .. Bản alpha vs và beta vs IE9 đầu tiên yêu cầu cả 4 góc được khai báo. Tôi vừa tải xuống tức là RC RC mới nhất và nó cho phép tôi khai báo một giá trị .. Không chắc chắn khi nào nó thay đổi ..
Kevin Florida

46

Câu trả lời cho câu hỏi này đã thay đổi kể từ khi được hỏi một năm trước. (Câu hỏi này hiện là một trong những kết quả hàng đầu cho Google "bán kính biên giới".)

IE9 sẽ hỗ trợ border-radius.

Có một platform preview sẵnhỗ trợ border-radius . Bạn sẽ cần Windows Vista hoặc Windows 7 để chạy bản xem trước (và IE9 khi nó được phát hành).



18

Một cách giải quyết và một công cụ tiện dụng:

CSS3Pie sử dụng các tệp .htc và thuộc tính hành vi để triển khai CSS3 vào IE 6 - 8.

Modernizr là một chút javascript sẽ đưa các lớp vào thành phần html của bạn, cho phép bạn cung cấp các định nghĩa kiểu khác nhau cho các trình duyệt khác nhau dựa trên khả năng của chúng.

Rõ ràng, cả hai đều bổ sung thêm chi phí hoạt động, nhưng với IE9 do chỉ chạy trên Vista / 7, chúng tôi có thể bị kẹt trong một thời gian khá dài. Tính đến tháng 8 năm 2010, Windows XP vẫn chiếm 48% hệ điều hành máy khách web.


2
CSS3 PIE cho đến nay là tùy chọn dễ nhất và ít xâm phạm nhất cho việc này.
Chris Rasco

12

Nó không được lên kế hoạch cho IE8. Xem trang Tương thích CSS .

Ngoài ra, không có kế hoạch đã được phát hành. Có tin đồn rằng IE8 sẽ là phiên bản cuối cùng cho Windows XP


12
Bạn rõ ràng đã sai, vì IE9 cũng được cho là hỗ trợ CSS3 và tôi không thấy IE chết ở bất cứ đâu. Ai đó hãy giết IE
Starx

10
Hóa ra IE8 là phiên bản cuối cùng ... dành cho Windows XP.
M. Dudley

7

<!DOCTYPE html> không có thẻ này-radius Border không hoạt động trong IE9, không cần thẻ meta.



4

Sử dụng -ms-border-radius: 15px, bất kỳ yếu tố nào sử dụng css -ms- đều tương thích với IE.



2

Điều gì về hỗ trợ cho bán kính đường viền và độ dốc nền. Có IE9 là để hỗ trợ cả hai một cách riêng biệt nhưng nếu bạn trộn cả hai thì độ dốc chảy ra từ góc tròn. Dưới đây là một liên kết đến một ví dụ nghèo nhưng tôi cũng đã thấy nó trong thử nghiệm của riêng tôi. Nên chụp ảnh màn hình :(

Có lẽ câu hỏi thực sự là khi nào IE sẽ hỗ trợ các tiêu chuẩn CSS mà không cần hack độc quyền MS-FILTER.

http://frrifcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx


IE10 sẽ hỗ trợ các gradient CSS3 thích hợp (bản xem trước của nhà phát triển IE10 hiện tại đã thực hiện thông qua -ms-linear-gradient). Nếu bạn muốn độ dốc tôn vinh bán kính đường viền trong IE9, bạn cần sử dụng SVG (tệp SVG bên ngoài hoặc tệp được mã hóa trong URI dữ liệu) - xem css3wizardry.com/2010/10/29/css-gradrons-for- tức là 9 - cũng là CSS3 PIE sẽ sớm tự động hóa việc này, có một bản dựng thử nghiệm có sẵn
lojjic

Một sửa chữa nhanh chóng là bọc nó trong một yếu tố khác. Đặt phần tử cha có cùng bán kính đường viền và đặt phần tràn của nó thành ẩn.
Senne

1

GIẢI QUYẾT - không hiển thị chính xác bán kính đường viền trong IE 10 và 11

Đối với những người không nhận được -ms-Border-radius: hoặc Border-radius: để hoạt động trong IE 10,11 Và nó hiển thị tất cả hình vuông sau đó làm theo các bước sau:

  1. Nhấp vào bánh xe ở phía trên bên phải của trình duyệt IE
  2. Nhấp vào cài đặt Chế độ xem tương thích
  3. Bây giờ bỏ chọn 2 hộp được kiểm tra theo mặc định.

Đảm bảo rằng các hộp được bỏ chọn như trong pic

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.