รองรับ“ border-radius” ใน IE

ไม่มีใครทราบว่า / เมื่อ Internet Explorer จะสนับสนุนแอตทริบิวต์ "border-radius" CSS หรือไม่?

ใช่ เมื่อ IE9 เปิดตัวในเดือนมกราคม 2554

สมมติว่าคุณต้องการ 15px ที่เท่ากันทั้งสี่ด้าน:

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

IE9 จะใช้ค่าเริ่มต้นborder-radiusดังนั้นโปรดตรวจสอบให้แน่ใจว่าคุณได้ระบุไว้ในทุกรูปแบบที่เรียกว่ารัศมีเส้นขอบ จากนั้นเว็บไซต์ของคุณจะพร้อมสำหรับ IE9

-moz-border-radiusสำหรับ Firefox -webkit-border-radiusสำหรับ Safari และ Chrome

นอกจากนี้อย่าลืมประกาศรหัส IE ของคุณคือ ie9:

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

<meta http-equiv="X-UA-Compatible" content="IE=7" />บางคนขี้เกียจมีนักพัฒนา หากแท็กนั้นมีอยู่รัศมีเส้นขอบจะไม่ทำงานใน IE

คำตอบของคำถามนี้เปลี่ยนไปตั้งแต่ถูกถามเมื่อปีที่แล้ว (ปัจจุบันคำถามนี้เป็นหนึ่งในผลลัพธ์อันดับต้น ๆ สำหรับ "ขอบเขตรัศมีคือ" ของ Google)

IE9 border-radiusจะให้การสนับสนุน

มีการแสดงตัวอย่างแพลตฟอร์มเป็นใช้ได้ซึ่งสนับสนุน border-radiusคุณจะต้องใช้ Windows Vista หรือ Windows 7 เพื่อเรียกใช้งานตัวอย่าง (และ IE9 เมื่อวางจำหน่าย)

ในขณะที่คุณกำลังรอ .. เบราว์เซอร์ข้ามมุมโค้ง (รัศมีชายแดน)

วิธีแก้ปัญหาและเครื่องมือที่มีประโยชน์:

CSS3Pieใช้ไฟล์. htc และคุณสมบัติลักษณะการทำงานเพื่อนำ CSS3 ไปใช้ใน IE 6 - 8

Modernizrเป็นจาวาสคริปต์ที่จะเพิ่มคลาสให้กับองค์ประกอบ html ของคุณซึ่งช่วยให้คุณสามารถกำหนดนิยามสไตล์ที่แตกต่างให้กับเบราว์เซอร์ที่แตกต่างกันตามความสามารถของพวกเขา

เห็นได้ชัดว่าทั้งสองเพิ่มค่าใช้จ่ายมากขึ้น แต่ด้วย IE9 เนื่องจากทำงานบน Vista / 7 เท่านั้นเราอาจติดอยู่นานพอสมควร ตั้งแต่เดือนสิงหาคม 2010 Windows XP ยังคงมีสัดส่วน 48% ของระบบปฏิบัติการเว็บไคลเอ็นต์

ไม่ได้วางแผนไว้สำหรับ IE8 ดูหน้าเข้ากันได้ CSS

ยิ่งไปกว่านั้นยังไม่มีแผนออก มีข่าวลือว่าIE8 จะเป็นเวอร์ชั่นล่าสุดสำหรับ Windows XP

<!DOCTYPE html> ไม่มีรัศมีเส้นขอบของแท็กนี้ไม่สามารถใช้งานได้ใน IE9 ไม่จำเป็นต้องใช้เมตาแท็ก

การอัปเดตคำถามนี้อย่างรวดเร็ว IE9 จะสนับสนุนขอบเขตรัศมีตาม: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

ใช้-ms-border-radius: 15pxองค์ประกอบใด ๆ ที่ใช้ css -ms- เข้ากันได้กับ IE

ปัญหารัศมีมุมของ IE จะแก้ไข

http://kbala.com/ie-9-supports-corner-radius/

สิ่งที่เกี่ยวกับการสนับสนุนรัศมีชายแดนและการไล่ระดับสีพื้นหลัง ใช่ IE9 รองรับทั้งสองอย่างแยกจากกัน แต่ถ้าคุณผสมสองสีไล่ระดับสีออกมาจากมุมมน ด้านล่างเป็นลิงก์ไปยังตัวอย่างที่ไม่ดี แต่ฉันได้เห็นมันในการทดสอบของฉันเองเช่นกัน ควรถ่ายภาพหน้าจอ :(

บางทีคำถามจริงคือเมื่อใด IE จะสนับสนุนมาตรฐาน CSS โดยไม่มี MS-FILTER hacks ที่เป็นกรรมสิทธิ์

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

แก้ไขแล้ว - แสดงขอบรัศมีไม่ถูกต้องใน IE 10 และ 11

สำหรับผู้ที่ไม่ได้รับ -ms-border-radius: หรือ border-radius: ให้ทำงานใน IE 10,11 และมันจะแสดงผลสี่เหลี่ยมทั้งหมดแล้วทำตามขั้นตอนเหล่านี้:

1. คลิกที่ล้อเฟืองที่มุมขวาบนของเบราว์เซอร์ IE
2. คลิกที่การตั้งค่ามุมมองที่เข้ากันได้
3. ตอนนี้ยกเลิกการเลือก 2 กล่องที่ตรวจสอบโดยค่าเริ่มต้น