أفضل الإعدادات المسبقة للاختيار متوافقة تمامًا مع الاختيار لكل متصفح

نحن نعلم أن خصائص علامة SELECT في كل متصفح ودعم كل متصفح مختلفة ، مما يؤدي إلى عرض مربع التحديد المحدد بشكل مختلف في كل متصفح. أدناه ، نقوم بإنشاء اختيار متوافق تمامًا من خلال دعم سمات CSS الرئيسية.

لقد استخدمت طريقة التحكم في المتغيرات لكتابة عرض تجريبي لاختبار ثلاث حالات في كل متصفح: height.100.padding.0 ، height.no.padding.100 ، no.height.no.padding. النتائج كما يلي: Link Pictures ، ظهور العرض التجريبي لكل متصفح.

يمكننا اشتقاق سمات البحث التالية.

من خلال الملخص المذكور أعلاه لسمات نتائج البحث ، نعلم أن IE6 تم ضبطه على 22px ولم يتغير في أي وقت ، في حين أن المتصفحات الأخرى باستثناء Safari تدعم سمة الارتفاع ، لذلك حددنا الارتفاع: 22 بكسل. لذلك الآن دعنا نصحح متصفح Safari. لقد وجدنا أن Safari فقط يدعم سمة ارتفاع الخط ، بحيث يمكنك استخدام ارتفاع الخط لتصحيح ارتفاعه إلى 22 بكسل. عندما يكون حجم الخط 12 بكسل ، يتم تعيين خط: 22px. في النهاية ، لا يتمركز النص الموجود في FF و IE9 ، ويتم تعيين 2px 0. لقد وجدنا أن FF و IE9 تتركز ، لكن ارتفاع اختيار كل متصفح لم يزداد. لذلك هناك القليل من الشك هنا ، تحت إعداد الارتفاع ، لا يزيد عدد قليل من الأرقام من الارتفاع الإجمالي؟

فيما يلي مثال رمز متوافق تمامًا.

انسخ الرمز