وضع ذروة <حدد> في فايرفوكس 2

https://stackoverflow.com/questions/1614206

06-07-2019
|

سؤال

ولدي مشكلة غريبة مع HTML حدد ارتفاع مربع في فايرفوكس 2، وهنا رمز:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

وإن الارتفاع 2 بكسل أكبر - الحشو، وحجم الخط وارتفاع خط لا يبدو أن لديها أي تأثير على ذلك، وأنا نفد من الأفكار والأماكن للبحث. يجب أن نفترض أن ارتفاع حدد مربع الفعلي في FF2 دائما ارتفاع المغلق + 2؟ يمكنني إصلاحه أو للتغلب على ذلك؟

المحلول

ومرحبا بكم في عالم رائع من السيطرة شكل التصميم.

ودون الرغبة في صوت انهزامية، أعتقد أن عليك أن تعطي للتو. مهما كان يتحكم لك شكل النمط سيكون هناك دائما المتصفحات التي تتجاهل تماما الأنماط الخاصة بك. أعتقد سفاري يتجاهل معظم CSS. انظر " التصميم مختارة عناصر " على 456 بيريا شارع للحصول على أمثلة.

وهناك بدائل باستخدام جافا سكريبت - أعتقد مسج UI لديه بعض الحاجيات مماثلة إلى العنصر حدد. يمكنك أيضا استخدام هذا مسج القائمة فوق ونعلق وظيفة الذي يحدد قيمة حقل إدخال مخفي. لقد فعلت هذا من قبل، وأنه يعمل بشكل جيد. هذا النوع من الأشياء هي الطريقة الوحيدة التي سوف تحصل على السيطرة الكاملة على حجم ونظرة.

نصائح أخرى

وربما تكون هناك بعض الافتراضات متصفح في اللعب. ما يحدث معرف كنت تستخدم إعادة تعيين CSS ومن ثم تطبيق الأنماط الخاصة بك؟ هل لا يزال 2px قبالة؟

والتخلي عن استخدام CSS لنمط عليه. احتضان مسج / جافا سكريبت.

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

وهنا مقالة جيدة حول هذا الموضوع: HTTP: //www.noupe. كوم / المغلق /-عناصر النموذج 40-cssjs-التصميم-وظائف-techniques.html

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow