CSSer ก็เหมือนกับตำแหน่งไอทีอื่นๆ ที่จะต้องเผชิญกับคำถามที่ผู้สัมภาษณ์ถามหรือเอกสารทดสอบที่ให้ไว้เมื่อกำลังมองหางาน วันนี้เราได้รวบรวมคำถามสัมภาษณ์ทั่วไป 8 ข้อ หวังว่าคงเป็นประโยชน์กับคุณ
1. สไตล์โฮเวอร์ไม่ปรากฏขึ้นหลังจากคลิกไฮเปอร์ลิงก์?
รูปแบบไฮเปอร์ลิงก์ที่ถูกคลิกไม่มีสไตล์โฮเวอร์และที่ใช้งานอยู่อีกต่อไป วิธีแก้ไขคือเปลี่ยนลำดับของแอตทริบิวต์ CSS: LVHA
2. ปัญหาข้อผิดพลาดของ Margin Double Margin ของ IE6
ตัวอย่างเช่น:
<style type="text/css"> เนื้อความ {ระยะขอบ:0;} div {ลอย: ซ้าย; ขอบซ้าย: 10px; ความกว้าง: 200px; ความสูง: 200px; เส้นขอบ: 1px สีแดงทึบ;} </สไตล์> |
หลังจากลอยตัว อัตรากำไรขั้นต้นคือ 10px แต่ IE ตีความว่าเป็น 20px วิธีแก้ไขคือเพิ่ม display:inline;
3. เหตุใดข้อความใน Firefox จึงไม่สามารถขยายความสูงของคอนเทนเนอร์ได้
คอนเทนเนอร์ที่มีค่าความสูงคงที่ในเบราว์เซอร์มาตรฐานจะไม่ถูกขยายเหมือนใน IE6 ดังนั้นหากฉันต้องการให้มีความสูงคงที่และถูกยืดออก ฉันควรตั้งค่าอย่างไร วิธีแก้ไขคือลบความสูงออกและตั้งค่า min-height:200px; ที่นี่ เพื่อดูแล IE6 ที่ไม่ทราบความสูงขั้นต่ำ สามารถกำหนดได้ดังนี้:
| div { ความสูง: อัตโนมัติ! ความสูง: 200px; |
4. เหตุใดจึงไม่สามารถตั้งค่าสีแถบเลื่อนของเบราว์เซอร์ IE ในมาตรฐานเว็บได้
การตั้งค่าสไตล์ดั้งเดิม:
<style type="text/css"> body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; -สี:#fff; scrollbar-darkshadow-color:#fff; </สไตล์> |
วิธีแก้ไขคือการแทนที่เนื้อหาด้วย html
5. จะกำหนดคอนเทนเนอร์ที่มีความสูงประมาณ 1px ได้อย่างไร?
ปัญหานี้ภายใต้ IE6 เกิดจากความสูงของบรรทัดเริ่มต้น และมีวิธีแก้ไขมากมาย เช่น: overflow:hidden | Zoom:0.08 |
6. จะทำให้เลเยอร์แสดงบน FLASH ได้อย่างไร?
วิธีแก้ไขคือตั้งค่าความโปร่งใสสำหรับ FLASH:
| <a href="http://www.chinaz.com/">:</a> <pre lang="html" line="1"> <ชื่อพารามิเตอร์ =ค่า wmode = "โปร่งใส" /> |
7. จะจัดกึ่งกลางเลเยอร์ div ในเบราว์เซอร์ได้อย่างไร?
<style type="text/css"> - div { ตำแหน่ง:แน่นอน; ด้านบน:50%; ซ้าย:50%; ระยะขอบ:-100px 0 0 -100px; ความกว้าง:200px; ความสูง:200px; เส้นขอบ: 1px สีแดงทึบ; - - </สไตล์> |
ที่นี่เราใช้การวางตำแหน่งแบบสัมบูรณ์เป็นเปอร์เซ็นต์ และวิธีการใช้ค่าลบนอกแพตช์ ขนาดของค่าลบคือความกว้างและความสูงของตัวเองหารด้วยสอง
8. การแก้ปัญหาศูนย์กลางของแท็ก div ที่ซ้อนกันในเบราว์เซอร์ Firefox
สมมติสถานการณ์ต่อไปนี้:
<div id="a"> <div id="b"> </div> </div> |
หากคุณต้องการให้ b อยู่ตรงกลางภายใน a โดยทั่วไปคุณจะต้องใช้ CSS เพื่อตั้งค่าแอตทริบิวต์การจัดแนวข้อความของ a ให้อยู่ตรงกลางเท่านั้น วิธีนี้ดูปกติใน IE แต่ใน Firefox b จะอยู่ทางด้านซ้าย
วิธีแก้ไขคือตั้งค่าระยะขอบแนวนอนของ b เป็นอัตโนมัติ ตัวอย่างเช่น ตั้งค่าสไตล์ CSS ของ b เป็น: margin: 0 auto;