143

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

สิ่งนี้ใช้ได้ดีใน Firefox และ Chrome แต่ใน IE8 ความทึบจะไม่เปลี่ยนแปลง

ฉันได้ลองการตั้งค่า CSS ที่หลากหลายโดยไม่ประสบความสำเร็จ

ตัวอย่างเช่น

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

การหยุด IE เปลี่ยนความทึบคืออะไร หมายเหตุ: ฉันได้ลองสิ่งนี้กับองค์ประกอบที่แตกต่างหลากหลายสลับไปตามลำดับของคำสั่ง CSS และใช้ IE ด้วยตัวเอง ฉันก็ลองใช้ดู

-ms-filter: "alpha(opacity=75)";

แต่ไม่ประสบความสำเร็จ

ฉันใช้หมดแล้วเพื่อลองปรับเปลี่ยนความทึบใน IE8

ความคิดใด ๆ

css internet-explorer-8 opacity

— มาร์คัสดาวนิง
แหล่งที่มา

คำถามที่เกี่ยวข้อง / ซ้ำกันนี้มีคำตอบของคุณฉันคิดว่า stackoverflow.com/questions/859000/opacity-in-web-pages

— Jeff Martin เมื่อ

ฉันเห็นคำถามนั้น - ปัญหาคือคำตอบ: & nbsp; & nbsp; ตัวกรอง: อัลฟา (ความทึบ = 50); / * internet explorer / & nbsp; & nbsp; ความทึบแสง: 0.5; / fx, ซาฟารี, โอเปร่า, โครเมียม * / & nbsp; & nbsp; -ms กรอง: "ProgID: DXImageTransform.Microsoft.Alpha (ทึบ = 50)"; / * IE8 * / ไม่ทำงานสำหรับฉัน (ฉันลองอีกครั้งเพื่อตรวจสอบอีกครั้ง) ฉันใช้มันกับ h3 ที่เป็นสีดำและหนา ใน Firefox และ Chrome การตั้งค่าความทึบจะเปลี่ยนเป็นสีเทาหัวเรื่องตามที่คุณคาดหวัง แต่ใน IE8 จะเป็นสีดำ

oops - ไม่ทราบว่าคุณไม่ได้ใช้ HTML ในความคิดเห็น - แต่ฉันคิดว่าคุณสามารถเห็นสิ่งที่ฉันพยายามจะพูด

ถ้าคุณลองสไตล์เหล่านั้นกับ div ที่เป็นสีทึบ อาจมี CSS อื่น ๆ เกิดขึ้นที่ขัดแย้งกัน

— เจฟมาร์ติน

ทำได้ดีนี่. ใช่ - เมื่อฉันทำ div อย่างง่ายให้ความสูงและความกว้างและสีพื้นหลังของสีแดงด้วยการตั้งค่าความทึบเหล่านั้นมันทำงานใน IE8 มันออกมากึ่งทึบแสง ฉันกำลังดิ้นรนเพื่อดูว่าปัญหาคืออะไร ฉันไม่ได้แก้ไขความทึบของสิ่งอื่นใดในสไตล์ชีทดังนั้นฉันจึงไม่สามารถคิดได้ว่าสิ่งใดที่จะขัดแย้งกับมันสำหรับ IE เท่านั้น

65

ไม่ทราบว่าจะใช้กับ 8 ได้หรือไม่ แต่ในอดีต IE ไม่ได้ใช้หลายรูปแบบกับองค์ประกอบที่ไม่มี "รูปแบบ"

โปรดดู: http://www.satzansatz.de/cssd/onhavinglayout.html

— Azeem.Butt
แหล่งที่มา

9

IE ไม่ได้ใช้หลายรูปแบบกับองค์ประกอบที่ไม่มี "รูปแบบ"

— Azeem.Butt

4

ที่ดี! ขอบคุณ นั่นคือปัญหา องค์ประกอบที่ฉันพยายามปรับความทึบสำหรับ (เช่น h3) ไม่ได้ "มีเค้าโครง" เมื่อฉันให้พวกเขามีความทึบทำงาน ทั้งหมดที่ฉันทำคือเพิ่มความกว้าง: 100%; เพื่อ h3 ขอบคุณที่ชี้นำฉันในทิศทางที่ถูกต้อง อย่างไรก็ตามดูเหมือนว่าจะบ้าคลั่ง (ถ้าไม่ใช่บั๊กซี) ที่ Internet Explorer ทำเช่นนี้

