都是CSS惹的祸

      今天遇到一个很搞笑的问题,在将美工设计的静态页面转换为aspx页面时,设计页面正常显示,但预览时格式出现了问题。尽管这是一个很简单的问题,但如果没有遇到过,怕是一下子很难判定是哪里出了问题。

  设计视图:

    预览效果图:

      根据美工设计的静态页面,显示没有问题。但是如果用aspx页面代替静态页面,没有任何的修改,CSS引用、图片链接完全正确,在设计页面查看一切正常,但是当你预览的时候,样式加载不进来,有的样式应用上了,但是有的没有,也就是说一部分CSS样式并没有发挥作用。这是什么问题呢?很怪。之前也做过同样的页面转换,但是并没有出现这种情况,很是不解。继续检查CSS和图片的链接,并没有发现问题,无助之余只能寻求于网络,但是google并没有到类似的问题。看来真的很少有人遇到此类问题。我只能自己一点点去摸索,如果把CSS直接写到页面,则没有问题。


总结问题:
  <1>设计页面没有问题,预览时才出现这种情况
  <2>之前类似的操作,并没有出现这种情况。
  <3>其他人很少遇到这种情况

分析:

  应该比较此项目和之前的项目,设置、技术层面有哪些不同;会不会是应用程序在运行的时候,加载了一些未知的元素为了减少项目之间的联系、耦合,我重新创建了一个WEB项目进行单独的测试,结果还是出现这种情况。开始我觉得是不是CSS之间产生的冲突,于是,我将某一个模块单独拿出来做成一个页面,引用相应的CSS,但是依然错误。是不是VS2005的问题,我又用2008进行了测试,也是重新创建一个新的WEB。经过一番检查之后,缩小了问题的出处的范围:
  <1>不是.Net开发工具的问题。不过有可能是其它的插件引起的问题。之前安装PowerDesigner,就出现了一些奇怪的问题。
  <2>CSS自身的问题,尽管不知道问题出在哪里。
我又重新检查了电脑的程序,并没有发现类似于PowerDesigner设计类软件。之前是将某一个模块的样式表拿出来进行测试,并没有发现此类问题。

排除其它可能,问题重新回到CSS

  这下,可以肯定问题依然出在CSS文件自身的问题上。如果是有经验的高手,也许不用上述的复杂检验,就能很直接的断定是CSS的问题。但是之前我也对CSS进行了检查、测试,并没有发现问题的根源。这下,需要更加得深入。

  我从项目中,拿出一个页面,然后拿出页面的一部分,然后拿出针对某一控件的CSS控件,经过一番测试,终于得出了一个惊人的发现,当CSS不包含注释的时候,页面正常显示,原来问题就出在注释上,然后我就google下,CSS注释会引发的异常,果然找到了一些眉目。

  注释不能为中文,如果你为自己定义的 CSS 写了中文注释,那么在一些特殊情况下(例如服务器端的支持,页面所用的程序类型等)会导致部分代码无故失效。

  注释符号与汉字间应该有空格,如果是下面的写法会异常。

/*头部分*/
.header
{
   width
:100%;
   heigth
:172px;
   border-width
:1px;
}

按照他的说法,我真的试了一下,果然,还真是奏效。但是查看之前的项目,CSS中也有中文注释,而且中文注释与注释符号间也没有空格,为什么能够正常显示。

  认真想想,不能有汉字注释,应该有空格,问题应该没这么简单,这还不是问题的真正的根源。 很有可能是编码的问题,于是我用记事本打开最初的CSS文件,另存为UTF-8格式,然后覆盖了项目中的CSS文件,结果真的正常显示了。问题的真正根源找到了。

最终结论:

  CSS 文件默认是 ANSI 编码,可能你会发现在一般情况下这样也是没有问题的,然而当 CSS 文件中包含有中文注释时就可能不尽如人意了!

  保证应用程序中,HTML、JS、CSS等使用统一的编码。最好使用UTF-8,有的时候中文页面可能需要设置为GB2312。

  当你在遇到JS、CSS等引入出现异常时,不妨看下文件的编码。

  本文只是一个小小的问题,如果是有经验的高手,可能一下就能看出问题的症结。但有的时候,总容易迷糊,在这里我将它写出来,或许给大家提供的帮助很小,但是说明了我们编程过程中的一些应该注意的小问题,也为朋友们敲响警钟,千万别再学我这么傻了。

原文地址:https://www.cnblogs.com/yank/p/1366246.html