ارتفاع SPAN في فايرفوكس

Question

باستخدام CSS، أحاول تحديد ارتفاع علامة SPAN في Firefox، لكنها لا تقبلها (IE يفعل ذلك، وهو أمر مضحك بما فيه الكفاية).

يقبل Firefox الارتفاع إذا كنت أستخدم DIV، ولكن مشكلة استخدام DIV هي فاصل الأسطر المزعج بعده، وهو ما لا يمكنني الحصول عليه في هذه الحالة بالذات.

لقد حاولت تعيين سمة نمط CSS لـ:

display: inline

بالنسبة لـ DIV، ولكن يبدو أن Firefox يعود بعد ذلك إلى سلوك SPAN على أي حال، ويتجاهل سمة الارتفاع مرة أخرى.

Answer 1

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

طالما أن حاوية أي شيء تحتوي على div 1 و2 واسعة بما يكفي لتناسبها، فيجب أن يكون هذا جيدًا.

Answer 2

يمكنك تعيين أي عنصر ل display: inline-block للسماح لها بتلقي الارتفاع أو العرض.يتيح لك هذا أيضًا تطبيق أي "أنماط كتلة" أخرى على عنصر ما.

لكن الشيء الوحيد الذي يجب توخي الحذر بشأنه هو أن Firefox 2 لا يدعم هذه الخاصية.يعد Firefox 3 أول متصفح قائم على Mozilla يدعم هذه الخاصية.تدعم جميع المتصفحات الأخرى هذه الخاصية، بما في ذلك Internet Explorer.

لا تنسى inline-block لا يسمح لك بتعيين محاذاة النص داخل العنصر على Firefox إذا كان يعمل في وضع المراوغات.جميع المتصفحات الأخرى تسمح بذلك على حد علمي.إذا كنت تريد ضبط محاذاة النص أثناء التشغيل في وضع المراوغات، فسيتعين عليك استخدام الخاصية -moz-inline-stack بدلاً من inline-block.ضع في اعتبارك أن هذه خاصية خاصة بموزيلا فقط، لذا سيتعين عليك إجراء بعض عمليات الكشف عن المتصفح للتأكد من أن موزيلا فقط هي التي تحصل على هذه الخاصية، بينما تحصل المتصفحات الأخرى على المعيار inline-block.

Answer 3

لا يمكن أن تحتوي العناصر المضمنة على ارتفاعات (ولا عروض) بهذا الشكل.SPAN موجودة بالفعل display: inline بشكل افتراضي.Internet Explorer هو في الواقع المتصفح المعطل في هذه الحالة.

Answer 4

نظرًا لأنك تعرضه في السطر، فيجب تعيين الارتفاع على ارتفاع سمة ارتفاع الخط.

اعتمادًا على كيفية تخطيطه، يمكنك دائمًا استخدام float:left أو float:right على الامتداد/div لمنع فاصل الأسطر.ولكن إذا كنت تريده في منتصف الجملة، فهذا الخيار غير متاح.

Answer 5

المشكلة هي أن "العرض:"inline" لا يمكن الحصول على ارتفاع مرتبط لأنه، نظرًا لكونه مضمنًا، فإنه يحصل على ارتفاعه من المحتوى الخاص به.على أية حال، كيف يمكنك تحديد ارتفاع المربع المكسور في نهاية السطر؟

قد تحاول تعيين "ارتفاع الخط" بدلاً من ذلك، أو إذا لم ينجح ذلك بما يرضيك، فاضبط المساحة المتروكة:

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

Answer 6

يمكنك فقط تغيير ارتفاع (وعرض) عنصر الامتداد عند ضبطه عليه display: block;.هذا لأنه عنصر مضمن بشكل طبيعي. div تم ضبطه على display: block; عادة.

الحل يمكن أن يكون باستخدام:

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Answer 7

لتعيين ارتفاع الامتداد يجب أن يعمل التالي في فايرفوكس

span {
  display: block;
  height: 50px;
}

Answer 8

محاذاة النص داخل العنصر يمكنك ضبطها باستخدام سمات الحشو والكتلة المضمنة.عرض: كتلة مضمنة؛الحشو العلوي: 3px؛على سبيل المثال

Answer 9

height في em = relative line-height

على سبيل المثال height:1.1em مع line-height:1.1

= 100% ممتلئة