لماذا يتم عرض أحرف التنسيق مثل CRLF بواسطة متصفحات معينة كمسافات بيضاء؟

Question

أحتاج إلى شخص يشرح لي من أين تأتي هذه الحشوة الإضافية على divs التي تحتوي على عناصر img.

يمكنك الذهاب إلى http://www.dev12.com/CSSTest للحصول على أمثلة حية لمشكلتي.

المشكلة رقم 1:يعرض Safari وFirefox وOpera ما يقرب من 6 بكسل من الحشو السفلي غير المرغوب فيه على قسم الحاوية.لا يهم إذا قمت بتعيين المساحة المتروكة بشكل صريح على 0px.

المشكلة رقم 2:إذا قمت بتنسيق الكود الخاص بي بحيث تكون كل صورة في سطر خاص بها في ملف html الخاص بي، فستتم إضافة 6 بكسل إضافية من المساحة المتروكة اليمنى إلى كل صورة.على سبيل المثال، يعرض مقطع التعليمات البرمجية التالي حشوة غير مرغوب فيها بين الصورتين:

<div>
    <span><img src="button.gif" /></span>
    <span><img src="button.gif" /></span>
</div>

لكن، هذا لا تحتوي كتلة التعليمات البرمجية على المساحة غير المرغوب فيها:

<div>
    <span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>

من الواضح أن Safari وFirefox وOpera يعرضون حرف الإرجاع بين علامات الامتداد كمسافات بيضاء.لا أستطيع أن أذكر أنني واجهت هذه المشكلة من قبل.أنا أكتب الكود الخاص بي في Textmate.هل هناك إعداد يجب أن أنظر إليه لمنع ذلك؟

أنا دائمًا أستخدم نوع XHTML 1.0 Strict doctype.هذا مربك بشكل خاص بالنسبة لي لأنه بدائي للغاية.شخص ما يساعدني على فهم هذا!

كن

Answer 1

#1 وذلك بسبب محاذاة الخط الأساسي الافتراضية للصور المضمنة - المساحة الإضافية التي تراها محجوزة للنازلين (الأحرف التي تقع أسفل الخط الأساسي:g، p، q، y، وما إلى ذلك) في النص المحيط بصورك.(حقيقة عدم وجود نص ليس لها أهمية - فالمساحة المخصصة لها لا تزال محجوزة.)

ويمكنك التخلص منه بهذه الطريقة:

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

#2 الأسطر الجديدة عبارة عن مسافة بيضاء، ويتم عرضها كمسافات.إذا كان لديك HTML مثل هذا:

<p>This is a sentence
in a paragraph.<p>

كنت تتوقع أن يضع المتصفح مسافة بين "الجملة" و"في"، أليس كذلك؟ <img> العناصر عبارة عن كتل مضمنة، تمامًا مثل الكلمات الموجودة في الفقرة.

Answer 2

إذا كنت أتذكر بشكل صحيح، وتقول المواصفات HTML أن أي وجميع المسافات في الملف المصدر سيتم تقديم باعتباره بيضاء واحدة.

وعلى سبيل المثال، إذا كنت فتح وثيقة HTML جديد واكتب

hello
world

والنتيجة ستكون "مرحبا العالم"

وستظهر النتيجة نفسها عن أي مما يلي:

hello


world

و------ أو ----------

hello world

و------ أو ----------

hello                                                 world

وبغض النظر عن مقدار المسافات التي وضعت بين "مرحبا" و "العالم" واحد فقط سوف تجعل. لا يهم إذا كان بيضاء هي CRLF أو حرف مسافة.