51

IE ไม่ได้ใช้รูปแบบมากมายกับองค์ประกอบมากมาย

— danwellman

1

@danwellman และจากนั้นก็ทำสิ่งอื่น ๆ "สนุก" อีกด้วย เย้.

— dudewad

ที่น่าสนใจคือ IE7 ไม่จำเป็นต้องใช้ "รูปแบบ" ฉันกำลังใช้ภาพพื้นหลังที่ตอบสนองต่อองค์ประกอบที่มีความสูงเป็นศูนย์padding-bottom: 100%และใน IE8 ความทึบไม่มีผลจนกว่าฉันจะตั้งค่าความสูงที่ชัดเจน IE7 ไม่ต้องการสิ่งนี้

— Kout

158

การตั้งค่าเหล่านี้ (เหมือนที่ฉันเขียน) ได้ให้บริการฉันเมื่อฉันต้องการ:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

— Gabriel McAdams
แหล่งที่มา

6

ขอบคุณฉันเชื่อว่า "filter: alpha (opacity = 70);" สำหรับ IE <8 อย่างไรก็ตามมันใช้งานไม่ได้ (สำหรับฉัน) ใน IE8 (ฉันเพิ่งตรวจสอบ) -moz-opacity ตอนนี้ฉันหมดความเชื่อไปแล้วและความทึบเป็นวิธีมาตรฐานในการทำสิ่งต่าง ๆ - ตามธรรมชาติแล้ว Microsoft ไม่ได้ใช้วิธีการทำสิ่งนั้น (วิธีง่ายเกินไป)

15

เพียงแค่ตั้งค่า "ความทึบ" และ "ตัวกรอง" ตามที่คุณอธิบายเพียงพอที่จะทำให้มันใช้ได้สำหรับฉันในทั้ง FF4 และ IE8 -moz-opacity ไม่จำเป็น

— demoncodemonkey

1

@Gabriel McAdams: ตัวกรอง: alpha (opacity = 70); ทำงาน (แต่ใน IE 8 เท่านั้น)

— Poonam Bhatt

@Gabriel มันทำงานได้ดีมาก! ฉันจะไม่มีปัญหาความทึบใน IE 7/8!

— MJCoder

1

ข้อมูลที่เฉพาะเจาะจงมากขึ้น: จริง ๆ แล้วมันเป็นจางในวิธีการที่เอาความโปร่งใส

— tmorell

49

คุณต้องตั้งค่า Opacity เป็นอันดับแรกสำหรับเบราว์เซอร์ที่ได้มาตรฐานและ IE รุ่นต่าง ๆ ดูตัวอย่าง:

แต่รหัสความทึบนี้ไม่ทำงานใน ie8

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

โปรดทราบว่าฉันตัด -moz เนื่องจาก Firefox เป็นเบราว์เซอร์ที่ได้มาตรฐานและบรรทัดนั้นไม่จำเป็น นอกจากนี้ -khtml จะถูกคิดค่าเสื่อมราคาดังนั้นฉันจึงยกเลิกรูปแบบนั้นเช่นกัน

นอกจากนี้ตัวกรองของ IE จะไม่ตรวจสอบความถูกต้องของมาตรฐาน w3c ดังนั้นหากคุณต้องการให้หน้าของคุณตรวจสอบความถูกต้องให้แยกสไตล์ชีทมาตรฐานของคุณออกจากสไตล์ชีท IE ของคุณโดยใช้คำสั่ง if IE ด้านล่าง:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

หากคุณแยกข้อผิดพลาดเช่นเว็บไซต์ของคุณจะตรวจสอบได้ดี

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

3

เพียงแค่ตั้งค่า "ความทึบ" และ "ตัวกรอง" ตามที่คุณอธิบายเพียงพอที่จะทำให้มันใช้ได้สำหรับฉันในทั้ง FF4 และ IE8 ส่วนที่ระบุว่า "/ * 2 บรรทัดถัดไป IE8 * /" ไม่จำเป็น

— demoncodemonkey

3

