IE6 ใช้ความกว้างขั้นต่ำ

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-06-12 13:48:01

ก่อนอื่นเรารู้ว่าเอฟเฟกต์นี้ควรเป็นหัวข้อเก่า ๆ

เมื่อจัดเรียงไฟล์ในวันนี้ฉันพบว่าโซลูชันเลย์เอาต์ก่อนหน้าของฉันบางส่วนอยู่ในโฟลเดอร์เป็นเวลานาน ลองดูสิ่งเก่า ๆ กันเถอะ

ควรสังเกตว่าฉันโชคดีที่ได้เห็นวิศวกรเก่าและเว็บมาสเตอร์ของ CSSPlay บรรลุผลกระทบนี้และมันจะต้องได้รับมันเร็วมาก

ซุบซิบน้อยลง, เพิ่มซอร์สโค้ด:

ทริกเกอร์และใช้ประโยชน์จากคุณสมบัติแปลก ๆ ของ IE6-Layout, การใช้งาน CSS:

.ie6-out {

_margin-left: 900px;

_zoom: 1;

.ie6-in {

_position: ญาติ;

_float: ซ้าย;

_margin-left: -900px;

#min-Width {

ความกว้างขั้นต่ำ: 900px;

ความเป็นมา: #CCC;

ความสูงบรรทัด: 200px;

_zoom: 1;

</style>

ภายใต้ <div id = min-width> ie6-, คอนเทนเนอร์ตระหนักถึงการจำลองของเอฟเฟกต์ความกว้างขั้นต่ำ โปรดเปลี่ยนขนาดหน้าต่างเบราว์เซอร์ตามที่ต้องการจากนั้นคลิกปุ่มเพื่อดูความกว้าง </div>

</div>

การสาธิตการใช้งาน CSS:

รันกล่องรหัส

<html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> css บรรลุความกว้างขั้นต่ำ </title> <style type = text/css> body { TEXT-ALIGN: Center;}. IE6-OUT {_MARGIN-Left: 900PX; _ZOOM: 1;}. IE6-in {_Position: ญาติ; _float: ซ้าย; _Margin-le ft: -900px;}#min-width {min-width: 900px; พื้นหลัง: #ccc; line-height: 200px; _zoom: 1;} </style> </head> <body> <div class = ie6-out> <div class = ie6-in> <div id = min-width> ie6-, คอนเทนเนอร์ตระหนักถึงการจำลองของเอฟเฟกต์ความกว้างขั้นต่ำ โปรดเปลี่ยนขนาดหน้าต่างเบราว์เซอร์ตามที่ต้องการจากนั้นคลิกปุ่มเพื่อดูความกว้าง </div> </div> </div> <ชื่ออินพุต = type = button onclick = การแจ้งเตือน ('container width =' document.getElementById ('min-Width'). clientWidth 'px' '/n/n' 'viewport width =' (document.documentElement value = ดูความกว้าง/> </body> </html>

[Ctrl A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อนจากนั้นกด Run]

การสาธิตขยาย:

รันกล่องรหัส

<html xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> css บรรลุความกว้างขั้นต่ำ </title> <style type = text/css> body { TEXT-ALIGN: Center;}. IE6-OUT {_MARGIN-Left: 900PX; _Zoom: 1;}. IE6-in {_Position: ญาติ; _float: ซ้าย; x; พื้นหลัง:#f00; Line-Height: 200px;}#min-width {min-Width: 900px; พื้นหลัง: #ccc; _zoom: 1;} </style> </head> <body> <div class = ie6-out> <div class = ie6-in> aa </div> </div> <div class = ie6-out> <div class = ie6-in> aa <div ภายใต้ id = min-Width> ie6-, คอนเทนเนอร์ตระหนักถึงการจำลองผลกระทบของความกว้างขั้นต่ำ โปรดเปลี่ยนขนาดหน้าต่างเบราว์เซอร์ตามที่ต้องการจากนั้นคลิกปุ่มเพื่อดูความกว้าง </div> </div> </div> <ชื่ออินพุต = type = button onclick = การแจ้งเตือน ('container width =' document.getElementById ('min-Width'). clientWidth 'px' '/n/n' 'viewport width =' (document.documentElement value = ดูความกว้าง/> </body> </html>

การแสดงออกของ CSS

-ฉันเชื่อว่าหลายคนมักจะมีปัญหากับการชนที่อธิบายไม่ได้เมื่อใช้วิธีนี้เพื่อให้ได้ความกว้างขั้นต่ำของภาชนะและมักจะจบลงอย่างไร้ผล

มีสองจุดที่ต้องชี้ให้เห็นที่นี่:

1. องค์ประกอบที่เป็นตัวแทนของ Viewport ใน IE6- แตกต่างกันในโหมดมาตรฐานและโหมด Quirk อดีตคือ <html> และหลังคือ <body>;

2. IE6-in โหมดที่แตกต่างกันสองโหมดข้างต้นอาการที่แตกต่างกันเมื่อเนื้อหาล้นส่งผลให้เกิดการวนซ้ำในการตัดสินการมอบหมาย มันเป็นคำอธิบายเล็กน้อยที่จะอธิบายมาฝึกฝนด้วยตัวเอง

นิพจน์ CSS ใช้ซอร์สโค้ดความกว้างต่ำสุด: <style type = text/css>

ร่างกาย {text-allign: center;}

#min-Width {

ความกว้างขั้นต่ำ: 900px;

_width: นิพจน์ ((document.documentelement.clientWidth || document.body.clientwidth) <900? 900px :);

ความสูงบรรทัด: 200px;

ความเป็นมา: #CCC;

</style>

การสาธิต:

รันกล่องรหัส

<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = gb2312/> <title> นิพจน์ css บรรลุความกว้างขั้นต่ำ </title> <style type = text/css> body { TEXT-ALIGN: CENTER;}#MIN-WIDTH {MIN-WIDTH: 900PX; _Width: นิพจน์ ((document.documentElement.ClientWidth || document.body.clientWidth) <900? 900px :); */} </style> </head> <body> <div id = min-Width> ie6-, คอนเทนเนอร์ตระหนักถึงเอฟเฟกต์ความกว้างขั้นต่ำ โปรดเปลี่ยนขนาดหน้าต่างเบราว์เซอร์ตามที่ต้องการจากนั้นคลิกปุ่มเพื่อดูความกว้าง </div> <ชื่ออินพุต = type = button onclick = การแจ้งเตือน ('container width =' document.getElementById ('min-width'). clientWidth 'px' '/n/n' 'viewport width =' (เอกสาร. value = ดูความกว้าง/> </body> </html>

โซลูชันสองแบบข้างต้นสามารถนำไปใช้ได้ทั้งในโหมด IE6-Standard และโหมด Quirk IE Expression ไม่พบปัญหาประสิทธิภาพของ CPU ในแอปพลิเคชันนี้