早年的东东,贴出来充一下数吧~


问题描述

在一个弹层优化需求中,完成了修改后,刷一下其他(除IE6外)浏览器,很给力,展现都一个样:

再刷下IE6,傻眼了:

初步分析

IE6问题多我知道,不过像这样的问题还是第一次见,它不是某一处的展现问题,而是整个弹层内容……等等,整块内容有问题,某个样式没有加载到?抱着这样的猜测,google了一下,看到下面这句话:

此页面引用的样式文件有三个,一个全局样式(global_min.css),一个弹层样式(css_box_new.css),一个弹层内容样式(css_app.css,以下简称内容样式)。从页面的展现来看,没有引用到的应该是内容样式。检查了一下,果然,页面中设置的charset=utf-8,页面文件也是utf-8编码的,而内容样式是ANSI编码的:

解决方法

此页面是xx站点下的,xx下文件统一用gb2312编码,故将页面的charset值改为gb2312,并将页面文件转为ANSI编码:

修改后再刷下IE6,OK,木有问题了。

进一步探讨

问题虽然解决了,但逻辑上还是说不通:

如果全局和弹层样式与内容样式一样是ANSI编码,为什么一开始它们可以被读取呢?

如果全局和弹层样式不是ANSI编码,那么页面编码修改为ANSI编码后,它们和页面的就不一致了,为什么没有问题呢?

认真思考了三秒钟,无果,去请教了下bboy90,沿着他给出的思路做了下测试:

说明:

样式charset的设置有两种方式,以gb2312为例:

方式一:在css文件的开头设置:

方式二:在<link>中设置:

表格中的“gb2312(样)”指以方式一设置charset为gb2312,“gb2312(link)”指以方式二设置charset为gb2312。

从测试结果可以看出:

  • 页面charset、页面编码、样式charset、样式编码全部一致时正常(数据行2、4)——这条结论有点废话,不过还是觉着要验证下;
  • 样式charset没有设置时,默认与页面charset一致(数据行1与2、3与4的比较);
  • 样式charset可以与页面charset不一致,但一定要与样式编码一致(数据行5、8、7、10)——这说明网上搜到的那句话并不正确,虽然它歪打正着地把问题解决了;
  • 以方式一设置样式charset时有效,以方式二设置时无效(数据行5与6、8与9的比较)。

OK,现在我们对编码的一致性原则有了一定的了解,再回过头来分析上面的问题:

经查实,全局和弹层样式都是引用主站的,均为utf-8编码,并且样式文件中没有设置charset,即修改前:

修改后:

为什么内容样式的charset与编码不一致时,会出现问题,而全局和弹层样式的charset与编码不一致时就正常呢?文品问题吗?

根据bboy90的说法,当样式charset与编码不一致时,若注释符号/* */与中文内容间没有空格(如下),则容易出现问题。

检查了一下,果然,全局和弹层样式的注释符号/* */与注释内容间均有空格,而内容样式的注释符号/* */与注释内容间多处没有空格。

为了进一步验证,针对内容样式的几条注释进行了测试:

以上测试并不能得出什么像样的结论,革命尚未成功,同志仍需努力:

大家平时可能也有遇到过,当样式的编码为ANSI时(注意,这里说的是编码为ANSI时,并非样式charset与编码不一致时),编辑注释间的中文时,有时会出现乱码,如:

当我删除“点”时,会变成这样:

继续往左删两次,更奇葩:

……

结合这个和前面的测试,我做了一个大胆的猜想:

当样式charset与编码不一致时,样式文件中中文的解析会出现问题,而中文解析的错误会影响到紧跟在后面的*/,导致*/的解析也出错,*/不被识别到,结果下面的样式就以被注释掉处理了。而添加空格等于在中文和*/间添加一缓冲地带,中文解析错误时影响紧跟其后的空格,空格后面的*/就可以幸免于难了。因中文是两个字节的,添加两个空格应该足以缓冲了。