@demoncodemonkey: ถูกต้อง ทุกอย่างขึ้นอยู่กับเวอร์ชันที่คุณติดตั้ง หากคุณต้องการความเข้ากันได้สูงสุดฉันขอแนะนำทั้งหมด

— Kevin Florida

ถูกต้อง แต่: "เพื่อรับประกันว่าผู้ใช้ทั้ง Internet Explorer 7 และ 8 จะได้พบกับตัวกรองคุณสามารถรวมทั้งไวยากรณ์ที่แสดงไว้ด้านบนเนื่องจากความผิดปกติใน parser ของเราคุณต้องรวมไวยากรณ์ที่อัปเดตก่อนไวยากรณ์ที่เก่ากว่า เพื่อให้ตัวกรองทำงานอย่างถูกต้องในมุมมองที่เข้ากันได้ (นี่เป็นข้อผิดพลาดที่รู้จักและจะได้รับการแก้ไขเมื่อมีการออกรุ่นสุดท้ายของ IE8) ต่อไปนี้เป็นตัวอย่างสไตล์ชีท CSS: "(แหล่งที่มา: ลิงก์ )

— zrathen

@Kevin "ถ้าคุณต้องการความเข้ากันได้สูงสุดฉันขอแนะนำทั้งหมด" ถ้าอย่างนั้นคุณไม่ควรลบ -moz-opacity ใช่ไหม

— Spooky

ไม่จำเป็นต้องใช้เครื่องหมายคำพูดสำหรับ -ms-filter

— thdoan

17

ความโปร่งใสของอัลฟาเห็นได้ชัดว่าใช้ได้เฉพาะกับองค์ประกอบระดับบล็อกใน IE 8 ตั้งค่าการแสดงผล: บล็อก

— Bonnie V.
แหล่งที่มา

17

การใช้display: inline-block;งานบน IE8 เพื่อแก้ไขปัญหานี้

FWIW opacity: 0.75ทำงานบนเบราว์เซอร์ที่เป็นไปตามมาตรฐานทั้งหมด

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

5

CSS

ฉันเคยใช้สิ่งต่อไปนี้จากCSS-Tricks :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

เข็มทิศ

อย่างไรก็ตามวิธีแก้ปัญหาที่ดีกว่าคือการใช้Opacity Compass mixinสิ่งที่คุณต้องทำก็คือ@include opacity(0.1);จัดการปัญหาข้ามเบราว์เซอร์ให้คุณ คุณสามารถค้นหาตัวอย่างที่นี่

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

2

นี่คือคำตอบสำหรับ IE 8

และมันก็ทำงานเพื่อให้อัลฟาทำงานใน IE8 คุณต้องใช้ position atribute สำหรับองค์ประกอบนั้น ๆ

ตำแหน่ง: ญาติหรืออื่น ๆ

http://www.codingforums.com/showthread.php?p=923730

— สีแดง
แหล่งที่มา

2

คำตอบข้างต้นไม่ได้ผลสำหรับฉันดังนั้นฉันเพิ่งให้ภาพพื้นหลังโปร่งใสของแท็ก DIV แทนซึ่งเหมาะกับเบราว์เซอร์ทั้งหมด

— Darren Riches
แหล่งที่มา

1

รหัสนี้ใช้งานได้

filter: alpha(opacity = 50); zoom:1;

คุณต้องเพิ่มคุณสมบัติการย่อ / ขยายเพื่อให้ทำงานได้ :)

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

1

คุณยังสามารถเพิ่ม polyfil เพื่อเปิดใช้การใช้งานความทึบดั้งเดิมใน IE6-8

https://github.com/bladeSk/internet-explorer-opacity-polyfill

นี่เป็นโพลีไฟล์แบบสแตนด์อโลนที่ไม่ต้องการ jQuery หรือไลบรารี่อื่น ๆ มีข้อแม้เล็ก ๆ หลายประการที่ไม่สามารถใช้งานในรูปแบบอินไลน์ได้และสำหรับสไตล์ชีทใด ๆ ที่ต้องการโพลีฟิลทึบที่ต้องยึดติดกับนโยบายความปลอดภัยดั้งเดิม

การใช้งานนั้นง่ายมาก

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>

— Chris Marisic
แหล่งที่มา

Opacity CSS ไม่ทำงานใน IE8

CSS

เข็มทิศ