CSS Reset 与跨域加载的样式文件冲突解决方案

如果你在开发网站时用过多种样式文件,你可能会遇到 CSS Reset 技术和跨域加载样式文件之间发生冲突的问题。这会使你的网站样式出现问题并且加大调试难度。下面我们就来详细介绍如何解决这个问题。

什么是 CSS Reset?

CSS Reset 技术指的是将浏览器默认样式(如边距、字体大小)归零的一种技术。不通过 CSS Reset 技术,浏览器的默认样式难以预测,网站就很容易出现大量兼容性问题。经过 CSS Reset 技术处理,我们就可以用更加规范的方式完成网站布局和样式设计。

下面以 Normalize.css 作为 CSS Reset 库,为大家演示如何使用 CSS Reset 技术。

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

如果你想用 Normalize.css 作为样式文件,只需要按照上述示例链接即可。

什么是跨域加载的样式文件?

大多数情况下,我们的样式文件都是存放在与网页同一服务器中,但有些情况下(比如内容分发网络),我们需要从其他域名获得 CSS 样式表。当我们向其他域名请求样式表时,就产生了所谓的跨域读取 CSS 文件。这时候就会遇到跨域阻止和样式文件无法加载等问题。

下面以百度的 CDN 服务器为例,为大家演示如何使用跨域加载样式文件。

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

从上述示例代码可以看出,我们只需要加上样式表的 CDN 路径即可完成跨域加载。

解决方案

当我们同时使用 CSS Reset 技术和跨域加载样式文件时,就可能遇到样式冲突的问题。这时我们需要进行一些特殊的处理方案,以消除样式冲突带来的负面影响。

解决方案之一是将 Reset 样式文件与主样式文件分开加载,避免两者之间的冲突。如下所示:

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

我们将 Reset 样式文件放在主样式文件之前加载,这样就可以避免两者之间的冲突。

解决方案之二是增加样式选择器的权重,如下所示:

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

我们在 HTML 文件中增加一段