zoukankan      html  css  js  c++  java
  • 都是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等引入出现异常时,不妨看下文件的编码。

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

  • 相关阅读:
    使用HtmlAgilityPack将HtmlTable填入DataTable
    用EXCEL的VBA将PHPCMS的备份文件转换成HTML的一次尝试
    从微观角度看到宏观世界
    洛克菲特:如何管好你的钱包
    论永生_基因编辑
    如何隐藏自己的应用程序在服务器上不被发现?
    检视阅读
    改变了我对英语理解的语法课
    Rick And Morty使命必达与毁灭--------英语笔记
    文件太大,网速太慢,如何高效的传递到服务器上运行
  • 原文地址:https://www.cnblogs.com/yank/p/1366246.html
Copyright © 2011-2022 走看看