หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

เค้าโครงตารางเก้าตารางที่ไม่แตกหัก

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-23 17:10:37

ในบทช่วยสอนก่อนหน้าของฉัน "เค้าโครงพื้นฐานของพระราชวังทั้งเก้า" ฉันได้แนะนำวิธีการใช้การวางตำแหน่งแบบสัมพันธ์และการวางตำแหน่งแบบสัมบูรณ์เพื่อสร้างเค้าโครงพื้นฐานของพระราชวังทั้งเก้า นี่เป็นวิธีการที่สอดคล้องกับความคิดเฉื่อยของผู้คนมากกว่า ดูเหมือนว่าทุกอย่างในกระบวนการผลิตจะเป็นเรื่องของหลักสูตร อย่างไรก็ตาม เนื่องจาก BUG ที่น่าขยะแขยงของ IE6 จึงทำให้เลย์เอาต์นี้เข้าถึงได้ยาก ให้เป็นสากล เนื่องจากผู้ใช้ในประเทศส่วนใหญ่ยังคงใช้ IE6 และเราไม่สามารถสูญเสียผู้ใช้เหล่านี้ไปได้ด้วยเหตุนี้

ขณะนี้ยังไม่มีวิธีแก้ไข BUG นี้ และไม่มีการแฮ็กที่สามารถใช้ได้ วิธีเดียวที่จะใช้คือเลี่ยงมัน กล่าวอีกนัยหนึ่ง ฉันต้องการค้นหาคอนเทนเนอร์ทั้งสี่มุมของตารางเก้าตาราง ใหม่อีกครั้ง

แล้วเทคโนโลยีอื่นใดที่สามารถช่วย BUG นี้จากความทุกข์ยากได้? เรารู้ว่าหากคุณใช้วิธีลอยตัวด้านซ้ายและขวา คุณสามารถชดเชยออบเจ็กต์องค์ประกอบได้อย่างแม่นยำ และวิธีนี้ยังสามารถหลีกเลี่ยง Parity BUG ของ IE6 ได้อีกด้วย โอเค ลองใช้มันดู

ประเด็นสำคัญและปัญหาในการจัดวาง

เรายังคงสร้างโครงสร้างของโมเดลใหม่ของเราตามโครงสร้างของตาราง แต่คราวนี้ มันจะแตกต่างจากโครงสร้างของบทความที่แล้ว ประเด็นสำคัญและปัญหาที่เราต้องใส่ใจในโมเดลนี้คือสองประเด็นต่อไปนี้:

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

ความกว้างของ t_m (หรือ b_m) = (ความกว้างของคอนเทนเนอร์ทั้งหมด - (ความกว้างของคอนเทนเนอร์ที่มุมซ้ายบน + ความกว้างของคอนเทนเนอร์ที่มุมขวาบน)) / ความกว้างของคอนเทนเนอร์ทั้งหมด

กล่าวคือ ความกว้างของ t_m หรือ b_m ไม่ใช่ 100% อย่างไรก็ตาม โดยทั่วไปความกว้างของทั้งสองคอนเทนเนอร์ t_l และ t_r คือความกว้างของรูปภาพในกรณีจริง ดังนั้น โดยทั่วไปแล้วจะเป็นค่าความกว้างคงที่ ดังนั้นใน ทั้งสามอันเดียวกัน ในคอนเทนเนอร์หนึ่งๆ ความกว้างด้านซ้ายและขวาเป็นค่าคงที่ แต่ตรงกลางต้องใช้เปอร์เซ็นต์ และความกว้างรวมของทั้งสามคอนเทนเนอร์นี้ควรรวมกันเป็น 100% เราควรทำอย่างไร

ที่นี่เราใช้วิธีที่ค่อนข้างปลอดภัยในการทำให้คอนเทนเนอร์ตรงกลางมีเปอร์เซ็นต์ความกว้างในอุดมคติ:

