عندما يكون تخطيط Div+CSS للصفحة ، من الشائع تمامًا مواجهة مشكلة الفراغات الإضافية في عنصر الصورة IMG في المتصفح عند مواجهة IE6 (بالطبع ، سيحدث في بعض الأحيان تحت Firefox). الحل لهذه المشكلة هو أيضا مسألة وقت. يجب استخدام حلول مختلفة وفقًا للأسباب المختلفة. سنقوم هنا بتلخيص الطرق الشائعة لحل الأخطاء في الفجوات الإضافية تحت تخطيط الصورة للرجوع إليها.
1. تحويل الصورة إلى كائن على مستوى الكتلة
وهذا هو ، تعيين IMG على: العرض: كتلة ؛
في هذا المثال ، أضف مجموعة من رموز CSS: #sub img {display: block ؛}
2. اضبط المحاذاة العمودية للصورة
وهذا يعني أن تعيين سمات المحاذاة العمودية للصورة إلى أعلى ، وأعلى النص ، والأسفل ، والأسطح النصية يمكن أيضًا حلها. على سبيل المثال ، أضف مجموعة من رموز CSS في هذا المثال: #sub img {alsal-align: top ؛}
3. اضبط حجم النص للكائن الأصل على 0px
وهذا هو ، إضافة سطر في #Sub: حجم الخط: 0 ؛
يمكن حل المشكلة. ولكن هذا يثير أيضًا مشاكل جديدة ، وحتى النص في الكائن الأصل لا يمكن عرضه. حتى إذا تم إرفاق جزء النص ، فلا يزال من الممكن عرض حجم نص الكائن الفرعي ، ولكنه سيؤدي إلى خطأ في نص صغير جدًا عند التحقق من صحة CSS.
4. تغيير خصائص الكائن الأصل
إذا تم إصلاح عرض وارتفاع الكائن الأصل ويعتمد حجم الصورة على الكائن الأصل ، فيمكنك تعيين: Overflow: Hidden ؛
دعونا نحلها. كما في هذا المثال ، يمكنك إضافة الكود التالي إلى #sub: العرض: 88px ؛ الارتفاع: 31px ؛ فائض: مخفي ؛
5. اضبط الخصائص العائمة للصورة
وهذا يعني ، إضافة سطر من رمز CSS في هذا المثال: #Sub img {float: left ؛}
إذا كنت ترغب في تحقيق صورة مختلطة ونصًا ، فإن هذه الطريقة هي خيار جيد.
يجب التأكيد على أنه في التطوير الفعلي ، قد تتسبب هذه الطريقة في الفوضى ، لأنه من أجل جعل الكود أكثر دلالة وهرمية ، من المحتم توفير عرض مسافة بادئة من الكود من خلال IDE ، والتي ستسمح حتماً بعرض الملصقات والعلامات الأخرى في الخط ، مثل تطبيق أوامر التنسيق المصدر DW. لذلك يمكن أن تساعدنا هذه الطريقة في فهم الموقف الذي يحدث فيه الخطأ ، وعليك التعامل معه في حلول محددة.