سؤال

وهنا هو مخطط صفحة أنا النامية.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html> 

وفي CSS:

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

في فايرفوكس 3، ومسحوق لشعبة الجسم (مع خلفية خضراء) إلى لا شيء تقريبا في حين IE7 يجعل الصفحة تماما. من ما استطيع ان اقول للمعيار CSS 2.1 (عبر كتاب أورايلي ماير)، طرحت يجب أن عناصر div تطفو داخل كتلة الحاويات والذي هو واضح ليس هو الحال في فايرفوكس 3.

وحتى إذا جعل فايرفوكس متوافق، ما أنا في عداد المفقودين؟

هل كانت مفيدة؟

المحلول

والمشكلة هي أن IE7 مسح العنصر الأصل بحيث يحتوي على الطفل العائمة. هذه ليست الطريقة التي ينبغي أن تكون المقدمة. أفضل التفسيرات التي ملصقات أخرى.

والإصلاح بسيط: تطبيق overflow: hidden; إلى #body الخاص بك:

#body {
    overflow: hidden;
}

هذا المنصب للحصول على تفسيرا لذلك.

نصائح أخرى

وكما هو الحال دائما، عندما صفحة يتم تقديم differntly في إنترنت إكسبلورر وفايرفوكس، فايرفوكس يجعل الصفحة بشكل صحيح.

ويجب ألا يكون لشعبة الجسم أي ارتفاع. فقط يحتوي على عنصر عائم، حتى لا يكون هناك شيء في ذلك من شأنه أن تعطيه أي ارتفاع. وثمة عنصر عائم لا يؤثر على حجم انها الأم. IE يفعل هذا wroing ويوسع عنصر لاحتواء انها الأطفال. هذا هو واحد من الأخطاء مما يجعل المعروف من IE.

وإزالة علامة XML من التعليمات البرمجية. نوع المستند يجب أن يأتي أولا في الصفحة، أو سوف IE تجاهله.

إذا عرض الصفحة في IE 8 بيتا، وسوف تجعل الصفحة تماما كما يفعل فايرفوكس.

وليس هناك وزن أو حجم المخصصة للشعبة مع معرف = "الهيئة". إن أي نص وضعت داخل شعبة تعطيه حجم وتجعل لون الخلفية إلى الحجم المناسب. سوف تلعب هذه المشكلة في خارج مقرها المتصفحات بكت وكذلك (كروم، سفاري).

وأما النص مكان في شعبة هيئة لاعطائها الوزن أو إضافة أسلوب تجاوز: مخفي. إلى شعبة مع معرف = الجسم.

وشكرا للجميع على إجاباتك.

وهناك حل آخر أن يحل مشكلتي أيضا: تعويم شعبة الأم (معرف = "الهيئة"). يأتي هذا مباشرة من كتاب ماير، لذلك لست متأكدا كيف فاتني ذلك. مجرد حالة أخرى من به هو تعلم! والشيء الآخر هو أن هذا لا يحل أيضا مشكلة أخرى لم أكن الدولة: كيف يمكنني تناسب الهامش بين الجسم والذيل؟ منذ ذلك الحين في فايرفوكس، وتطهير تذييل لا يسمح بهامش التي ستستخدم لإعطاء مساحة بين الجسم وتذييل الصفحة. العائمة العنصر الأصلي ومع ذلك، لا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top