IE7 الافتراضية عناصر لعرض 100٪

https://stackoverflow.com/questions/618507

03-07-2019
|

سؤال

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

وأزلت أنماط تماما ثم اختباره، وكان لي نفس المشكلة، لذلك ليست أنماط يسبب المشكلة.

وكتبت اختبار سريع للتأكد من انها لا يتعارض رمز واستخدام نفس نوع المستند وXMLNS مثلنا - أحصل على نفس المشكلة. وهنا رمز المثال.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

وأي أفكار؟

المحلول

وأعتقد أن هذا مطلوب من قبل HTML / CSS. عناصر كتلة تمتد على كامل عرض ما لم يكن هناك شيء لوقفها.

و(FF له نفس السلوك.)

نصائح أخرى

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

والعرض الافتراضي ليست في الواقع "100٪"، ولكن "لصناعة السيارات". الفرق العملي هو أن العنصر بما في ذلك الحدود يستخدم 100٪ من العرض، بدلا من عرض باستثناء الحدود تصبح 100٪ من العرض (جعل العرض بما في ذلك الحدود أوسع من انها الأم).

إذا كنت لا تريد عنصر لاستخدام العرض متاح يمكنك جعله عنصرا العائمة. ثم فإنه سيتم ضبط نفسها إلى المحتوى انها.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>

وكما يقول ريتشارد وBeefTurkey، عناصر div عناصر كتلة وسوف تملأ عرض المتصفح.

ويمكنك إما استخدام عنصر المضمنة، مثل فترة

<span id="test">
    Test information!
</span>

وأو إضافة بعض الاسلوب لشعبة لإجبارها على أن تكون مضمنة

div#test { display: inline; }

ولا عناصر div الافتراضية إلى 100٪ (من حجم الوالدين) لأنهم كتل؟ هل يمكن أن تحاول دائما تغيير العرض لمضمنة: #test {عرض: مضمنة؛}

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

لا تنتمي إلى StackOverflow