เราสามารถใช้คอนเทนเนอร์ DIV และตั้งค่าช่องว่างภายในได้: 0 10px โดยค่าเริ่มต้น ความกว้างจะเป็น 100% เนื่องจากมีการตั้งค่าช่องว่างภายในด้านซ้ายและขวา ความกว้างภายในจึงเป็นค่าความกว้างในอุดมคติของ t_m ที่เราต้องการ ดังนั้นเราจึงกำหนดคอนเทนเนอร์ไว้ข้างใน และความกว้างของคอนเทนเนอร์ย่อยนี้จึงตั้งเป็น 100% สีพื้นหลังของคอนเทนเนอร์ย่อยนี้สามารถตั้งค่าเป็นภาพพื้นหลังเรียงต่อกันในแนวนอนทางซ้ายและขวาได้ คอนเทนเนอร์ย่อยนี้เป็นคอนเทนเนอร์บนสุดที่เราจะใช้ เป็นไปตามข้อกำหนดพิเศษของเราสำหรับค่าความกว้าง

ดังนั้นโครงสร้างของ t_m จึงสามารถจัดทำเป็นโครงสร้างได้ดังต่อไปนี้

<div class="top"><span class="t_m"></span></div>

อย่างไรก็ตาม คำจำกัดความนี้จะทำให้เกิดปัญหาอื่นขึ้น ปัญหานี้เกิดขึ้นในเบราว์เซอร์ที่ต่ำกว่า IE7 เนื่องจากเรากำหนดช่องว่างภายใน จึงมีการสร้างแพตช์ด้านในด้านซ้ายและขวาในเลเยอร์เนื้อหาตรงกลางด้านล่าง IE7?

วิธีแก้ไขคือใช้เคล็ดลับ HACK ที่นี่สำหรับ IE6 และ IE7:

.b_l{ระยะขอบ-ซ้าย:0px;+ระยะขอบ-ซ้าย:-10px;_margin-ซ้าย:-10px;}
.b_r{ระยะขอบ-ขวา:0px;+ระยะขอบ-ขวา:-10px;_margin-right:-10px;}

ประโยคนี้ตั้งค่าออฟเซ็ตที่แตกต่างกันสำหรับสามเบราว์เซอร์ และออฟเซ็ต b_l และ b_r ไปทางซ้ายและขวาไปยังตำแหน่งที่ระบุ

2. ค่าความสูงของคอนเทนเนอร์ทั้งสอง b_l และ b_r จะต้องเท่ากันเพื่อให้สามารถเรียงสีพื้นหลังลงในแนวตั้งลงได้ ด้วยวิธีนี้ เมื่อความสูงของเนื้อหาในพื้นที่เนื้อหาหลักตรงกลาง (บริบท) เปลี่ยนไป สีพื้นหลังของทั้งสองด้านจะสามารถรักษาความสูงให้เท่ากับพื้นที่เนื้อหาหลัก (บริบท) ได้ตลอดเวลา กล่าวคือ พวกเขาสามารถยืดความสูงได้อย่างอิสระตามความสูงของเนื้อหา

เราสามารถใช้วิธีการหลายคอลัมน์ที่มีความสูงเท่ากันซึ่งมักใช้ในการทำงานประจำวันเพื่อจัดการกับปัญหานี้ วิธีการนี้ใช้การผสมผสานระหว่างแพตช์ด้านในและแพตช์ด้านนอกเชิงลบเพื่อให้ได้ความสูงเท่ากันสำหรับหลายคอลัมน์:

.m_l,.m_r{ช่องว่างด้านล่าง:30000px;ระยะขอบด้านล่าง:-30000px;}

เราตั้งค่าช่องว่างภายในของแพทช์ด้านในด้านล่างของ m_l และ m_r ให้เป็นค่าที่ค่อนข้างมาก ตัวอย่างเช่น ฉันตั้งค่าไว้ที่ 30,000px (คุณสามารถตั้งค่าเป็นค่าที่คุณต้องการได้) ฉันเชื่อว่าโดยทั่วไปแล้วมันจะเป็นเช่นนั้น ไม่เกินค่าความสูงนี้ จากนั้นตั้งค่าแพตช์ด้านนอกด้านล่าง (ขอบล่าง) ให้เป็นค่าลบเดียวกันกับค่าแพตช์ด้านในด้านล่าง (ด้านล่างเสริม) ดึงกลับไปที่ตำแหน่งเดิม และตั้งค่าคอนเทนเนอร์ทั้งหมด (กล่อง) ให้ล้น: ซ่อน;, ตัดความสูงส่วนเกินออกเพื่อให้แน่ใจว่าทั้งสองคอลัมน์มีความสูงเท่ากัน

หลังจากแก้ไขปัญหายากๆ สองข้อข้างต้นแล้ว ที่เหลือก็ง่ายและสนุกสนาน! [ตัดหน้า]

