为网页应用CSS,我们都知道有四种方法:行内式、嵌入式、import载入式、link载入式。

方法很多,但如果你想做点像样的东西,基本上前三种都可以不予考虑了:

行内式:直接写到每个元素的style属性里。极其繁琐、灾难性质、无法维护。

嵌入式:直接写到HTML页面的style元素里。难以维护。

import载入式:在HTML页面的style元素里以@import"这里写CSS文件的路径"的方式来加载外部的CSS。缺点是CSS会在HTML页面载入之后才被加载,这会导致有那么一会儿你的HTML页面的样子是七零八落的。

link载入式:在HTML页面的head元素中以的方式来加载外部的CSS文件。优点是CSS文件会先于HTML页面被加载进来,因此,任何时候你的页面都是美观的。

在实际开发时,你会发现,IE的噩梦即使到了IE11也是存在的,一些在Chrome和Firefox下完全正常和无害的页面在IE11下却有一些问题,通常也不是什么大问题,但多数都会明显到你感到不得不处理一下。

你可以使用原生JavaScript或jQuery来根据捕获到的客户端浏览器的信息来决定加载哪个CSS文件。

在针对不同的浏览器编写不同的外部CSS文件时,有两点要注意:

  1. 外部CSS文件的开头一定不要写元素。换句话说,你的外部CSS文件中应该没有任何HTML元素,只有纯粹的CSS样式。如果你写上了元素,你会遇到一些奇怪的问题。

  2. 因为你实际上要纠正的只是不同浏览器中个别的那几处小问题,针对不同的浏览器的CSS文件之间的差别是很小的,如果为了这点差别,就要维护几份内容几乎相同的CSS文件是很不值得的,因为你将不得不费力的在多份CSS文件中比对着那份已经调试好的CSS文件在其他几份CSS文件中寻找你该改哪些地方,不该动哪些地方,当CSS文件内容很多时,你会发现这工作相当要命。

因此,正确的做法是你应该写一份通用的CSS文件(比如一份针对Chrome的CSS文件,假定叫a.css),然后将针对IE的那几处修订样式单独写到一个CSS文件中(假定叫b.css),并在动态加载时,针对Chrome只加载a.css文件,而针对IE则使用link进行两次加载,第一次加载通用的a.css文件,第二次加载b.css。没错,在一个HTML页面中是可以加载多个CSS文件的,而且后加载的CSS会覆盖先前加载的CSS对同一目标的样式指定。

这样有一个巨大的好处,那就是你只需要维护一份主CSS即可。当又发现两个浏览器中有什么不同时,只需把用于修订的小块CSS代码添加到对应的修订CSS文件中即可。