CSS Reset 的误区：究竟要不要将图片的边框归零-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，经常会遇到不同的浏览器对网页样式渲染的问题，为了统一不同浏览器的渲染效果，我们需要使用 CSS Reset。然而，在使用 CSS Reset 的时候，很多人都会误认为需要将图片的边框归零。本篇文章将详细讨论这个误区的原因，以及正确的处理方法。

我们经常可以看到这样的代码：

img {
    border: 0;
}

这段代码的作用是将所有图片的边框归零。很多人都认为这段代码是必要的，理由是如果不归零，不同浏览器渲染出来的图片边框样式不同，很难达到统一。而且，这样做也会让页面看上去更加整洁。但实际上，这样做有两个问题：

对于站内图片，如果去掉默认的边框，可能会在某些情况下导致用户看不到图片。这是因为图片加载失败或者网络不稳定时，浏览器会展示一个空框，这个空框的大小和默认的边框大小是一样的。如果将所有图片的边框归零，那这个空框就很小，用户可能以为页面没有加载完。

对于图标字体等，可能会带来无法预料的后果。这是因为有些浏览器默认会给这些元素设置边框，因此如果使用上面的代码将边框归零，可能会导致图标字体等元素在某些浏览器中无法正常显示。

正确的处理方法是只对那些需要去掉边框的图片进行设置，而不是将所有图片的边框都归零。如果想要统一一些图片的边框样式，可以通过给这些图片的父元素设置统一的边框样式来实现。

示例代码：

-- -------------------- ---- -------
-- --------
------------- -
    ------- -----
-

-- ---------
-------------- -
    ------- --- ----- -----
-

在使用 CSS Reset 的时候，不要将所有图片的边框归零，这么做可能会引发无法预料的问题。正确的处理方法是只对需要去掉边框的图片进行设置，并且通过给父元素设置统一的边框样式来达到统一的边框效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/671f63ac2e7021665efd5ce2