IE9 tampaknya mampu menangani sudut bulat dengan menggunakan definisi standar CSS3 border-radius
.
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.
Saya juga melihat keanehan dengan bayangan yang ditampilkan sebagai garis hitam solid di bawah kotak dengan sudut bulat.
Berikut adalah gambar yang ditunjukkan di IE9:
Bagaimana saya bisa mengatasi masalah ini?
internet-explorer-9
gradient
compass-sass
css
SigmaBetaTooth
sumber
sumber
Jawaban:
Inilah salah satu solusi yang menambahkan gradien latar belakang, menggunakan data URI untuk membuat gambar semi-transparan yang menutupi semua warna latar belakang. Saya telah memverifikasi bahwa itu terpotong dengan benar ke radius perbatasan di IE9. Ini lebih ringan daripada proposal berbasis SVG tetapi sebagai downside, tidak bebas resolusi. Keuntungan lain: bekerja dengan HTML / CSS Anda saat ini dan tidak memerlukan pembungkus dengan elemen tambahan.
Saya mengambil PNG gradien 20x20 acak melalui pencarian web, dan mengubahnya menjadi data URI menggunakan alat online. Data yang dihasilkan URI lebih kecil dari kode CSS untuk semua kekacauan SVG itu, apalagi SVG itu sendiri! (Anda dapat menerapkan ini secara kondisional untuk IE9 hanya menggunakan gaya kondisional, kelas css khusus browser, dll.) Tentu saja, menghasilkan PNG berfungsi baik untuk gradien ukuran tombol, tetapi bukan gradien ukuran halaman!
HTML:
CSS:
sumber
background-size: 100% 103%; background-position:center;
yang lebih baik. 100% untuk kedua nilai menambahkan batas aneh di bagian atas dan bawah.Saya juga telah menangani masalah ini. "Solusi" lain adalah menambahkan div di sekitar item yang memiliki sudut gradien dan bulat. Buat div itu sama tinggi, lebar, dan nilai sudut bulat. Atur overflow menjadi tersembunyi. Ini pada dasarnya hanya topeng, tetapi itu bekerja untuk saya.
HTML:
CSS:
sumber
Saya pikir itu layak disebutkan bahwa dalam banyak kasus Anda dapat menggunakan kotak-bayangan inset untuk "memalsukan" efek gradien dan menghindari tepi jelek di IE9. Ini bekerja sangat baik dengan tombol.
Lihat contoh ini: http://jsfiddle.net/jancbeck/CJPPW/31/
sumber
box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
Anda juga dapat menggunakan PIE CSS3 untuk mengatasi masalah ini:
http://css3pie.com/
Tentu saja, itu mungkin berlebihan jika Anda hanya bergantung pada satu elemen dengan sudut bulat dan gradien latar belakang, tetapi itu adalah opsi untuk dipertimbangkan jika Anda memasukkan sejumlah fitur CSS3 umum pada halaman Anda dan ingin dukungan yang mudah untuk IE6 +
sumber
Saya juga menemukan bug ini. Saran saya adalah menggunakan gambar latar yang diulang untuk gradien di ie9. IE9 dengan benar mem-tile image di belakang batas-batas bulat (seperti pada RC1).
Saya gagal melihat bagaimana menulis 100 baris kode untuk menggantikan 1 baris CSS sederhana atau elegan. SVG memang keren dan semuanya, tetapi mengapa harus melalui semua itu ketika solusi yang lebih mudah untuk latar belakang gradien telah ada selama bertahun-tahun.
sumber
Saya juga terjebak dalam masalah yang sama dan menemukan bahwa IE tidak dapat membuat radius perbatasan dan gradien pada satu waktu, keduanya konflik, satu-satunya cara untuk mengatasi sakit kepala ini adalah dengan menghapus filter dan menggunakan gradien melalui kode svg, hanya untuk IE ..
Anda bisa mendapatkan kode svg dengan menggunakan kode warna gradien mereka, dari Microsoft situs ini (khusus dibuat untuk gradien ke svg):
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Nikmati :)
sumber
Cukup gunakan wrapper div (rounded & overflow hidden) untuk memotong radius untuk IE9. Sederhana, berfungsi lintas browser. SVG, JS, dan komentar kondisional tidak diperlukan.
sumber
Posting blog ini membantu saya: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
Pada dasarnya, Anda menggunakan komentar bersyarat untuk menghapus filter dan kemudian membuat SVG 'sprite' dari gradien yang dapat Anda gunakan sebagai gambar latar belakang.
Sederhana dan elegan!
sumber
url()
panggilan gambar CSS . Hanya satu yang tersisa, dengan demikian, lepaskan 1000 kondisional dan sajikan SVG untuk bg pada semua yang mendukungnya. Untuk semua orang, sajikan gambar raster. Kemudian retasan ini menjadi dikelola.IE9 menangani radius batas dan gradien bersama dengan benar. Masalahnya adalah bahwa IE9 membuat filter tepat selain gradien. Cara untuk menyelesaikannya dengan benar adalah dengan menonaktifkan filter pada deklarasi gaya yang memanfaatkan properti filter.
Sebagai contoh cara terbaik mengatasi ini:
Anda memiliki kelas tombol di stylesheet utama Anda.
Dalam stylesheet IE9 bersyarat:
Selama stylesheet IE9 direferensikan di kepala Anda setelah stylesheet utama Anda ini akan bekerja dengan sempurna.
sumber
Ada cara sederhana untuk membuatnya bekerja di bawah IE9 hanya dengan SATU elemen.
Lihatlah biola ini: http://jsfiddle.net/bhaBJ/6/
Elemen pertama mengatur Border-Radius. Elemen pseudo kedua mengatur Background Gradient.
Beberapa petunjuk utama:
Deklarasi elemen dasar berjalan seperti:
Deklarasi Pseudo-Elemen:
sumber
Saya memutuskan untuk menonaktifkan IE9 dari sudut pembulatan untuk mengatasi bug ini. Ini bersih, mudah dan dapat digunakan secara umum.
sumber
Topeng div di IE9 adalah ide yang bagus. Saya menyediakan beberapa kode lengkap untuk membantu memperjelas sedikit. Sementara saya tidak senang dengan membungkus tombol dalam DIV, saya pikir itu lebih mudah dipahami daripada menanamkan topeng PNG atau melalui semua upaya menggunakan SVG. Mungkin IE 10 akan mendukungnya dengan benar.
sumber
Sedang melakukan ini untuk saya dan begitu saya menghapus "filter:" baris perdarahan hilang. Plus saya menggunakan PIE.
Berdarah:
Tidak berdarah:
Perbaiki IE Shadow Cepat:
}
sumber
Anda bisa menggunakan bayangan untuk mencapai gradien, dan akan bekerja di Internet Explorer 9 dengan
border-radius
Sesuatu seperti ini:
sumber
Tidak yakin apakah ini salah satu atau solusi yang valid tapi ...
Saya menemukan bahwa asalkan radius perbatasan lebih besar dari lebar perbatasan, saya tidak mengalami masalah. Ketika mereka sama saya mendapatkan sudut persegi.
sumber
Menggunakan kompas dan sass Anda dapat dengan mudah mencapai ini seperti ini:
Kompas akan menghasilkan gambar SVG untuk Anda.
seperti itu:
}
}
sumber
Bekerja untuk saya ...
css
sumber