في برنامجي التعليمي السابق "التخطيط الأساسي للقصور التسعة"، قدمت طريقة استخدام الموضع النسبي والموضع المطلق لإنشاء التخطيط الأساسي للقصور التسعة. هذه طريقة تتوافق أكثر مع تفكير الناس بالقصور الذاتي. يبدو أن كل شيء في عملية الإنتاج هو أمر طبيعي. ومع ذلك، بسبب خطأ التكافؤ المثير للاشمئزاز في IE6، أصبح هذا التخطيط بعيد المنال بعض الشيء يجب أن تكون الطريقة عالمية، لأن معظم المستخدمين المحليين ما زالوا يستخدمون IE6، ولا يمكننا أن نفقد هؤلاء المستخدمين بسبب هذا.
لا يوجد حاليًا علاج لهذا الخطأ، ولا توجد أي اختراقات يمكن استخدامها، والطريقة الوحيدة لاستخدامه هي تجاوزه. بمعنى آخر، أريد تحديد موقع الحاويات ذات الزوايا الأربع للشبكة ذات المربعات التسعة، والتي لا يمكن استخدامها، وهذه ضربة كبيرة ستقلب الطريقة المستخدمة في مقالتي السابقة تمامًا من جديد.
إذن ما هي التقنيات الأخرى التي يمكنها إنقاذ هذا الخطأ من حالة يرثى لها؟ نحن نعلم أنه إذا كنت تستخدم الطريقة العائمة لليسار واليمين، فيمكنك إزاحة كائن العنصر بدقة، ويمكن لهذه الطريقة أيضًا تجنب خطأ التكافؤ في IE6. حسنًا، فلنستخدمه.
النقاط الرئيسية والصعوبات في التخطيط
ما زلنا نبني هيكل نموذجنا الجديد حسب هيكل الجدول، لكن هذه المرة سيكون مختلفًا عن هيكل المقالة السابقة. النقاط والصعوبات الأساسية التي يجب أن ننتبه إليها في هذا النموذج هي النقطتان التاليتان:
1. يجب أن تكون قيم عرض الحاويتين الوسيطتين t_m وb_m قيمة مئوية، وإلا لا يمكن ضمان التوسع الديناميكي الأيسر والأيمن للشبكة المربعة التسعة بأكملها، ويجب ألا تكون قيمة بكسل ثابتة. وعرضه يساوي إجمالي عرض الحاوية مطروحًا منه مجموع عرضي الحاويتين الركنيتين كنسبة مئوية. صيغة الحساب هي:
عرض t_m (أو b_m) = (إجمالي عرض الحاوية - (عرض حاوية الزاوية اليسرى العليا + عرض حاوية الزاوية اليمنى العليا)) / إجمالي عرض الحاوية
وهذا يعني أن عرض t_m أو b_m ليس 100%، ومع ذلك، فإن عرض الحاويتين t_l وt_r هو عمومًا عرض الصورة في الحالات الفعلية، لذا فهي بشكل عام قيمة عرض ثابتة، بحيث في نفس الثلاثة في الحاوية، يكون العرض على الجانبين الأيسر والأيمن قيمة ثابتة، لكن الوسط يتطلب نسبة مئوية، ويجب أن يصل إجمالي عرض هذه الحاويات الثلاث إلى 100٪. ماذا يجب أن نفعل؟
نستخدم هنا طريقة آمنة نسبيًا لجعل الحاوية الوسطى تصل إلى نسبة العرض المثالية:
يمكننا استخدام حاوية DIV وتعيين المساحة المتروكة لها: 0 10 بكسل؛ لا يتم ضبط عرضها بشكل افتراضي على 100%. نظرًا لأنه تم تعيين قيم الحشو اليمنى واليسرى، فإن العرض الداخلي هو قيمة العرض المثالية لـ t_m التي نريدها، لذلك نحدد حاوية بداخلها، ويتم ضبط عرض هذه الحاوية الفرعية على 100٪. يمكن ضبط لون خلفية هذه الحاوية الفرعية على صورة خلفية مبلطة أفقيًا على اليسار واليمين. هذه الحاوية الفرعية هي الحاوية العلوية التي سنستخدمها. إنه يلبي متطلباتنا الخاصة لقيم العرض.
لذلك، يمكن تحويل بنية t_m إلى البنية التالية:
<div class="top"><span class="t_m"></span></div>
ومع ذلك، فإن هذا التعريف سيسبب مشكلة أخرى. هذه المشكلة موجودة في المتصفحات الموجودة أسفل IE7. نظرًا لأننا نحدد الحشو، فإنه سيؤدي أيضًا إلى إنشاء تصحيحات داخلية يمينية ويسرى في طبقة الجسم الوسطى أدناه. نعم: لماذا يؤثر ذلك IE7؟
لذا فإن العلاج هو استخدام خدعة HACK هنا لـ IE6 وIE7:
.b_l{الهامش الأيسر:0px;+الهامش الأيسر:-10px;_الهامش الأيسر:-10px;}
.b_r{الهامش الأيمن:0px;+الهامش الأيمن:-10px;_الهامش الأيمن:-10px;}
تقوم هذه الجملة بتعيين قيم إزاحة مختلفة لثلاثة متصفحات، وإزاحة b_l وb_r إلى اليسار واليمين إلى الموضع المحدد.
2. يجب أن تكون قيم ارتفاع الحاويتين b_l وb_r هي نفسها حتى يتمكنوا من تجانب لون الخلفية عموديًا إلى الأسفل. بهذه الطريقة، عندما يتغير ارتفاع المحتوى في منطقة المحتوى الرئيسية الوسطى (السياق)، يمكن أن يحافظ لون الخلفية على كلا الجانبين دائمًا على نفس ارتفاع منطقة المحتوى الرئيسية (السياق). وهذا يعني أنه يمكنهم تمديد طولهم بحرية وفقًا لارتفاع جسم المحتوى.
يمكننا استخدام طريقة الأعمدة المتعددة بنفس الارتفاع التي تستخدم غالبًا في العمل اليومي للتعامل مع هذه المشكلة. تستخدم هذه الطريقة مجموعة من التصحيحات الداخلية والتصحيحات الخارجية السالبة لتحقيق نفس الارتفاع لأعمدة متعددة:
.m_l,.m_r{الحشوة السفلية:30000px;الهامش السفلي:-30000px;}
لقد قمنا بتعيين قيمة الحشو السفلية للرقعة الداخلية السفلية لـ m_l وm_r على قيمة كبيرة نسبيًا، على سبيل المثال، قمت بتعيينها على 30000 بكسل (يمكنك ضبطها على القيمة التي تريدها). لا تتجاوز قيمة الارتفاع هذه. ثم قم بتعيين التصحيح الخارجي السفلي (الهامش السفلي) على نفس القيمة السالبة مثل قيمة التصحيح الداخلي السفلي (الحشوة السفلية)، واسحبه مرة أخرى إلى موضعه الأصلي، واضبط الحاوية الإجمالية (المربع) على تجاوز السعة: مخفي؛، قم بقطع الارتفاع الزائد للتأكد من أن العمودين بنفس الارتفاع.
بعد حل المشكلتين الصعبتين المذكورتين أعلاه، الباقي بسيط وممتع! [قص الصفحة]
الطبقة الهيكلية
الآن قمنا بتعديل طبقة الهيكل بناءً على الحالة السابقة، لتصبح البنية التالية:
وفيما يلي المحتوى المقتبس: <div class="box">
<!--السطر الأول —الأعلى*/-->
<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;background:#fff;}
.مربع تمتد {عرض: كتلة؛} /*النمط الأعلى*/
.أعلى{الارتفاع:10px;الحشو:0 10px;}
.t_l,.t_r{العرض:10px;الارتفاع:10px;حجم الخط:0%;الهامش العلوي:-10px;}
.t_l{float:left;background:#ff0000;}/*الزاوية اليسرى العليا*/
.t_r{float:right;background:#ff0000;}/*الزاوية اليمنى العليا*/
.t_m{height:10px;font-size:0%;width:100%;background:#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;background:#7F0000;} /*الحد الأيسر*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#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;background:#ff0000;}/*الزاوية اليسرى السفلية*/
.b_r{float:right;background:#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>
<نمط النوع = "نص/CSS">
/*
اسم التخطيط: شبكة القصور التسعة غير القابلة للكسر
المؤلف: بينجيفينج
عنوان المدونة: http://www.cnblogs.com/binyong
*/
*{الهامش:0;الحشو:0;حجم الخط:12px;}
body{text-align:center;color:#fff;}/*ie5.5 لا يدعم المحاذاة المركزية للهامش*/
/*الحاوية الإجمالية*/
.box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;}
.مربع تمتد {عرض: كتلة؛}
/*النمط الأعلى*/
.أعلى{الارتفاع:10px;الحشو:0 10px;}
.t_l,.t_r{العرض:10px;الارتفاع:10px;حجم الخط:0%;الهامش العلوي:-10px;}
.t_l{float:left;background:#ff0000;}/*الزاوية اليسرى العليا*/
.t_r{float:right;background:#ff0000;}/*الزاوية اليمنى العليا*/
.t_m{height:10px;font-size:0%;width:100%;background:#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;background:#7F0000;} /*الحد الأيسر*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#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;background:#ff0000;}/*الزاوية اليسرى السفلية*/
.b_r{float:right;background:#ff0000;}/*الزاوية اليمنى السفلية*/
/*منطقة المحتوى*/
.السياق{الخلفية:#D45F00;}
h3 {محاذاة النص: المركز؛ حجم الخط: 14 بكسل؛ العرض: 80٪؛ الهامش: 0 تلقائي؛ ارتفاع الخط: 26 بكسل؛}
ص {ارتفاع الخط: 22 بكسل؛ الحشو: 0 20 بكسل؛ محاذاة النص: يسار؛}
أ:رابط،أ:زار{اللون:#fff؛وزن الخط:غامق؛}
أ:تحوم {اللون: أخضر؛}
</نمط>
</الرأس>
<الجسم>
<div class="box">
<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="context">
<h3>تخطيط شبكي غير قابل للكسر مكون من تسعة مربعات</h3>
<p>هذا نموذج لتخطيط شبكة مكونة من تسعة مربعات، ولم يتم تحميل أية صور. يرجى تمديد النافذة وتغيير حجمها كما تريد. وسترى أن الشبكة المكونة من تسعة مربعات تمتد بحرية ومرونة في جميع الاتجاهات. </ص>
<p>لقد قام هذا النموذج بتعديل عيوب الإصدار السابق، وذلك باستخدام الطريقة العائمة لتجنب الخطأ الغريب بمقدار 1 بكسل في العرض والارتفاع في IE6، وهو متوافق تمامًا مع جميع المتصفحات الرئيسية. </ص>
<p>لقد اجتاز اختبار النموذج هذا بشكل كامل في المتصفحات التالية:</p>
<p>IE5.5، IE6، IE7، IE8، FF3، TT، Maxthon2.1.5، Opera9.6، Safari4.0، Chrome2.0. </ص>
<p style="text-align:right">لمزيد من الأعمال الأصلية، يرجى زيارة: <a href="http://www.cnblogs.com/binyong" title="Go to the website">Bingjifeng Blog</ أ></ص>
<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