ชั้นโครงสร้าง

ตอนนี้เราได้ปรับโครงสร้างเลเยอร์ตามกรณีก่อนหน้าแล้ว จึงกลายเป็นโครงสร้างดังต่อไปนี้:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<ระดับ div="กล่อง">
<!--บรรทัดแรก—บนสุด*/-->
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>

<!--บรรทัดที่สอง—พื้นที่เนื้อหาตรงกลาง*/-->
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">พื้นที่เนื้อหา</div>

<!--บรรทัดที่สาม—ล่างสุด*/-->
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>

เลเยอร์สไตล์

การตั้งค่าสไตล์หลักมีดังนี้:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

/*จำนวนคอนเทนเนอร์ทั้งหมด*/

.box{overflow:hidden;width:50%;margin:50px auto 0;พื้นหลัง:#fff;}
.box ขยาย {display:block;}

/*สไตล์ท็อป*/
.top{ความสูง:10px;ช่องว่างภายใน:0 10px;}
.t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
.t_l{float:left;พื้นหลัง:#ff0000;}/*มุมซ้ายบน*/
.t_r{float:right;พื้นหลัง:#ff0000;}/*มุมขวาบน*/
.t_m{height:10px;font-size:0%;width:100%;พื้นหลัง:#7F0000;}/*นี่คือพื้นที่ที่สามารถขยายไปทางซ้ายและขวาได้ ในทั้งสองกรณี ให้เว้นช่องว่างไว้สำหรับวาง คอนเทนเนอร์มุมซ้ายและขวา*/

/*รูปแบบระดับกลาง*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*สองคอลัมน์ที่มีความสูงเท่ากัน*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;พื้นหลัง:#7F0000;} /*เส้นขอบซ้าย*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;พื้นหลัง:#7F0000;} /*เส้นขอบขวา*/

/*แบบด้านล่าง*/
.b_m{padding:0 10px;height:10px;}/*นี่คือพื้นที่ที่สามารถขยายไปทางซ้ายและขวาได้ ในทั้งสองกรณี ให้เว้นที่ว่างสำหรับวางคอนเทนเนอร์ที่มีความสูงเท่ากันในคอลัมน์ซ้ายและขวา*/
.b_m ขยาย{ความกว้าง:100%;ความสูง:10px;ขนาดตัวอักษร:0%;พื้นหลัง:#7F0000;}
.b_l,.b_r{ความสูง:10px;ขนาดตัวอักษร:0%;ความกว้าง:10px;ระยะขอบด้านบน:-10px;}
.b_l{float:left;พื้นหลัง:#ff0000;}/*มุมซ้ายล่าง*/
.b_r{float:right;พื้นหลัง:#ff0000;}/*มุมขวาล่าง*/



หลังจากการตั้งค่าข้างต้น ตารางเก้าตารางของเราเสร็จสมบูรณ์ "ไม่แตก" และจะยืดอย่างอิสระในทุกทิศทางตามความกว้างและความสูงของเนื้อหา ในแบบจำลองนี้ เพื่อจุดประสงค์ในการสาธิต ฉันตั้งค่าความกว้างของคอนเทนเนอร์ทั้งหมดเป็นเปอร์เซ็นต์ 50% คุณสามารถปรับขนาดได้ตามความต้องการที่แท้จริงของคุณ และภายในจะเติมเต็มพื้นที่ทั้งหมดโดยอัตโนมัติตามค่าความกว้าง . จะระเบิดคอนเทนเนอร์หลัก ดังที่แสดงด้านล่าง:

คุณสามารถใช้รูปภาพแปดรูปเพื่อสร้างกล่องตารางเก้าสี่เหลี่ยมที่สวยงามได้ ดูสิว่ามันสมบูรณ์แบบแค่ไหน

รุ่นนี้ได้รับการทดสอบในเบราว์เซอร์ต่อไปนี้:

IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เค้าโครงตารางเก้าตารางที่ไม่แตกหัก (http://www.cnblogs.com/binyong)</title>
<style type="text/css">
-
ชื่อเค้าโครง: Unbreakable Nine Palace Grid
ผู้เขียน: ปิงจี้เฟิง
ที่อยู่บล็อก: http://www.cnblogs.com/binyong
-
*{margin:0;padding:0;font-size:12px;}
body{text-align:center;color:#fff;}/*ie5.5 ไม่รองรับการจัดกึ่งกลางของระยะขอบ*/
/*จำนวนคอนเทนเนอร์ทั้งหมด*/
.box{overflow:hidden;width:50%;margin:50px auto 0;พื้นหลัง:#fff;}
.box ขยาย {display:block;}
/*สไตล์ท็อป*/
.top{ความสูง:10px;ช่องว่างภายใน:0 10px;}
.t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
.t_l{float:left;พื้นหลัง:#ff0000;}/*มุมซ้ายบน*/
.t_r{float:right;พื้นหลัง:#ff0000;}/*มุมขวาบน*/
.t_m{height:10px;font-size:0%;width:100%;พื้นหลัง:#7F0000;}/*นี่คือพื้นที่ที่สามารถขยายไปทางซ้ายและขวาได้ ในทั้งสองกรณี ให้เว้นช่องว่างไว้สำหรับวาง คอนเทนเนอร์มุมซ้ายและขวา*/
/*รูปแบบระดับกลาง*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*สองคอลัมน์ที่มีความสูงเท่ากัน*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;พื้นหลัง:#7F0000;} /*เส้นขอบซ้าย*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;พื้นหลัง:#7F0000;} /*เส้นขอบขวา*/
/*แบบด้านล่าง*/
.b_m{padding:0 10px;height:10px;}/*นี่คือพื้นที่ที่สามารถขยายไปทางซ้ายและขวาได้ ในทั้งสองกรณี ให้เว้นที่ว่างสำหรับวางคอนเทนเนอร์ที่มีความสูงเท่ากันในคอลัมน์ซ้ายและขวา*/
.b_m ขยาย{ความกว้าง:100%;ความสูง:10px;ขนาดตัวอักษร:0%;พื้นหลัง:#7F0000;}
.b_l,.b_r{ความสูง:10px;ขนาดตัวอักษร:0%;ความกว้าง:10px;ระยะขอบด้านบน:-10px;}
.b_l{float:left;พื้นหลัง:#ff0000;}/*มุมซ้ายล่าง*/
.b_r{float:right;พื้นหลัง:#ff0000;}/*มุมขวาล่าง*/
/*พื้นที่เนื้อหา*/
.บริบท{พื้นหลัง:#D45F00;}
h3{text-align:center;font-size:14px;width:80%;margin:0 auto;line-height:26px;}
p{line-height:22px;padding:0 20px;text-align:left;}
a:link,a:visited{color:#fff;font-weight:bold;}
a:โฮเวอร์{สี:เขียว;}
</สไตล์>
</หัว>
<ร่างกาย>
<ระดับ div="กล่อง">
<BGSOUND CEP="5" />
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<BGSOUND CEP="6" />
<span class="m_l"></span>
<span class="m_r"></span>
<div class="บริบท">
<h3>เค้าโครงตารางเก้าตารางที่ไม่แตกหัก</h3>
<p>นี่คือรูปแบบตารางเก้าตาราง ไม่มีการโหลดรูปภาพ โปรดยืดและปรับขนาดหน้าต่างตามที่คุณต้องการ คุณจะเห็นว่าตารางเก้าตารางยืดออกอย่างอิสระและยืดหยุ่นในทุกทิศทาง </p>
<p>โมเดลนี้ได้แก้ไขข้อบกพร่องของเวอร์ชันก่อนหน้า โดยใช้วิธีลอยตัวเพื่อหลีกเลี่ยงข้อผิดพลาด 1px แปลกเกี่ยวกับความกว้างและความสูงใน IE6 และเข้ากันได้อย่างสมบูรณ์แบบกับเบราว์เซอร์กระแสหลักทั้งหมด </p>
<p>การทดสอบโมเดลนี้ผ่านการทดสอบอย่างสมบูรณ์ในเบราว์เซอร์ต่อไปนี้:</p>
<p>IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0 </p>
<p style="text-align:right">สำหรับผลงานต้นฉบับเพิ่มเติม โปรดไปที่: <a href="http://www.cnblogs.com/binyong" title="Go to the website">Bingjifeng Blog</ </p>
<p style="text-align:right">ที่อยู่บล็อก: http://www.cnblogs.com/binyong</a></p>
</div>
<BGSOUND CEP="7" />
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
</ร่างกาย>
</html>

ลิงก์ไปยังบทความนี้: http://www.blueidea.com/tech/web/2009/6805.asp

บทความที่เกี่ยวข้อง