أعتقد أن العديد من الأشخاص قد طرحوا هذا السؤال على الإنترنت، وقد تمت مناقشته مرة أخرى مؤخرًا، وأود أن أسجل فهمي الشخصي. وينعكس الفرق بين border:none و border:0; الأداء النظري والفرق الثاني هو الفرق في توافق المتصفح.
اختلافات الأداء:
[border:0;] على الرغم من أن وحدات البكسل التي تم تعيينها على "0" للحد غير مرئية على الصفحة، وفقًا للقيمة الافتراضية للحد، فإن المتصفح لا يزال يعرض عرض الحدود/لون الحدود، أي تم احتلال قيمة الذاكرة.
[الحدود: لا شيء؛] قم بتعيين الحدود على "لا شيء"، مما يعني عدم وجود حدود عندما يقوم المتصفح بتحليل "لا شيء"، فلن يقوم بتنفيذ إجراءات العرض، أي أنه لن يستهلك قيم الذاكرة.
اختلافات التوافق:
ينطبق اختلاف التوافق فقط على المتصفحات IE6 وIE7 وأزرار التسمية والمدخلات. سيحدث هذا الموقف ضمن موضوع XP الخاص بـ win وwin7 وvista.
[border:none;] عندما تكون قيمة border "لا شيء"، يبدو أن الحد غير الصالح لـ IE6/7 لا يزال موجودًا، كما هو موضح في المثال التالي Demo1 :
[border:0;] عندما تكون قيمة الحدود "0"، فإنها تبدو أكثر فعالية من "لا شيء". تقوم جميع المتصفحات بإخفاء الحدود بشكل موحد، كما هو موضح في المثال التالي Demo2 :
تلخيص :
مقارنة border:0; و border:none;، الفرق يكمن في العرض وعدم العرض، أشعر أن لديهم علاقة مماثلة مع العرض: لا شيء والرؤية: مخفي؛ ومع ذلك، لا يوجد اختبار لمقارنة أداء العرض من سمة الحدود، على الرغم من أنه يعتقد أن هناك اختلافًا في أداء العرض، إلا أنه لا يمكن القول إلا أنه نظري.
كيفية جعل الحدود: لا شيء متوافقة تماما؟ ما عليك سوى إضافة سمة الخلفية إلى نفس المحدد، كما هو موضح في المثال التالي Demo3 :
فيما يتعلق بالحدود:0; والحدود:لا شيء;، أنا شخصياً أفضل استخدام الحدود:لا شيء;، لأن الحدود:لا شيء ليس مثيرًا للجدل من حيث استهلاك الأداء بعد كل شيء، ويمكن حل التوافق باستخدام سمات الخلفية وليس عائقًا .