IE6读取不到样式文件bug
早年的东东,贴出来充一下数吧~
问题描述
在一个弹层优化需求中,完成了修改后,刷一下其他(除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的更多相关文章
- clientdataset 读取excel 如果excel 文件不存在的时候 相应的gird 会不显示数据, 鼠标掠过 gird 格子 才会显示数据。 这是一个bug 哈哈
clientdataset 读取excel 如果excel 文件不存在的时候 相应的gird 会不显示数据, 鼠标掠过 gird 格子 才会显示数据. 这是一个bug 哈哈
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
- java读取UTF-8的txt文件发现开头的一个字符问题
今天遇到一个奇葩问题,在读取一个TXT文件时,出现开头多了一个问号(?).如下图: 莫名奇妙的多了一个.最后通过网上资料,知道在Java中,class文件采用utf8的编码方式,JVM运行时采用utf ...
- 细数IE6的一串串的恼人bug,附加解决方法!
1. li在IE中底部3像素的BUG 解决方案:在<li>上加float:left:即可解决 2. IE6中奇数宽高的BUG. 解决方案:就是将外部相对定位的div宽度改成偶数.高度也是一 ...
- tp5.0:替换修改js、css等样式文件路径
首先, 我们要知道,TP5已经不支持绝对路径访问样式文件啦!所以我们不必去花时间去找使用$_SERVER来获取 手册位置:模板->内置标签->资源文件加载 方法一: 过程: 1.首先在模块 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界 ...
- x:bind不支持样式文件 或 此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法
这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x: ...
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- Yii2 assets注册的css样式文件没有加载
准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...
随机推荐
- 妙用psexec分析关机一直挂起的Windows update 更新
Windows 更新服务对每个IT运维人员来说都不会陌生,而且很多情况下出现的一些不兼容,产品问题通过更新都可很好的解决掉. 小弟近日为一台老爷机服务器安装Windows 产品更新就遇到了意见事情,特 ...
- Three.js 第一篇:绘制一个静态的3D球体
第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
- 微信小程序定时器组件(输入时间字符串即可倒计时)
昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../pl ...
- 浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
- 利用Python进行数据分析(9) pandas基础: 汇总统计和计算
pandas 对象拥有一些常用的数学和统计方法. 例如,sum() 方法,进行列小计: sum() 方法传入 axis=1 指定为横向汇总,即行小计: idxmax() 获取最大值对应的索 ...
- AJAX(一)
AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...
- Rafy 领域实体框架 - 公司内部培训视频
本月给公司内部一个项目做架构重构,其中使用到了 Rafy 框架.所以我培训了 Rafy 领域实体框架的使用方法,过程中录制了视频,方便其他同事查看.现在把视频放到园里来分享下,有兴趣的朋友可以看看,有 ...
- C#开发微信门户及应用(32)--微信支付接入和API封装使用
在微信的应用上,微信支付是一个比较有用的部分,但也是比较复杂的技术要点,在微商大行其道的年代,自己的商店没有增加微信支付好像也说不过去,微信支付旨在为广大微信用户及商户提供更优质的支付服务,微信的支付 ...
- 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) ...
- 使用命令 gradle uploadArchives 的异常: Unable to initialize POM pom-default.xml: Failed to validate POM for project
在使用:gradle uploadArchives 命令对项目进行上传maven时,常常遇到如下报错: 这时候要仔细的检查一下build.gradle文件中的dependencies内容,很多时候是由 ...