خلفية العنصر الفارغ المستخدم بواسطة العنصر التالي في IE
https://stackoverflow.com/questions/289315
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
في IE6، يتم عرض الفقرة التي تلي الفقرة الفارغة بلون خلفية الفقرة الفارغة، وهو ما أعتقد أنه خطأ!إنه يعمل بشكل صحيح في Firefox، لكنني لم أتحقق من IE7.
هل يوجد حل CSS لهذه المشكلة أم يجب علي إزالة العنصر الفارغ؟
(أفضل ألا أضطر إلى إزالة العناصر الفارغة، لأن ذلك يتضمن كتابة تعليمات برمجية للتحقق مما إذا كان كل عنصر فارغًا قبل إخراجه)
لم يتغير السلوك باستخدام أنواع المستندات الصارمة أو الانتقالية (تمت إضافة هذا التعليق ردًا على الإجابات)
ومن المثير للاهتمام أن التأثير لا يحدث مع لون النص، بل لون الخلفية فقط.
<html>
<head>
</head>
<body>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'>Red content</p>
<p>Unstyled background working because previous red element is not empty</p>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'></p>
<p>Unstyled background broken because previous red element is empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'>Red content</p>
<p>Unstyled text color working because previous red element is not empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'></p>
<p>Unstyled text color working even though previous red element is empty</p>
</body>
</html>
المحلول
وهناك فقرة فارغة لا معنى له - وهو ما يعني أنك ربما كتابة HTML خاطئة
.وبالإضافة إلى ذلك، المثال الخاص بك لايوجد DOCTYPE - أ DOCTYPE الصالح هو ضروري للحصول على المتصفحات لتفسير الشفرة بشكل صحيح، دون واحد سوف يكون عالقا في وضع المراوغات
ولكن على أي حال، وأبسط حل بديل لهذا الخطأ هو ببساطة مجموعة خلفية للعنصر unstyled الحالي.
نصائح أخرى
لقد اختبرت ذلك للتو في IE7 ويمكنني التأكد من حدوث ذلك هناك أيضًا.
يبدو أن الفقرة غير النمطية لا في الواقع خلفية حمراء، كل ما في الأمر هو أن IE7 يرسم المربع الأحمر للفقرة الفارغة ثم يرسم الفقرة التالية في الأعلى.
يمكنك أن ترى ذلك بنفسك من خلال تجربة هذا الكود:
<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>
يجب أن ترى أن الفقرة الحمراء تقع على مسافة 50 بكسل من اليسار.
لماذا يفعل هذا هو تخمين أي شخص.إن إضافة بعض التعليمات البرمجية للتحقق مما إذا كانت الفقرة ستكون فارغة ليس أمرًا صعبًا للغاية، بالإضافة إلى أنه يزيل العلامات غير المفيدة من مخرجاتك ويتجنب هذه المشكلة تمامًا.إعطاء ذلك الذهاب؟
ومحاولة وضع مسافة غير منقسمة في الفقرات الفارغة ...
<p style='color:red'>& nbsp;</p>
وباستثناء أي مساحة بعد العطف ...
إضافة نوع مستند إلى أعلى ملف HTML الخاص بك.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
وهذا سيجبر IE6 للتبديل المراوغات النموذج لوضع المعايير. هذا يجلب الكثير من المزايا tother، مثل نموذج الصندوق الصحيح، لذلك يجب أن تقوم به على أي حال.
وكان الحل واحد غريب وجدت لإضافة موقف: نسبة إلى الفقرات يحتمل أن تكون فارغة مثل هذا:
<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
