عند إجراء تنضيد DIV+CSS على الصفحة، من الشائع تمامًا مواجهة مشكلة المساحة البيضاء الزائدة ضمن عنصر الصورة img في IE6 (وبطبيعة الحال، في بعض الأحيان في Firefox). "ear" ، يجب استخدام حلول مختلفة اعتمادًا على الأسباب. نلخص هنا بشكل مباشر الطرق الشائعة لحل خطأ الفجوات الزائدة أسفل تخطيط الصورة للرجوع إليها.
1. قم بتحويل الصورة إلى كائن على مستوى الكتلة
عن طريق ضبط img على "display:block;". في هذا المثال أضف مجموعة من أكواد CSS: "#sub img {display:block;}".
2. يمكن أيضًا حل ضبط المحاذاة الرأسية للصورة،
أي ضبط سمة المحاذاة الرأسية للصورة على "أعلى، أعلى النص، أسفل، أسفل النص". على سبيل المثال، في هذا المثال، أضف مجموعة من أكواد CSS: "#sub img {vertical-align:top;}".
3. اضبط حجم نص الكائن الأصلي على 0 بكسل،
أي أضف سطرًا في #sub: "font-size:0;" لحل المشكلة. ولكن هذا تسبب أيضًا في مشكلة جديدة، حيث لا يمكن عرض النص الموجود في الكائن الأصلي. حتى إذا كان جزء النص محاطًا بكائن فرعي، فلا يزال من الممكن عرضه عن طريق تعيين حجم نص الكائن الفرعي، ولكن سيتم ظهور رسالة خطأ تفيد بأن النص صغير جدًا أثناء التحقق من صحة CSS.
4. قم بتغيير خصائص الكائن الأصلي.
إذا كان عرض الكائن الأصلي وارتفاعه ثابتين وكان حجم الصورة يعتمد على الكائن الأصلي، فيمكنك تعيين "تجاوز السعة: مخفي؛" لحل المشكلة. على سبيل المثال، في هذا المثال، يمكنك إضافة التعليمة البرمجية التالية إلى #sub: "width:88px;height:31px;overflow:hidden;".
5. لتعيين السمة العائمة للصورة
، أضف سطرًا من كود CSS في هذا المثال: "#sub img {float:left;}". إذا كنت تريد تحقيق ترتيب مختلط للصور والنصوص، فهذه الطريقة تعد خيارًا جيدًا.
6. قم بإلغاء المسافة بين علامة الصورة وعلامة الإغلاق الأخيرة للكائن الأصلي.
يجب التأكيد على أن هذه الطريقة قد تسبب مشكلة في التطوير الفعلي، لأنه من أجل جعل الكود أكثر دلالة ووضوحًا عند كتابة الكود، لا مفر من توفير عرض المسافة البادئة للكود من خلال IDE، مما سيؤدي حتماً إلى إنشاء الملصق والتسميات الأخرى عرض فاصل الأسطر، مثل أمر "تطبيق تنسيق المصدر" الخاص بـ DW. لذلك، يمكن أن تساعدنا هذه الطريقة في فهم الموقف الذي يحدث فيه الخطأ، ويجب حل الحل المحدد من قبل الجميع.