كيف يتم عرض الحدود في المتصفح

تمت مناقشة طريقة عرض سمة الحدود في المتصفح في مجموعة QQ لفترة طويلة، ولقد استخدمت دائمًا border:0 none للتعامل معها. بالطبع، هناك أيضًا أسباب تجعلني أفعل ذلك، وسيتم ذكر هذا السبب في التحليل أدناه. قبل تحليل خصائص الحدود، هناك بعض النقاط التي تحتاج إلى شرح هي:

1. Xiaozhi، أنا لست خبيرًا في التحليل، أنا فقط أستخدم الأداتين Firebug وIE Developer لعرض نتائج عرض المتصفح في متصفح FF ومتصفح IE؛
2. نظرًا لأننا نظرنا فقط إلى نتائج العرض لمتصفح FF ومتصفح IE، فهذا لا يعني أن جميع المتصفحات يتم عرضها بنفس الطريقة.

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

باستخدام نفس رمز بنية XHTML، قارن بين متصفح FF ومتصفح IE على التوالي.

<نوع الإدخال = "زر" القيمة = "زر" />
<ساعة />
<زر>زر</زر>

الرسوم المتحركة التوضيحية 1 الرسوم المتحركة التوضيحية 2

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

*متصفح FF: أنماط الحدود لعلامات الإدخال وعلامات الأزرار هي border-width:3px border-style:outset;
* متصفح IE: نمط حدود تسمية الإدخال هو border-width:2px; border-style:outset;

باستخدام هذه البيانات، دعونا نلقي نظرة على النتيجة التي ستكون عندما نحدد نمطًا لسمة الحدود.