Dukungan untuk "batas-radius" di IE

158

Adakah yang tahu apakah / kapan Internet Explorer akan mendukung atribut CSS "radius batas"?

internet-explorer css Tony the Pony
sumber

Jawaban:

220

Iya! Ketika IE9 dirilis pada Januari 2011.

Katakanlah Anda menginginkan genap 15px di keempat sisi:

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

IE9 akan menggunakan default border-radius, jadi pastikan Anda memasukkannya dalam semua gaya Anda memanggil radius perbatasan. Maka situs Anda akan siap untuk IE9.

-moz-border-radiusuntuk Firefox, -webkit-border-radiusuntuk Safari dan Chrome.

Selanjutnya: jangan lupa mendeklarasikan pengkodean IE Anda yaitu9:

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

Beberapa pengembang malas memilikinya <meta http-equiv="X-UA-Compatible" content="IE=7" />. Jika tag itu ada, radius batas tidak akan pernah berfungsi di IE.

Kevin Florida
sumber
7
Agaknya jika Anda tidak menggunakan meta tag X-UA-Compatible Anda tidak perlu menambahkannya hanya untuk membuatnya bekerja di IE9?
teman
72
Anda harus meletakkan versi awalan vendor PERTAMA dan standar LAST sehingga jika browser mendukung standar yang sebenarnya maka ia akan menggunakannya bukan versi awalan vendor itu.
Jason Berry
4
Benar Anda tidak memerlukan meta tag .. Anda hanya perlu mengganti emulator ie7 jika sudah termasuk. Kalau tidak, jangan khawatir tentang itu.
Kevin Florida
3
FYI di IE9 beta saat ini 'radius batas' berfungsi dengan baik menggunakan nilai tunggal. Keempat nilai tidak diperlukan kecuali Anda benar-benar ingin mereka berbeda.
mikemaccana
2
@ thumbnailer: Terima kasih telah memperbarui sudut .. Alpha vs pertama dan beta vs IE9 diperlukan semua 4 sudut dideklarasikan. Saya baru saja mengunduh RC9 ie9 terbaru dan membiarkan saya menyatakan satu nilai .. Tidak yakin kapan itu berubah ..
Kevin Florida
46

Jawaban atas pertanyaan ini telah berubah sejak ditanyakan setahun yang lalu. (Pertanyaan ini saat ini adalah salah satu hasil teratas untuk Googling "yaitu batas-radius".)

IE9 akan mendukung border-radius.

Ada pratinjau platform yang tersedia yang mendukung border-radius . Anda akan memerlukan Windows Vista atau Windows 7 untuk menjalankan pratinjau (dan IE9 saat dirilis).

David Johnstone
sumber
18

Solusi dan alat praktis:

CSS3Pie menggunakan file .htc dan properti behaviour untuk mengimplementasikan CSS3 ke dalam IE 6 - 8.

Modernizr adalah sedikit javascript yang akan menempatkan kelas pada elemen html Anda, memungkinkan Anda untuk menyajikan definisi gaya yang berbeda untuk browser yang berbeda berdasarkan kemampuan mereka.

Jelas, keduanya menambahkan lebih banyak overhead, tetapi dengan IE9 karena hanya berjalan di Vista / 7 kita mungkin akan terjebak untuk sementara waktu. Pada Agustus 2010 Windows XP masih menyumbang 48% dari OS klien web.

Peter G
sumber
2
CSS3 PIE sejauh ini merupakan pilihan termudah dan paling tidak mengganggu untuk ini.
Chris Rasco
12

Itu tidak direncanakan untuk IE8. Lihat halaman Kompatibilitas CSS .

Selain itu tidak ada rencana yang dirilis. Ada rumor bahwa IE8 akan menjadi versi terakhir untuk Windows XP

Ben S
sumber
12
Anda jelas salah, karena IE9 seharusnya mendukung CSS3 juga, dan saya tidak melihat IE sekarat di mana pun. Seseorang
tolong
10
Ternyata IE8 adalah versi terakhir ... untuk Windows XP.
M. Dudley
7

<!DOCTYPE html> tanpa tag batas-radius ini tidak berfungsi di IE9, tidak perlu meta tag.

JAVAC
sumber
4

Gunakan -ms-border-radius: 15px, elemen apa pun yang menggunakan css -ms- kompatibel dengan IE.

Iago Bruno
sumber
2

Bagaimana dengan dukungan untuk radius batas DAN gradien latar belakang. Ya IE9 adalah untuk mendukung keduanya secara terpisah tetapi jika Anda mencampur keduanya gradien berdarah keluar dari sudut membulat. Di bawah ini adalah tautan ke contoh yang buruk tetapi saya telah melihatnya dalam pengujian saya sendiri juga. Harus mengambil screenshot :(

Mungkin pertanyaan sebenarnya adalah kapan IE akan mendukung standar CSS tanpa hacking hak milik MS-FILTER.

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

SigmaBetaTooth
sumber
IE10 akan mendukung gradien CSS3 yang tepat (pratinjau pengembang IE10 saat ini sudah melakukannya melalui -ms-linear-gradient). Jika Anda ingin gradien yang menghormati radius batas di IE9, Anda perlu menggunakan SVG (baik file SVG eksternal atau yang dikodekan dalam data URI) - lihat css3wizardry.com/2010/10/29/css-gradients-for- ie9 - juga CSS3 PIE akan segera mengotomatisasi ini, ada pengujian yang tersedia
lojjic
Perbaikan cepat adalah membungkusnya dengan elemen lain. Berikan elemen induk radius perbatasan yang sama dan atur overflow ke tersembunyi.
Senne
1

ASK - tidak menampilkan radius perbatasan dengan benar di IE 10 dan 11

Bagi mereka yang tidak mendapatkan -ms-border-radius: atau radius-border: untuk bekerja di IE 10,11 Dan itu membuat semua kotak kemudian ikuti langkah-langkah ini:

  1. Klik pada roda gigi di kanan atas browser IE
  2. Klik pada pengaturan tampilan Kompatibilitas
  3. Sekarang hapus centang pada 2 kotak yang dicentang secara default.

Pastikan kotak tidak dicentang seperti pada gambar

Allan Starr
sumber