이 질문은 인터넷에서 많은 사람들이 제기한 것으로 생각되며, 최근에 다시 논의된 바 있습니다. border:none 과 border:0 의 차이점은 다음과 같습니다. , 이론적인 성능 두 번째 차이점은 브라우저 호환성의 차이입니다.
성능 차이:
[border:0;] 테두리에 대해 "0"으로 설정된 픽셀은 페이지에 표시되지 않지만 테두리의 기본값에 따라 브라우저는 여전히 border-width/border-color, 즉 메모리 값이 사용되었습니다.
[border:none;] 테두리를 "none"으로 설정하면 테두리가 없음을 의미합니다. 브라우저가 "none"을 구문 분석할 때 렌더링 작업을 수행하지 않습니다. 즉, 메모리 값을 소비하지 않습니다.
호환성 차이점:
호환성 차이는 브라우저 IE6, IE7 및 레이블 버튼과 입력에만 적용됩니다. 이 상황은 win, win7 및 vista의 XP 테마에서 발생합니다.
[border:none;] border가 "none"인 경우 다음 예제 Demo1 에서 볼 수 있듯이 IE6/7에 대한 잘못된 테두리가 여전히 존재하는 것 같습니다.
[border:0;] border가 "0"이면 "none"보다 더 효과적으로 느껴집니다. 모든 브라우저는 다음 예제 Demo2 와 같이 테두리를 균일하게 숨깁니다.
요약 :
border:0;과 border:none;을 비교하면 렌더링이 없고 렌더링이 없다는 점에서 차이점이 있습니다. 그러나 렌더링 성능 비교에 대한 테스트는 없습니다. 테두리 속성의 방법에 따라 렌더링 성능에 차이가 있다고 생각되지만 이론적이라고 할 수 있습니다.
테두리를 완전히 호환되게 만드는 방법은 무엇입니까? 다음 예제 Demo3 에 표시된 것처럼 동일한 선택기에 배경 속성을 추가하기만 하면 됩니다.
border:0; 및 border:none;에 대해서는 개인적으로 border:none;을 사용하는 것을 선호합니다. 왜냐하면 border:none은 결국 성능 소모 측면에서 논란의 여지가 없고, 호환성은 배경 속성으로 해결될 수 있고 장애가 되지 않기 때문입니다. .