คำถามเกี่ยวกับองค์ประกอบที่เลือกใน HTML ได้รับการยกขึ้นในหลาย ๆ ที่และในโครงการเมื่อไม่นานมานี้ฉันได้พบกับคำถามเล็ก ๆ สองข้อเกี่ยวกับองค์ประกอบที่เลือก มาสรุปกันที่นี่ อย่างแรกคือที่มีชื่อเสียงที่สุด: ปัญหาทั่วไปที่ชั้นลอย Div ไม่สามารถครอบคลุมองค์ประกอบที่เลือกได้ภายใต้ IE6 ก่อนอื่นมีตัวอย่างต่อไปนี้: หมายเหตุ: ถ้าคุณดูภายใต้ Firfox และ IE7
คำถามเกี่ยวกับองค์ประกอบที่เลือกใน HTML ได้รับการยกขึ้นในหลาย ๆ ที่และในโครงการเมื่อไม่นานมานี้ฉันได้พบกับคำถามเล็ก ๆ สองข้อเกี่ยวกับองค์ประกอบที่เลือก มาสรุปกันที่นี่
บทความที่เกี่ยวข้อง: การแก้ปัญหาของชั้น div ที่ถูกปกคลุมด้วยเลเยอร์แฟลช
อย่างแรกคือที่มีชื่อเสียงที่สุด: ปัญหาทั่วไปที่ชั้นลอย Div ไม่สามารถครอบคลุมองค์ประกอบที่เลือกได้ภายใต้ IE6 ก่อนอื่นมีตัวอย่างต่อไปนี้:
หมายเหตุ: หากคุณดูทั้งภายใต้ Firfox และภายใต้ IE7 ผลลัพธ์ก็เหมือนกัน: ชั้นลอย A, B และ C อาจเป็นความจริงตามปกตินั่นคือองค์ประกอบที่เลือกด้านล่างจะถูกบล็อก อย่างไรก็ตามภายใต้ IE6 มีสามสถานการณ์ที่แตกต่างกันเลเยอร์ลอย A ยังคงเป็นปกติ ชั้นลอย BODY BODY BODY BODY ครอบคลุมองค์ประกอบที่เลือก แต่เฟรมของชั้นลอยไม่สามารถครอบคลุมองค์ประกอบที่เลือกได้ ชั้นลอย 3 ไม่สามารถครอบคลุมองค์ประกอบที่เลือกได้เลย เหตุผลสำหรับปรากฏการณ์นี้คือใน IE6 เบราว์เซอร์ถือว่าองค์ประกอบเลือกเป็นองค์ประกอบระดับหน้าต่าง ในเวลานี้ Div หรือองค์ประกอบสามัญอื่น ๆ ไม่สามารถครอบคลุมองค์ประกอบที่เลือกได้ไม่ว่า z-index จะตั้งค่าความสูงเพียงใด แต่การเลือกสามารถถูกบล็อกโดย iframe ที่เป็นองค์ประกอบระดับหน้าต่าง นี่คือวิธีที่ตัวอย่างข้างต้นทำ ชั้นลอย C เป็นเพียงชั้นลอย ฉันจะไม่พูดถึงเรื่องนี้มากขึ้นที่นี่เพียงแค่ดูโครงสร้างของชั้นลอย B:
<div class = condentDiv> <iframe class = maskiframe> </iframe> <div class = maindiv> เลเยอร์ลอย b </div> </div>
ใช้ div เพื่อนำเนื้อหาจริง div และองค์ประกอบ iframe เข้าด้วยกันและสไตล์ที่สอดคล้องกันของพวกเขาคือ:
.Containdiv {ตำแหน่ง: สัมบูรณ์; ด้านบน: 140px; ซ้าย: 60px; } .maskiframe {ตำแหน่ง: สัมบูรณ์; ซ้าย: -1px; ด้านบน: -1px; z -index: -1; ชายแดน: 1px solid #000; ความสูง: 50px; ความกว้าง: 50px; _height: 48px; _width: 48px;}. maindiv {พื้นหลัง: #ebac3b; width: 50px; ความสูง: 50px;};}
ชั้นลอย B ใช้ iframe เพื่อตำแหน่งอย่างแน่นอนและตั้งค่า z -index: -1; ใน CONTESSDIV จากนั้นอนุญาตให้ MAINDIV ที่วางเนื้อหาด้านล่างเพื่อครอบคลุม iFRAME ในเวลานี้ IFRAME สามารถครอบคลุมองค์ประกอบที่เลือกและทำให้ MainDiv ครอบคลุมองค์ประกอบที่เลือกได้เช่นกัน อย่างไรก็ตามเลเยอร์ลอยตัว B ยังคงไม่สมบูรณ์เนื่องจากเส้นขอบ iframe ของชั้นลอย B ที่นี่ใช้เส้นขอบ iframe iframe นั้นสามารถครอบคลุมการเลือกได้ แต่เส้นขอบไม่สามารถทำได้ดังนั้นชั้นลอยจึงเกิดขึ้น
ชั้นลอย A แก้ปัญหานี้และประสบความสำเร็จในการคิดในอุดมคติ โดยพื้นฐานแล้วมันเหมือนกับเลเยอร์ลอยตัว B ยกเว้นว่ามันทำให้ Iframe มากกว่า Maindiv ขึ้น, ลง, ซ้ายและขวาจากนั้นให้เส้นขอบ maindiv ด้วยวิธีนี้เส้นขอบที่ลอยอยู่นั้นจัดทำโดย Maindiv และ Maindiv ทั้งหมดและชายแดนอยู่บน iFrame ดังนั้นเอฟเฟกต์ในอุดมคติจะเกิดขึ้นได้!
ปัญหาที่สองของการเลือกคือปัญหาของการสร้างตัวเลือกแบบไดนามิกภายใต้ IE ดูตัวอย่างของคำถามที่สองด้านบน เมื่อคลิกที่ลิงก์ (จำกัด FF) คุณสามารถเพิ่มองค์ประกอบตัวเลือก 3 ตัวในองค์ประกอบที่เลือกภายใต้ FF แต่เป็นไปไม่ได้ภายใต้ IE; เมื่อคลิกที่ลิงค์ (ทั่วไป) คุณสามารถเพิ่มองค์ประกอบตัวเลือก 3 ตัวในองค์ประกอบที่เลือกภายใต้ IE และ FF เหตุผลก็คือลิงค์แรกคือการเพิ่มองค์ประกอบตัวเลือกผ่านแอตทริบิวต์ InnerHTML ขององค์ประกอบที่เลือก
document.getElementById (addselect) .innerhtml = ABC;
ไม่มีปัญหากับสิ่งนี้ใน FF แต่ IE ไม่สามารถเพิ่มองค์ประกอบลูกเลือกลงในองค์ประกอบ SELECT ด้วยวิธีนี้ แต่วิธีการที่ได้รับจากลิงค์ที่สองนั้นจำเป็น: จำเป็น:
document.getElementById (addselect) .options.add (ตัวเลือกใหม่ (a, a, false, true));