عنصر <html> ، وهو عنصر الجذر في مستند XHTML ، مألوف جدًا. ومع ذلك ، كنت أحاول إجراء تخطيط مؤخرًا ووجدت أنه في IE ، ليس دورًا بسيطًا ، ولدي بعض الخصائص الخاصة جدًا. دعنا نلخصها للرجوع إليها:
الوضع القياسي IE6:◎ بغض النظر عن الارتفاع والعرض الذي تم تعيينه له ، فإن حجمه يملأ دائمًا منطقة المشاهدة بأكملها.
◎ بغض النظر عن نوع الحشوة والحدود التي يتم تعيينها له ، فإن الحجم والحجم يملأان دائمًا منطقة المشاهدة بأكملها.
◎ سيتم تجاهل الهامش.
◎ كتلة تحتوي الأولي على عرض الحدود لمستطيل منطقة العرض ناقص <html>
باستخدام CSS3 للتعبير عنها ، يمكننا أن نعتبر <html> في IE6 عنصرًا خاصًا من الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛ حجم الصناديق: صندوق الحدود ؛ وهذه السمات غير قابلة للتغيير.
الوضع القياسي IE7:على الرغم من أن IE7 قد أصلحت العديد من الأخطاء CSS في IE6 ، إلا أن فهم <html> أكثر تعقيدًا بكثير من IE6. على الرغم من أن IE6 غريب ، إلا أن هناك بعض السمات التي يمكن تغييرها ، لذلك لا تزال بسيطة. يمكن أن يقبل IE7's <html> المزيد من السمات ، لكن الخوارزمية لا تتبع المواصفات وهي صادقة ، لذلك من المثير للقلق أن تكتشفها من IE6.
الأول هو ميزة التوسع التلقائي.
يكون عنصر <html> أبسط في اتجاه y ، على غرار فهم IE6 لارتفاع العناصر العادية - إذا كان ارتفاع المحتوى يتجاوز ارتفاع <html> ، أو إذا لم يكن لدى <html> ارتفاع ثابت (أي القيمة الافتراضية التلقائية) ، فإن <html> سوف يوسع طوله تلقائيًا لتضمين المحتوى.
ولكن في اتجاه X ، تركز المشكلة بشكل أساسي على فهم عرض <Body>. فيما يلي حالتان: (ألم يقل <html>؟ لماذا تحدثت عن عرض <Body>؟ لأنه إذا أراد <html> التوسع تلقائيًا ، فيجب أن تعرف مدى عرض <Body>.
الحالة الأولى: إذا كان عرض <html> هو كل القيم الأخرى غير القيم غير 0 (بما في ذلك القيمة الافتراضية التلقائية) ، فسيتم تحديد عرض <Body> من خلال القواعد التالية:
1. إذا كان عرض <Body> قيمة ثابتة ، فهناك الكثير من العرض.
2. إذا كان عرض <Body> هو القيمة الافتراضية التلقائية ، فسيملأ العرض مساحة المحتوى <html>.
3. إذا كان <body> نفسه لديه خصائص تقلصية ومحيط ، مثل وضع وضع: المطلق أو العرض: مضمّن (من الغريب ، لا يرضي التعويم هذا العنصر ، فإنه يرضي 2) ، ثم يعتمد على عرض المحتوى.
الحالة الثانية: إذا كان عرض <html> هو 0 ، فإن النقطتين الأولى والثالثة هي نفس النقطة المذكورة أعلاه ، والنقطة الثانية ، إذا كان عرض <Body> هو القيمة الافتراضية التلقائية ، فإن العرض سيتكيف مع المحتوى ، ولكن سيكون هناك أي ظاهرة غريبة ، فهذا هو ، إذا كان <body> لديه حدود أو حدود الحالة الأولى - مساحة محتوى مليئة بـ <html>. نظرًا لأن عرض <html> هو 0 في هذا الوقت ، فإن عرض <Body> ينهار أيضًا إلى 0.
ثانياً ، ستؤثر إعدادات العرض والارتفاع لـ <html> بشكل غريب على النسبة المئوية المرجعية لـ <body> (أو كتلة تحتوي على <Body>).
في اتجاه y ، إذا كان ارتفاع <html> هو القيمة الافتراضية التلقائية ، فسيتم تجاهل ارتفاع <Body> إذا استغرق الأمر قيمة مئوية. ولكن بمجرد أن يكون لقيمة الارتفاع لـ <html> ارتفاع محدد ، حتى لو كانت 0 ، سيتم تطبيق نسبة ارتفاع <Body>. ولكن الأمر الغريب هو أن مرجع الحساب لهذا الارتفاع المئوي ليس ارتفاع <HTML> فقط المحدد ، ولكن مجموع هامش+حدود+حشوة من ارتفاع منطقة المشاهدة ناقص <html>.
في اتجاه X ، إذا أخذ العرض القيمة الافتراضية التلقائية ، ولن يتم تجاهل عرض النسبة المئوية لـ <Body> ، ولكن لا يزال مرجع الحساب الخاص به غريبًا مثل اتجاه Y ، وطرح مجموع الهامش+الحدود+عرض الحشوة من <html> لعرض المنظر. إذا كان للعرض قيمة محددة ، فسيتم استبداله كمرجع عرض النسبة المئوية لـ <Body>.
مرة أخرى ، عندما يتم تعيين <Body> على الموضع: مطلق ، سيكون لون الحدود <html> غير صالح. هذا هو خطأ آخر غريب.
أخيرًا ، تعتمد الكتلة المحتوية الأولية مستطيلًا للمنفذ ، وهو أمر طبيعي بشكل أساسي. ولكن من المستحيل إنشاء كتلة تحتوي على عناصر مكونة تمامًا. ولكن ربما تكون الكتلة المحتوية التي أنشأتها <html> هي مستطيل الرؤية ، من يدري.
إنه فوضوي للغاية. إنه ليس فقط رأسًا كبيرًا ولكن أيضًا رأسًا كبيرًا بعد فرزه. لا أعرف ما إذا كان بإمكانك رؤيته بوضوح بعد النظر إلى الوراء في المستقبل. IE7 آه IE7 ... ليس من السهل أن نقول أن حبك ...
أوضاع IE5 والمرولات◎ <html> و <body> يتم تجاهل جميع إعدادات العرض والارتفاع وتبقى مليئة بمنفذ العرض.
◎ <html> لا يتم قبول الحشو والهامش.
◎ <Body> قبول الحشو والهامش ، ولكن الهامش السلبي ليس له تأثير بصري ، ولكن سيتم إحضاره عند حساب المعلمات المقابلة الأخرى.
سوف يتم نقل الحدود والخلفية وغيرها من السمات الأخرى للأعلى إلى عنصر <html>.
◎ كتلة تحتوي على حافة الحشو <body>.
فائدةهذا الملخص مستمد من مشكلة التخطيط في البداية. مشكلة التصميم هي واحدة من استخداماتها. سأعيد كتابة منشور لفرزها لاحقًا. لكن هذا التصميم لا يستخدم سوى بعض الميزات ، ويجب أن يكون هناك المزيد من الإمكانات للضغط ، لذلك دراستها ببطء.