因多数浏览器的容错机制比较好,所以没有问题,而IE6这个可怜娃儿先天不足、后天畸形,面对这种问题就束手无策了。

但是……

这样的猜测还有点说不通,编辑时乱码是发生在样式编码为ANSI时,与样式charset和编码的一致性无关;而展现异常发生在样式charset和编码不一致性时,与编码是否为ANSI无关。

哦……忙活了半天,还是无果(泪奔)

结论

  • 请为样式文件设置charset,并保持与编码一致——考虑到未来的趋势,建议charset和编码均设为utf-8。
  • 为了更好地容错,建议注释符号/* */与注释内容间均空两个空格。

2012.12.3

IE6读取不到样式文件bug的更多相关文章

  1. clientdataset 读取excel 如果excel 文件不存在的时候 相应的gird 会不显示数据, 鼠标掠过 gird 格子 才会显示数据。 这是一个bug 哈哈

    clientdataset 读取excel   如果excel 文件不存在的时候   相应的gird 会不显示数据, 鼠标掠过 gird 格子 才会显示数据.   这是一个bug 哈哈

  2. 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...

  3. java读取UTF-8的txt文件发现开头的一个字符问题

    今天遇到一个奇葩问题,在读取一个TXT文件时,出现开头多了一个问号(?).如下图: 莫名奇妙的多了一个.最后通过网上资料,知道在Java中,class文件采用utf8的编码方式,JVM运行时采用utf ...

  4. 细数IE6的一串串的恼人bug,附加解决方法!

    1. li在IE中底部3像素的BUG 解决方案:在<li>上加float:left:即可解决 2. IE6中奇数宽高的BUG. 解决方案:就是将外部相对定位的div宽度改成偶数.高度也是一 ...

  5. tp5.0:替换修改js、css等样式文件路径

    首先, 我们要知道,TP5已经不支持绝对路径访问样式文件啦!所以我们不必去花时间去找使用$_SERVER来获取 手册位置:模板->内置标签->资源文件加载 方法一: 过程: 1.首先在模块 ...

  6. (转)基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

    http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界 ...

  7. x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法

    这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...

  8. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  9. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

随机推荐

  1. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  2. go语言赋值

    使用赋值语句可以更新一个变量的值,最简单的赋值语句是将要被赋值的变量放在=的左边,新值的表达式放在=的右边. x = // 命名变量的赋值 *p = true // 通过指针间接赋值 person.n ...

  3. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  4. 【原创】Kafka Consumer多线程实例

    Kafka 0.9版本开始推出了Java版本的consumer,优化了coordinator的设计以及摆脱了对zookeeper的依赖.社区最近也在探讨正式用这套consumer API替换Scala ...

  5. 『.NET Core CLI工具文档』(十三)dotnet-publish

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-publish 翻译:dotnet-publish 名称 dotnet-publish - 打包应用程序及 ...

  6. C#中级-常用多线程操作(持续更新)

    一.前言       多线程操作一直是编程的常用操作,掌握好基本的操作可以让程序运行的更加有效.本文不求大而全,只是将我自己工作中常常用到的多线程操作做个分类和总结.平时记性不好的时候还能看看.本文参 ...

  7. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

  8. 记录一次bug解决过程:eclipse集成lombok插件

    一 总结 eclipse集成插件lombok: 启动Spring Boot项目: sublime全局搜索关键字:ctrl + shift + F JDK8中的lambda表达式使用 二 BUG描述:集 ...

  9. jq制作圣诞主题页面

    今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢. 首先还是放张效果图: 当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果 那我们就一点一点来完成 ...

  10. Atitit 在线支付系统功能设计原理与解决方案 与目录

    Atitit 在线支付系统功能设计原理与解决方案 与目录 1.1. 支付系统1 1.2. 独立的支付子体系..微服务架构..1 1.3. 参考书籍1 支付战争 [The PayPal Wars:Bat ...