วิธีการเปิดใช้งานฟีเจอร์ CSS3 ใน Internet Explorer 6, 7 และ 8

18

ในขณะที่ IE9 ดูมีแนวโน้มมาก IE6, IE7 และ IE8 อาจจะหลอกหลอนเรามาหลายปีแล้วทำให้การแพร่กระจายของ CSS3 บนเว็บช้าลง

จำนวนโครงการที่ใช้ HTC และ JS จะรองรับ CSS3 ใน IE:

CSS3PIE
IE7.js
eCSStender
DD_roundies
border-radius.htc (มุมโค้ง)
เช่น-css3.htc
เช่น-css3.js

ฉันมีประสบการณ์กับ CSS3PIE เท่านั้น (ทำสิ่งที่ถูกปัดเศษในhttp://docs.composite.net/ ) และยกเว้นเม้าส์บนเอฟเฟกต์ที่ใช้งานได้ดีและเป็น CSS3 ที่บริสุทธิ์

ฟีเจอร์ CSS3 ใดที่โครงการต่าง ๆ นำมาสู่ IE และดีอย่างไร มีผู้ใดที่ชนะอย่างชัดเจน?

css3 internet-explorer-6

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

1

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

— John Conde

ฉันพบสิ่งนี้ในเว็บไซต์CSS3PIE css3pie.com/documentation/product-comparisonแต่ฉันคาดหวังว่ามันจะเอนเอียงดังนั้นคำถาม ต้องใช้ประสบการณ์ในโลกแห่งความเป็นจริงสักเล็กน้อยเพื่อให้ได้ความรู้สึกที่ดี

— mawtex

8

เนื่องจากไม่มีใครก้าวขึ้นมาได้ฉันจะพยายามตอบคำถามนี้ ส่วนใหญ่จะรวบรวมจากการอ่านhttp://css3pie.com/documentation/product-comparison/และ googling รอบ ๆ ฉันมีประสบการณ์กับ CSS3PIE เท่านั้น หากคุณรู้ว่าโครงการอื่นใดสามารถแก้ไขได้

CSS3PIEโดย Jason Johnston เพิ่มการสนับสนุนที่ดีสำหรับ Css3 border-radius, gradients, box-shadow ประสบการณ์ของฉันกับสิ่งนี้คือมันใช้งานได้ดีและได้รับการสนับสนุนอย่างดีสำหรับรัศมีชายแดน มีปัญหาสำหรับเอฟเฟกต์โฮเวอร์ (ฉันคาดหวังว่ารายการทั้งหมดในรายการนี้จะได้รับผลกระทบนี้) แต่ดูเหมือนไร้ที่ติเมื่อใช้กับ html แบบคงที่ ข้อมูลเพิ่มเติมที่http://css3pie.com/

ie-css3.jsโดย Keith Clark เพิ่มการสนับสนุนสำหรับตัวเลือกหลอกระดับ CSS3 จำนวนมาก มีขนาดเล็กมากเพราะมันใช้งานกับ js อื่น ๆ ที่คุณรวมเช่น jQuery สิ่งนี้สามารถทำงานได้ดีกับโครงการอื่น ๆ ในรายการนี้เช่น CSS3PIE ข้อมูลเพิ่มเติมที่http://www.keithclark.co.uk/labs/ie-css3/
UPDATEโครงการ ie-css.js ได้รับการเกิดใหม่ที่นี่: http://selectivizr.com/

IE9.jsโดย Dean Edwards ใช้งานได้กับ IE6, 7 และ 8 ทำให้ IE รองรับ PNG แบบโปร่งใส, ตัวเลือก CSS ใหม่เช่น parent> child และ: first-of-type, การวางตำแหน่งคงที่, รองรับความกว้างสูงสุด / นาที / สูง มันเป็นความประทับใจของฉันที่ได้ทำงานเป็นจำนวนมากในช่วงหลายปีที่ผ่านมา ความคิดเห็นบางอย่างเป็นบวกจริง ๆ บางคนไม่สนใจ ข้อมูลเพิ่มเติมที่http://code.google.com/p/ie7-js/

ecsstenderโดย Aaron Gustafson ใช้งานร่วมกับ IE6, 7 และ 8 ได้ในแบบแยกส่วนเพิ่มการรองรับ CSS3 selector, font-face, รัศมีชายแดน, box-shadow, สีและการแปลง มีเอกสารที่ดีมาก ข้อมูลเพิ่มเติมที่http://ecsstender.org/extensions

DD_roundiesโดย Drew Diller เพิ่มการรองรับขอบรัศมีและ png ข้อมูลเพิ่มเติมที่http://www.dillerdesign.com/experiment/DD_roundies/

border-radius.htcโดย Remiz Rahnas การสนับสนุนชายแดนรัศมีง่ายมาก ข้อมูลเพิ่มเติมที่http://code.google.com/p/curved-corner/

ie-css3.htcโดย Nick Fetchak การสนับสนุนบางอย่างสำหรับขอบรัศมีและ text-shadow CSS3PIE อ้างว่าทำขอบรัศมีให้ดีขึ้น ข้อมูลเพิ่มเติมที่http://www.fetchak.com/ie-css3/

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

3

นี่เป็นบทความที่ดีเกี่ยวกับ CSS3 และ IE6 จาก Smashing Magazine: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

— อเล็กซ์
แหล่งที่มา

3

บทความนี้เป็นคำแนะนำที่ดีเกี่ยวกับ "border-radius.htc" แต่ส่วนใหญ่เป็นรายการตัวกรอง CSS สำหรับ IE เท่านั้นที่สามารถเลียนแบบคุณสมบัติ CSS3 ในฐานะที่เป็นนักพัฒนาเว็บฉันต้องการที่จะไม่เขียนมากโค้ด CSS IE เฉพาะเก่า แต่มุ่งเน้น CSS มาตรฐานและมีการตอบสนองต่อการ IE ว่าเหมือน "ชายแดน radius.htc" และ "CSS3PIE" ไม่

— mawtex

0

ลองGoogle Chrome Frame ผู้ใช้ IE ที่ติดตั้งจะสามารถเรียกดูไซต์ของคุณในโปรแกรมแสดงผลของ Google Chrome ได้โดยไม่ต้องเปลี่ยนเบราว์เซอร์

แก้ไข: คุณยังสามารถใช้ไลบรารี JS ที่จัดทำโดย Google เพื่อแสดงข้อความถึงผู้ใช้ที่เชิญชวนพวกเขาให้ติดตั้ง Google Chrome Frame มันเป็นการติดตั้งเพียงคลิกเดียวเช่น Flash ไม่จำเป็นต้องรีสตาร์ทเบราว์เซอร์และรีเฟรชหน้าเว็บของคุณเมื่อเสร็จสิ้น

— แดนฟาบูลิช
แหล่งที่มา

ดังนั้นข้อเสนอแนะของคุณนั้นโดยทั่วไปแล้วจะเข้าถึงคนทุกคนที่จะไปเยี่ยมชมเว็บไซต์คำถามโปสเตอร์ในอนาคตด้วย IE6 / 7/8 และให้พวกเขาติดตั้ง Google Chrome Frame ก่อนที่พวกเขาจะไปเยี่ยม? จะไม่ง่ายกว่าหรือถ้าจะให้ผู้ใช้ IE ทั้งหมดในโลกเปลี่ยนมาใช้ Chrome แทน

— Nir

@Nir ฉันแก้ไขเพื่ออธิบายวิธีที่คุณสามารถให้ผู้ใช้ของคุณติดตั้ง GCF โดยใช้ไลบรารี JS ของ Google มันค่อนข้างดี

— Dan Fabulich

แม้เพียงคลิกเดียวติดตั้ง (BTW บน Vista คุณต้องใช้คำเตือนความปลอดภัย Ok 5 เพื่อติดตั้ง Flash - มากสำหรับคลิกเดียว) ฉันจะไม่ฝันขอให้ผู้ใช้ติดตั้งปลั๊กอินเบราว์เซอร์เพียงเพื่อให้ฉันสามารถใช้มุมโค้งมน (และ ฉันสงสัยว่าคนเดียวที่จะติดตั้งเป็นคนที่ไว้วางใจและชอบผลิตภัณฑ์ของฉันมาก - นั่นคือคนที่จะซื้อแม้ไม่มีมุมโค้งมน)

— Nir