Bootstrap3兼容IE6工作笔记

[abeet]

思路

类似于IE7.js，对bootstrap3的样式进行读取，然后跟据IE6的需要进行调整，覆盖原CSS。
必要的时侯，可以配合JS调整DOM元素尺寸。

IE7.js

https://github.com/seancoyne/ie7-js

先找一个可靠的CSS解析器

https://github.com/cwdoh/cssparser.js
一个韩国人写的CSS解析器，
试解析bootstrap.css
扫出错误
Uncaught Error: Parse error on line 1: ...ne;height:0}[hidden],template{display:no -----------------------^ Expecting ':', 'HASH', '.', '[', 'S', got ','
原来cssparser.js是Jison生成的 - http://jison.org
坑爹，看起来要改掉这个错误可不容易，先学jison吧。
看了一小时jison文档，表示没有学会，尝试反过来，整理css为cssparser要求的格式，
亦不可得，因为
cssparser一遇到没有定义的格式，如
:not()，~， @-ms-viewport， filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
都会抛错，无法进行。
先试试找一个校对宽松一点的css解析器。
https://github.com/kpdecker/cssParser
查看代码，里面有一些在IE6下不能支持的写法如
this.defineGetter("lineNum", function() { return line; });
测试对一段CSS的解析，也发现解析器本身功能不完整， 没有把CSS解析成语法权，仅作结构遍历，而且存在一些不准确的地方
把@charset 'utf-8';解析成了如下结构

[
    {
        "text": "harset",
        "value": "harset",
        "production": "(ident)"
    },
    {
        "text": "et",
        "value": "et",
        "production": "(ident)"
    },
    {
        "text": "'utf-8'",
        "value": "'utf-8'",
        "production": "(string)"
    }
]

至少应该是下面这样才对吧

[
    {
        "text": "@charset",
        "value": "@charset",
        "production": "(@charset)"
    },
    {
        "text": "'utf-8'",
        "value": "'utf-8'",
        "production": "(string)"
    }
]

再测试了以下几个CSS解析器
https://github.com/iazrael/xmlparser/blob/master/src/cssparser.js
https://github.com/quickredfox/CSSParser.js/blob/master/former/build/CSSparser.js
或者只考虑了css2.0的情况，对于@media之类都没有解析到。
或者存在对@media @namespace @-webkit-keyframes之类选择器的解析BUG，导致结果不可用。
可能网页中用到css解析器的可能性比较少，是否node.js项目里有更成熟的css解析器？
终于找到一个强大的解析器
https://github.com/NV/CSSOM
http://nv.github.io/CSSOM/docs/parse.html
测试之解析的很好，并且能还原回css代码。
但在IE9下不能运行！！！
见CSSStyleDeclaration.js中111行 // Doesn't work in IE < 9
估计尝试修改CSSOM为IE6下可用，需花费好几天时间，不如直接在node.js下解析css，并生成适于IE6下的CSS和JS文件。
所以先不要管IE6下能不能运行CSSOM，直接在Chrome完成CSS解析与修改的工作吧。
CSSOM的文档很少，只有看看源码了，经过摸索测试，找到了修改CSSOM生成的样式对象的办法，
终于把bootstrap里所有的@media (min-width=992px)匹配出来，再把所有display:inline-block匹配出来，生成新的样式。
长征走出第一步。
boostrap里的盒模型，使用的是box-sizing:border-box，这个在IE里不支持，怎么办？
查了一下资料，发现https://github.com/Schepp/box-sizing-polyfill 试用一下，在IE11下的IE7模式，在使用了boxsizing.htc后，直接卡死。
1、boxsizing.htc有效率问题？ 弃用boxsizing.htc方案
2、IE11下的IE7模式有效率问题？ 装个虚拟机用原生IE6来测试吧，唉又得半天时间。
发现BSIE下面的栅格系统也是重新计算了列宽，

if(selector.match(/\.col-(xs|sm|md|lg)-\d+\b/)){
    var props={}
      var w=parseInt(cssStyleRule.style.getPropertyValue('width'))-(30/IE6Adapter.containerWidth)*100;
      cssStyleRule.style.setProperty('width', w+'%');
      cssStyleRule.style.setProperty('overflow', w+'hidden');
    }

以上实现可能在嵌套的情况下，列间距会一层层变窄，但穷举所有层级的列宽，生成的代码量会太多，先这样吧。保证IE6下栅格系统不乱掉，更优先一点，列间距变窄忍着。
安装虚拟机测试，虚拟机安装好后，ping不通物理机，查到资料发现一句 “1、VMWare Player默认桥接在有线网卡上，需要通过去掉和勾选待桥接网卡的VMWare Bridge Protocol协议项来指定桥接关系的物理网卡。”
于是去掉本地连接的VMWare Bridge Protocol协议，成功ping通物理机，yeah
要连外网，共享WLAN网络即可。
在虚拟机中IE下安装一个debugbar用于分析DOM和样式。虽然比起chrome的开发者工具差太多太多，聊胜于无吧。
在虚拟机中IE6打开演示站首页，好多区域是红色！！哪来的？
在CSS中搜索红色数值“fc8174”，来自样式选择器.bg-danger.lt{background-color: #fc8174;}，但页面上明明没有用到bg-danger样式，那么可以认为在IE6下对.bg-danger.lt选择器，当成了.lt，所以要调整v3-framework.css
在v3-framework.less里查找&.lt改为.lt&，生成v3-framework.css，
页面上的红色背景没有了。
类似问题还有less中所有的&.active替换为.active& 页面上仍然有颜色不对的情况，原来是bootstrap.css里有样式.list-group-item.active及.list-group-item.active:hover，覆盖它是不合适的，只有删除了
应该在页面中有JS删除bootstrap.css中不适合IE6的样式，
搜索“操作 Stylesheet rule” 看到这篇文章，
http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
抄过来这几个方法，然后删除bootstrap中的样式".active"".active:hover"。
终于IE6下页面中带active的元素，不再有背景色了。
表单元素过高，也是因为盒模型引起的，对同时定义了height和padding的元素要重定设置高度
还是有一些使用了多个display:table-cell并列的元素，只有渲染时才好分配宽度，无法通过上面的方式生成合适的CSS。
这些就单独在站点样式v3-site-ie.css里适配吧
查找node.js下读取命令行参数，及读写文件相关API，完成命令行工具

还存在的比较明显的问题

栅格多层嵌套的情况下，列间距会一层层变窄，并且有可能列宽相加大于行宽而错行
使用IE6不支持的选择器,样式没有被应用到
如属性选择器.form-control[disabled], .form-control[readonly]{background-color: #eee;}
如:before :after伪类.glyphicon-plus:before{content: "\2b";}，如字体图标不显示
使用IE6不支持的样式定义，没有被应用到，有些会影响到布局，需要单独在站点的CSS里作兼容
display: table-cell; 无法预知需要给元素设置的宽度，需视情况设置宽度
position: fixed;