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


问题描述

在一个弹层优化需求中,完成了修改后,刷一下其他(除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. 妙用psexec分析关机一直挂起的Windows update 更新

    Windows 更新服务对每个IT运维人员来说都不会陌生,而且很多情况下出现的一些不兼容,产品问题通过更新都可很好的解决掉. 小弟近日为一台老爷机服务器安装Windows 产品更新就遇到了意见事情,特 ...

  2. Three.js 第一篇:绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  3. 微信小程序定时器组件(输入时间字符串即可倒计时)

    昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../pl ...

  4. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  5. 利用Python进行数据分析(9) pandas基础: 汇总统计和计算

    pandas 对象拥有一些常用的数学和统计方法.   例如,sum() 方法,进行列小计:   sum() 方法传入 axis=1 指定为横向汇总,即行小计:   idxmax() 获取最大值对应的索 ...

  6. AJAX(一)

    AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...

  7. Rafy 领域实体框架 - 公司内部培训视频

    本月给公司内部一个项目做架构重构,其中使用到了 Rafy 框架.所以我培训了 Rafy 领域实体框架的使用方法,过程中录制了视频,方便其他同事查看.现在把视频放到园里来分享下,有兴趣的朋友可以看看,有 ...

  8. C#开发微信门户及应用(32)--微信支付接入和API封装使用

    在微信的应用上,微信支付是一个比较有用的部分,但也是比较复杂的技术要点,在微商大行其道的年代,自己的商店没有增加微信支付好像也说不过去,微信支付旨在为广大微信用户及商户提供更优质的支付服务,微信的支付 ...

  9. bzoj4518--斜率优化DP

    设x[i]为第i天走的路程,s为路程总和,则: ans=[(s/m-x[1])^2+(s/m-x[2])^2+(s/m-x[3])^2+...+(s/m-x[m])^2]*m =[(s-x[1]*m) ...

  10. 使用命令 gradle uploadArchives 的异常: Unable to initialize POM pom-default.xml: Failed to validate POM for project

    在使用:gradle uploadArchives 命令对项目进行上传maven时,常常遇到如下报错: 这时候要仔细的检查一下build.gradle文件中的dependencies内容,很多时候是由 ...