Я думаю, что этот вопрос задавался многими людьми в Интернете, и недавно он снова обсуждался. Я хотел бы выразить свое личное понимание. Разница между border:none и border:0; , теоретическая производительность Второе отличие — это разница в совместимости браузера.
Различия в производительности:
[border:0;] Хотя пиксели, для границы которых установлено значение «0», не видны на странице, в соответствии со значением границы по умолчанию браузер по-прежнему отображает ширину/цвет границы, то есть значение памяти занято.
[border:none;] Установите для границы значение «none», что означает отсутствие границы. Когда браузер анализирует «none», он не будет выполнять действия рендеринга, то есть не будет использовать значения памяти.
Различия совместимости:
Разница в совместимости применима только к браузерам IE6, IE7 и кнопкам-меткам и вводам. Эта ситуация произойдет в теме XP для Win, Win7 и Vista.
[border:none;] Если граница имеет значение «none», кажется, что недопустимая граница для IE6/7 все еще существует, как показано в следующем примере Demo1 :
[border:0;] Если граница равна «0», это выглядит более эффективно, чем «нет». Все браузеры скрывают границу одинаково, как показано в следующем примере Demo2 :
Подведите итог :
Сравнивая border:0; и border:none;, разница заключается в рендеринге и отсутствии рендеринга. Я чувствую, что они имеют схожую связь с display:none; иvisibility:hidden;. Однако не существует теста для сравнения производительности рендеринга. атрибута border, хотя считается, что разница в производительности рендеринга существует, но ее можно назвать лишь теоретической.
Как сделать border:none полностью совместимым? Просто добавьте атрибут фона в тот же селектор, как показано в следующем примере Demo3 :
Что касается border:0; и border:none;, лично я предпочитаю использовать border:none;, потому что border:none не вызывает споров с точки зрения потребления производительности, а совместимость можно решить с помощью фоновых атрибутов и не является препятствием; .