DOCTYPE الصارم الذي يؤثر على التباعد بين الصور

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

  •  20-08-2019
  •  | 
  •  

سؤال

أواجه مشكلات في تباعد الصور عندما قمت بالتبديل إلى XHTML Strict DOCTYPE.

الكود التالي - الذي يستخدم ورقة أنماط إعادة تعيين Yahoo لقتل كل حشوة المتصفح الافتراضية - يترك فجوة تبلغ حوالي 4 بكسل بين الصورتين أدناه ولكن فقط عندما أستخدم نوع المستند الصارم.لماذا هذا؟

إنها مشكلة فقط في Chrome وFirefox.لا يعرض IE بكسلًا واحدًا بين الصورتين.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>
هل كانت مفيدة؟

المحلول

وعن طريق الإجابة بطرس بمثابة بدء الإصلاحات التالية المشكلة: 

img { vertical-align: bottom }

والسبب يعمل هذا هو أن الافتراضية لvertical-align هو baseline، وهو ما يعادل جزء من النص "فوق خط" حيث شنق البتات منقوشة أسفل (أقل حالة ز، س، الخ جميع شنق دون هذا الأساس).

وذلك من أجل أن تترك مجالا مغادرتها 4PX من الفضاء لهذه يتدلى.

وعلى أمل أن من المنطقي.

وتحرير: المساعدات البصرية من موقع المصدر

<الفرعية> (المصدر: brightlemon.com )

نصائح أخرى

الحرائق يدل على أنه هو DIV الذي يتسبب في تباعد، بدلا من الصورة.

وأنا وضعت FONT-SIZE: 0؛ لشعبة العلوي والفجوة يذهب بعيدا.

و(الغريب، هناك / يجب أن يكون حجم الخط ورثت: 0؛ من الجسم في إعادة تعيين-min.css حتى لا يدري لماذا عملت هذا)

في doctypes صارمة، تصبح صورة عنصر مضمن، ويتصرف مثل النص. وبالتالي تحتاج إلى تغيير الخاصية vertical-align لها، أو تغيير الخاصية عرض لdisplay: block، أو display:inline-block

ومحاولة لاستبعاد الأخطاء الشائعة، وجعل رمز مرور التحقق عن طريق تحديد أية أخطاء التحقق من صحة أقل من 8.

وعموما إذا كان المتصفح لا يمكن تحليل المستند في DOCTYPE معين، النتائج غير محددة.

لا يزال لا يعمل اعتبارها لكم، ولكن هنا رمز التحقق: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

والعرض: الحل المضمنة كتلة بالتأكيد لم يعمل بالنسبة لي

وومحاذاة رأسية: حل السفلي فعل العمل، ولكن مع واحد التحذير: اعتمادا على الوضع، كان هناك الصور التي اضطررت الى وضع بدلا من ذلك إلى محاذاة رأسية: أعلى

والتحول إلى معايير فضفاضة بدلا من الصرامة عملت بالنسبة لي ... أبقى IE التنسيق بأنني مطلوب، ولكن القضاء على تباعد صورة الغريب في فايرفوكس وكروم.

https://developer.mozilla.org/en/Gecko٪27s_Almost_Standards_Mode

والمستخدمة في السطر: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top