ในกระบวนการออกแบบเพจ HTML เรามักจะประสบปัญหาที่เกิดจากองค์ประกอบของแบบฟอร์มที่ครอบคลุมองค์ประกอบสไตล์ รูปที่ 1 เป็นตัวอย่างทั่วไป อย่าประมาทปัญหาที่ดูเหมือน "ระดับต่ำ" นี้ไม่ใช่เรื่องแปลกแม้แต่ในเว็บไซต์ขนาดใหญ่บางแห่ง บทความนี้สำรวจสาเหตุที่แท้จริงของปัญหานี้และเสนอวิธีแก้ไข - เหตุผลที่ฉันพูดถึงวิธีแก้ไขมากกว่าวิธีแก้ปัญหาแบบถาวรก็เนื่องมาจากยักษ์ใหญ่ทั้งสองอย่าง Microsoft และ NetScape ยังไม่มีมาตรการตอบโต้
1. แสดงลำดับความสำคัญขององค์ประกอบ HTML
องค์ประกอบแบบฟอร์มที่ใช้กันทั่วไปใน HTML ได้แก่ พื้นที่ข้อความ (TEXTAREA), กล่องรายการ (SELECT), กล่องป้อนข้อความ (ประเภทอินพุต=ข้อความ), กล่องป้อนรหัสผ่าน (ประเภทอินพุต=รหัสผ่าน), กล่องอินพุตวิทยุ (ประเภทอินพุต=วิทยุ) ตรวจสอบกล่องอินพุต (ประเภทอินพุต = ช่องทำเครื่องหมาย) ฯลฯ องค์ประกอบที่ไม่ใช่รูปแบบทั่วไป ได้แก่ แท็กลิงก์ (A), แท็ก DIV, แท็ก SPAN, แท็ก TABLE ฯลฯ เหตุผลพื้นฐานว่าทำไมองค์ประกอบแบบฟอร์มจึงแทนที่องค์ประกอบสไตล์นั้นอยู่ในกฎลำดับความสำคัญในการแสดงผลเริ่มต้นขององค์ประกอบ HTML องค์ประกอบของแบบฟอร์ม
องค์ประกอบ HTML ทั้งหมดนี้สามารถแบ่งออกเป็นสองประเภทตามความต้องการในการแสดงผล ได้แก่ องค์ประกอบที่มีหน้าต่างและองค์ประกอบที่ไม่มีหน้าต่าง องค์ประกอบที่มีหน้าต่างประกอบด้วย: องค์ประกอบ SELECT, องค์ประกอบ OBJECT, ปลั๊กอิน และองค์ประกอบ IFRAME ใน IE 5.01 และเวอร์ชันก่อนหน้า องค์ประกอบแบบไม่มีหน้าต่างประกอบด้วย: องค์ประกอบ HTML ทั่วไปส่วนใหญ่ เช่น ลิงก์และแท็ก TABLE องค์ประกอบแบบฟอร์มส่วนใหญ่ยกเว้นองค์ประกอบ SELECT และองค์ประกอบ IFRAME ใน NS6+/IE 5.5 และใหม่กว่า ปัญหาที่กล่าวถึงในบทความนี้ส่วนใหญ่เกี่ยวข้องกับองค์ประกอบ HTML ที่มีหน้าต่าง จุดสำคัญของปัญหาคือระบบปฏิบัติการจะแสดงองค์ประกอบที่มีหน้าต่างอยู่ด้านหน้าองค์ประกอบที่ไม่มีหน้าต่างตามค่าเริ่มต้น
2. ประเภทเบราว์เซอร์และลำดับความสำคัญในการแสดงผล
ตามประเภทของเบราว์เซอร์ ลำดับการแสดงองค์ประกอบ HTML ก็แตกต่างกันเช่นกัน ซึ่งสรุปได้ดังนี้
⑴Netscape/Mozilla
ในเวอร์ชันก่อน NS Browser 6.0 องค์ประกอบของฟอร์มจะมีลำดับความสำคัญสูงกว่าองค์ประกอบ HTML อื่นๆ เสมอ แต่ในเบราว์เซอร์ NS 6+ ลำดับการแสดงขององค์ประกอบ IFRAME และองค์ประกอบแบบฟอร์มทั้งหมดถูกกำหนดโดยค่าของแอตทริบิวต์ z-index ของ CSS หรือตามลำดับที่ปรากฏในหน้า HTML ยกเว้น SELECT องค์ประกอบ.
⑵อินเทอร์เน็ตเอ็กซ์พลอเรอร์
ในเบราว์เซอร์ IE เวอร์ชันล่าสุด (6.0) องค์ประกอบ IFRAME และองค์ประกอบแบบฟอร์มทั้งหมดจะกำหนดลำดับความสำคัญในการแสดงผลตามค่าแอตทริบิวต์ z-index หรือลำดับที่ปรากฏในหน้า HTML ยกเว้นองค์ประกอบ SELECT
⑶ โอเปร่า
ในเบราว์เซอร์ Opera เวอร์ชันล่าสุด (7.10*) องค์ประกอบแบบฟอร์มทั้งหมด รวมถึง SELECT จะได้รับการจัดลำดับความสำคัญในการแสดงผลตามแอตทริบิวต์ z-index หรือลำดับที่ปรากฏในหน้า HTML อย่างไรก็ตาม เบราว์เซอร์ Opera เวอร์ชันล่าสุดไม่แสดง IFRAME เป็นองค์ประกอบที่ไม่มีหน้าต่าง IFRAME ถือเป็นองค์ประกอบที่มีหน้าต่างและมีความสำคัญเหนือกว่าองค์ประกอบที่ไม่มีหน้าต่างทั้งหมดในลำดับการแสดงผล
3. แอตทริบิวต์ดัชนี CSS z
เรารู้ว่าแอตทริบิวต์ z-index ของ CSS สามารถใช้เพื่อควบคุมลำดับการซ้อนทับขององค์ประกอบ HTML ใดๆ เมื่อแสดงขึ้นมา เมื่อองค์ประกอบ HTML หลายรายการซ้อนทับกันในพื้นที่เดียวกัน องค์ประกอบที่มีค่าดัชนี z มากกว่าจะเขียนทับองค์ประกอบนั้นด้วยค่าดัชนี z ที่น้อยกว่า
แต่ค่าแอตทริบิวต์ดัชนี z นั้นไม่มีอำนาจทุกอย่าง ตามที่กล่าวไว้ก่อนหน้านี้ องค์ประกอบที่มีหน้าต่างจะแสดงด้านหน้าองค์ประกอบที่ไม่มีหน้าต่างเสมอ และค่าแอตทริบิวต์ดัชนี z มีบทบาทชี้ขาดระหว่างองค์ประกอบประเภทเดียวกันเท่านั้น องค์ประกอบที่มีหน้าต่างและองค์ประกอบที่ไม่มีหน้าต่างเปรียบเสมือนการวาดภาพบนผืนผ้าใบที่แตกต่างกันสองผืนในหน้าต่างเบราว์เซอร์เดียวกัน องค์ประกอบทั้งสองประเภทนั้นมีอยู่ในตัวเอง และแอตทริบิวต์ z-index จะสัมพันธ์กับองค์ประกอบอื่นๆ บนผืนผ้าใบเดียวกันเท่านั้น เตะเข้า
4. การเยียวยา
สำหรับเบราว์เซอร์ปัจจุบัน วิธีแก้ไขที่มีประสิทธิภาพมากกว่าคือ: เมื่อองค์ประกอบแบบไม่มีหน้าต่างจำเป็นต้องถูกคลุมด้วยองค์ประกอบหน้าต่าง ให้ใช้สคริปต์เพื่อซ่อนองค์ประกอบหน้าต่างแบบไดนามิก นี่คือตัวอย่างที่สมบูรณ์:
<html><หัว>
<ประเภทสไตล์=ข้อความ/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px สีดำทึบ;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
ช่องว่างภายใน-ซ้าย:2px;ช่องว่างภายใน-ขวา:2px;เส้นขอบ:2px สีดำทึบ;
ดัชนี z:100;การมองเห็น:ซ่อน;}
#lb_1{ตำแหน่ง:สัมบูรณ์;ซ้าย:10px;ด้านบน:40px; }
</สไตล์>
<ประเภทสคริปต์=ข้อความ/จาวาสคริปต์>
var isActive = เท็จ;
ฟังก์ชั่น showMenu(){
isActive = จริง;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(เมนูย่อย).style.visibility=visible;
-
ฟังก์ชั่นซ่อนเมนู(){
isActive = เท็จ;
setTimeout('ซ่อน()',100);
-
ฟังก์ชั่นซ่อน(){
ถ้า(!isActive){
document.getElementById(เมนูย่อย).style.visibility = ซ่อนเร้น;
document.getElementById(lb_1).style.visibility=visible;
-
-
ฟังก์ชั่น setStyle (รายการเมนู) {
isActive = จริง;
menuItem.style.BackgroundColor = สีเทา;
menuItem.style.color = #FFFFFF
-
ฟังก์ชั่น setDefault (รายการเมนู) {
isActive = เท็จ;
menuItem.style.พื้นหลังสี = ;
menuItem.style.color=
ซ่อนเมนู();
-
</script></head><body>
<div id=main style=position:absolute;width:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>เมนู CSS</div>
<div id=เมนูย่อย>
<div id=0 onmouseover=setStyle(สิ่งนี้)
onmouseout=setDefault(this) >รายการเมนูที่หนึ่ง</div>
<!--ทั้งหมด 4 เมนู-->
</div><P>
<เลือก id=lb_1 ชื่อ=lb_1>
<ค่าตัวเลือก=-1/>เลือกรายการ
<!--สามตัวเลือก-->
</เลือก>
</div>
</body></html>
ส่วน <STYLE> ของเพจจะกำหนดสไตล์สามแบบ ซึ่งใช้สำหรับแถบเมนู รายการเมนู และรายการตัวเลือกตามลำดับ คำจำกัดความของสไตล์ช่วยให้แน่ใจว่าพื้นที่แสดงผลของเมนูและรายการตัวเลือกทับซ้อนกัน ส่วน <BODY> ประกอบด้วยคำจำกัดความสำหรับเมนูและรายการตัวเลือก <SELECT> เมื่อเมาส์ผ่านแถบเมนู ฟังก์ชัน JavaScript showMenu จะถูกดำเนินการเพื่อแสดงเมนูและซ่อนรายการการเลือก SELECT หลังจากที่เมาส์ออกไป ฟังก์ชัน HideMnu จะซ่อนเมนูและเรียกคืนรายการตัวเลือก ฟังก์ชัน JavaScript ที่เหลือส่วนใหญ่จะใช้เพื่อจำลองการทำงานของเมนู เมื่อเมาส์ผ่านรายการเมนู เมนูจะแสดงด้วยความสว่างสูง (ฟังก์ชัน setStyle) และเมื่อเมาส์ออกจากรายการเมนู เมนูจะกลับคืนสู่โหมดการแสดงผลเริ่มต้น (ฟังก์ชัน setDefault) ผลการรันของเพจแสดงในรูปที่ 2 ใส่เครื่องหมายความคิดเห็นในคำสั่ง document.getElementById(lb_1).style.visibility=hidden ในฟังก์ชัน showMenu เพื่อดูผลกระทบในรูปที่ 1
<คำอธิบาย>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</ คำอธิบาย>
กล่าวโดยสรุป สาเหตุหลักขององค์ประกอบแบบฟอร์มที่แทนที่องค์ประกอบสไตล์นั้นอยู่ที่กฎลำดับความสำคัญในการแสดงผลเริ่มต้นขององค์ประกอบ HTML วิธีแก้ไขที่แนะนำในบทความนี้ได้ผลจริง ๆ แต่ถ้าคุณไม่ต้องการใช้วิธีนี้จริงๆ คุณจะต้องพิจารณาเปลี่ยนเค้าโครงหน้าเพื่อหลีกเลี่ยงไม่ให้พื้นที่แสดงผลขององค์ประกอบแบบฟอร์มและองค์ประกอบสไตล์ทับซ้อนกัน