نحن نعلم أن خصائص علامة SELECT في كل متصفح ودعم كل متصفح مختلفة ، مما يؤدي إلى عرض مربع التحديد المحدد بشكل مختلف في كل متصفح. أدناه ، نقوم بإنشاء اختيار متوافق تمامًا من خلال دعم سمات CSS الرئيسية.
لقد استخدمت طريقة التحكم في المتغيرات لكتابة عرض تجريبي لاختبار ثلاث حالات في كل متصفح: height.100.padding.0 ، height.no.padding.100 ، no.height.no.padding. النتائج كما يلي: Link Pictures ، ظهور العرض التجريبي لكل متصفح.
يمكننا اشتقاق سمات البحث التالية.
IE6 | IE7 | IE8 | IE9 | وما يليها | الفصل | SF | المرجع | |
الارتفاع الافتراضي | 22px | 22px | 19px | 20px | 19px | 19px | ||
ارتفاع | و | ر | ر | ر | ر | ر | و | ر |
حشوة | و | و | ر | ر | ر | ر | و | ر |
رفع الخط | و | و | و | و | و | و | ر | و |
النص المتمركز رأسيا | ر | ر | ر | و | و | ر | ر | ر |
من خلال الملخص المذكور أعلاه لسمات نتائج البحث ، نعلم أن IE6 تم ضبطه على 22px ولم يتغير في أي وقت ، في حين أن المتصفحات الأخرى باستثناء Safari تدعم سمة الارتفاع ، لذلك حددنا الارتفاع: 22 بكسل. لذلك الآن دعنا نصحح متصفح Safari. لقد وجدنا أن Safari فقط يدعم سمة ارتفاع الخط ، بحيث يمكنك استخدام ارتفاع الخط لتصحيح ارتفاعه إلى 22 بكسل. عندما يكون حجم الخط 12 بكسل ، يتم تعيين خط: 22px. في النهاية ، لا يتمركز النص الموجود في FF و IE9 ، ويتم تعيين 2px 0. لقد وجدنا أن FF و IE9 تتركز ، لكن ارتفاع اختيار كل متصفح لم يزداد. لذلك هناك القليل من الشك هنا ، تحت إعداد الارتفاع ، لا يزيد عدد قليل من الأرقام من الارتفاع الإجمالي؟
فيما يلي مثال رمز متوافق تمامًا.
انسخ الرمز