JS与CSS外联文件中HTML标记导致样式异常的原因及解决

简而言之，这实际上是同一个问题，但网上很难找到解决方法。关键在于：外联的JS和CSS文件中绝对不能包含任何HTML标记或注释，否则会导致浏览器行为异常。一旦移除这些内容，问题即可解决。

外联CSS导致样式异常的现象

起因是网上看到一个表格CSS样式，觉得美观，便尝试将其应用到自己的ASP.NET程序中。起初，将样式直接写在aspx文件中，显示效果正常。

随后尝试将CSS和JS分离为独立文件，此时浏览器显示效果发生剧烈变化，与内联时完全不同。表现如同未加载CSS样式表，但部分样式生效，部分被忽略。例如，表头thead正常显示，但表格边框被强制设置为2px。这种部分失效的情况令人困扰。

移除HTML标记与注释的解决方法

解决方法非常简单：移除JS和CSS文件中所有的HTML标记（如<>）以及HTML注释（如<!-- -->），问题即可解决。

浏览器默认渲染参数的调用机制

查阅资料后得知，当浏览器无法识别相关样式表时，会调用其内部的默认CSS渲染参数进行工作。

此图摘自大漠所著《图解CSS3：核心技术与案例实战》。该书是目前为数不多的CSS3相关书籍，尽管阅读的是电子版，但仍考虑购买实体书。

使用浏览器自带的开发人员工具检查后证实，当浏览器无法解释样式时，会私自调用其自带的渲染参数。如图中以-webkit-开头的两段代码，将表格边框强制设为2px。

JS与CSS文件中注释处理差异

检查JS文件后，移除一对HTML标记<script type="text/javascript"></script>即可解决问题，而内部的<!-- -->注释标记可以保留。

检查CSS文件时，发现其中包含<!-- CSS goes in the document HEAD or added to your external stylesheet -->。CSS样式文件中若存在HTML注释，会导致CSS被部分解释的奇怪现象。移除该注释后，问题随之解决。此前因这一小处注释导致的问题令人感到憋屈。

那么，CSS文件中应如何书写注释？可以使用C语言风格的注释方法，即/* 注释内容 */。

以上关于JS和CSS内联与外联注意事项的内容分享完毕，希望能对大家有所帮助，也希望大家多多支持本站。