IE6 الآن مشكلة عائمة

StackOverflow https://stackoverflow.com/questions/2086202

سؤال

هذا يقودني للجنون...

<!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" >
<head>
    <title></title>
    <style type="text/css">
        .cantWrapper { white-space: nowrap; }
        .cantWrapper .floatedDiv { float: left; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text {  }
    </style>
</head>
<body>
    <div class="cantWrapper">
        <div class="floatedDiv"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
    </div>
</body>
</html>

في كل المتصفحات الأخرى، يطفو النص بعد المربع الأزرق.ولكن في IE6 (كما هو متوقع إلى حد ما)، يسقط النص أسفل المربع الأزرق.

...أنا لا أستطيع العثور على إجابة لهذا.لا يمكن أن يلتف النص، ومن هنا جاء اسم nowrap.

-- بشكل عشوائي، إضافة هذا يجعل الصندوق الأزرق يختفي تماما

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

المحلول 3

اها ها قد وجدنا الجواب :شكرًا لكل من ساعدنا، ولروزي على هذا.

<!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" >
<head>
    <title></title>
    <style type="text/css">
        .cantWrapper { position: relative; width: 100%; clear: left; white-space: nowrap; }
        .cantWrapper .floatedDiv { float: left; display: inline; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { position: absolute; top: 0; }
    </style>
</head>
<body>
    <div class="cantWrapper">
        <div class="floatedDiv"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
    </div>
</body>
</html>

نصائح أخرى

والسبب في هذا السلوك هو ذلك .wrapper .text لا تحتوي على مجموعة عرض، كما أنها لا تطفو.ونتيجة لذلك، فإنه سيفترض عرضًا بنسبة 100%، كما تفعل DIVs افتراضيًا، وعندما يستخدم 100% من عرض الحاوية الخاصة به، فإنه لا يمكن احتواؤه بجوار المربع الأزرق، ولكنه سيظهر أسفله مباشرة.لإصلاح ذلك، تحتاج إلى تعيين العرض everything-16px, ، أو تحتاج إلى تعيين float: left إلى .text DIV.

يعد الحل الأخير أكثر ملاءمة لأنه لا يتطلب تعيين عروض ثابتة، ولكنه يتطلب منك إضافة DIV المقاصة باعتباره الطفل الأخير لـ .wrapper, أو لن يخصص المحتوى أي مساحة في الحاوية الخاصة به على الإطلاق:

<div class="wrapper">
    <div class="floatedDiv"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>

    <div style="clear: both;"></div>
</div>

لك <div class="text"> يحتاج إلى إعداد العرض عليه.

محاولة للحل (لكنها لن تثبت صحتها وليست جميلة):

بالنسبة لـ IE6:

<style type="text/css">
        .cantWrapper { white-space: nowrap; }
        .cantWrapper .floatedDiv { display: inline; zoom: 1; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { display: inline; }
    </style>

لغير IE:

<style type="text/css">
        .cantWrapper { white-space: nowrap; }
        .cantWrapper .floatedDiv { display: inline-block; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { display: inline; }
    </style>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top