ما هو الخطأ مع هذا CSS بسيطة في IE ؟

https://stackoverflow.com/questions/367847

21-08-2019
|

سؤال

هناك div الذي يحتوي المحتوى الداخلي ، شعبة مع الحدود التي هو داخل div.بطريقة أو بأخرى, هذا هو div توسعت لتشمل التالي div.ضربات ذهني.

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

أنا أتسائل عن سبب هذا و كيفية حلها.

المحلول

تحتاج إلى "إعطاء تخطيط" أن أول div.من الأفضل القيام بذلك باستخدام IE6 المستهدفة أنماط:

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

هذا هو المعروف IE6 المسألة مع hasLayout السمة.قراءة المزيد عن ذلك هنا - http://www.satzansatz.de/cssd/onhavinglayout.html

نصائح أخرى

ويبدو وكأنه كنت في quirksmode الانتقالي الذي هو EVIL.

وصارمة يحل هذا.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

وحل واحد هو وضع "الموقف: النسبية" في كل مكان، ولكن هذا يكسر أشياء أخرى في صفحتي

وكنت في عداد المفقودين فاصلة منقوطة في شعبة الداخلي. لقد رأيت بعض سلوك غريب جدا إذا تم حذف الفاصلة المنقوطة الماضية.

<div style="border: 1px solid black; background: green;">green background</div>

ولست متأكدا ما هو إصدار IE لديك، ولكن هذا يعمل في IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

والجواب سهل فري، لأنك عناصر div مختلفة التعشيش، وليس من منهم لديه ارتفاع، حتى لا يكون هناك تجاوز للIE6. قيام بذلك:

<div style="background: yellow;height: 1%;">

و، وسوف تعمل على ما يرام.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow