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

158

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

internet-explorer css

220

ใช่ เมื่อ 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

— เควินฟลอริด้า
แหล่งที่มา

7

สมมุติว่าคุณไม่ได้ใช้เมตาแท็ก X-UA- ที่ใช้ร่วมกันได้คุณไม่จำเป็นต้องเพิ่มเมตาแท็กเพื่อให้มันใช้งานได้ใน IE9?

— thepeer

72

คุณควรจะใส่คำนำหน้ารุ่นของผู้จัดจำหน่าย FIRST และ LAST มาตรฐานเพื่อให้หากเบราว์เซอร์รองรับมาตรฐานจริงแล้วมันจะใช้แทนแทนที่จะเป็นเวอร์ชันนำหน้าของผู้ขาย

— Jason Berry

4

ถูกต้องคุณไม่จำเป็นต้องใช้เมตาแท็ก .. คุณเพียงแค่ต้องเปลี่ยนอีมูเลเตอร์ ie7 หากรวมอยู่ด้วย มิฉะนั้นไม่ต้องกังวลกับมัน

— เควินฟลอริด้า

3

FYI ใน IE9 รุ่นเบต้า 'รัศมีเส้นขอบ' ทำงานได้อย่างถูกต้องโดยใช้ค่าเดียว ไม่จำเป็นต้องใช้ค่าทั้งสี่ยกเว้นว่าคุณต้องการให้ค่านั้นแตกต่างกัน

— mikemaccana

2

@ thumbnailer: ขอบคุณสำหรับการอัพเดทมุม .. อัลฟาและเบต้าตัวแรกของ IE9 ต้องการทั้ง 4 มุมที่ประกาศ ฉันเพิ่งดาวน์โหลด ie9 RC ล่าสุดและแจ้งให้ฉันทราบค่าหนึ่งค่า .. ไม่แน่ใจว่าเมื่อเปลี่ยนไป ..

— Kevin Florida

46

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

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

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

— David Johnstone
แหล่งที่มา

27

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

— หลุยส์ Melgratti
แหล่งที่มา

18

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

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

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

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

— ปีเตอร์จี
แหล่งที่มา

2

CSS3 PIE เป็นตัวเลือกที่ง่ายและรบกวนน้อยที่สุดสำหรับเรื่องนี้

— Chris Rasco

12

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

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

— เบ็น
แหล่งที่มา

12

เห็นได้ชัดว่าคุณผิดเพราะ IE9 ควรสนับสนุน CSS3 ด้วยและฉันไม่เห็นว่า IE กำลังจะตายทุกที่ ใครบางคนกรุณาฆ่า IE

— Starx

10

ปรากฎว่า IE8 เป็นรุ่นสุดท้าย ... สำหรับ Windows XP

— M. Dudley

7

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

— javac
แหล่งที่มา

6

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

— simonrjones
แหล่งที่มา

4

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

— Iago Bruno
แหล่งที่มา

2

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

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

— jaya
แหล่งที่มา

2

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

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

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

— SigmaBetaTooth
แหล่งที่มา

IE10 จะรองรับการไล่ระดับสี CSS3 ที่เหมาะสม (ภาพตัวอย่างนักพัฒนา IE10 ปัจจุบันทำอยู่แล้วผ่าน -ms-linear-gradient) หากคุณต้องการการไล่ระดับสีที่ให้รัศมีเส้นขอบใน IE9 คุณต้องใช้ SVG (ไฟล์ SVG ภายนอกหรือไฟล์ที่เข้ารหัสใน URI ข้อมูล) - ดูcss3wizardry.com/2010/10/29/css-gradients-for- ie9 - CSS3 PIE ก็จะทำสิ่งนี้โดยอัตโนมัติในเร็ว ๆ นี้จะมีการสร้างแบบทดสอบให้ใช้งานด้วย

— lojjic

การแก้ไขอย่างรวดเร็วคือการห่อในองค์ประกอบอื่น ให้องค์ประกอบหลักมีรัศมีเส้นขอบเดียวกันและตั้งค่าการไหลล้นให้ซ่อน

— Senne

1

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

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

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

ตรวจสอบให้แน่ใจว่าไม่มีการทำเครื่องหมายในช่องดังรูป

— อัลลันสตาร์
แหล่งที่มา