Open youngwind opened 8 years ago
IE6~IE8不支持CSS3的高级选择器,比如nth-child(),nth-of-type()等等,非常的不方便,selectivizr帮我们完成了这件事情。
// index.html <link rel="stylesheet" href="/css/index.css"/> <table> <tr> <td>1</td> <td>2</td> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>7</td> <td>8</td> </tr> </table> <script src="/js/jquery-1.12.0.js"></script> <script src="/js/selectivizr2.js"></script>
// index.css tr:nth-child(3){ background-color: red; }
IE8下效果
3.样式必须是link:css引入的,不能是行内样式,也不能是内联样式。因为selectivizr的工作原理是通过ajax请求css文件,然后重新解析css文件,然后操作DOM元素添加上相应的类名。如下图所示。
4.由于css文件是ajax请求得来的,由于js同源策略的限制,css请求的位置必须跟html页面同域。(media.xxx.com和www.xxx.com不是同域)这个问题比较严重,因为在大型网站中,为了加快网页响应速度,一般都会通过多级域名加快静态资源下载速度。或许可以用跨域的思路来解决它,有待研究。
这么暴力!!……不过我喜欢。
使用Iframe加载静态文件,然后再做如上处理如何?(……不过我讨厌iframe……尴尬了)
问题
IE6~IE8不支持CSS3的高级选择器,比如nth-child(),nth-of-type()等等,非常的不方便,selectivizr帮我们完成了这件事情。
解决方案
1. 使用方法
2. 结果
IE8下效果
3. 必须要注意的事情
3.样式必须是link:css引入的,不能是行内样式,也不能是内联样式。因为selectivizr的工作原理是通过ajax请求css文件,然后重新解析css文件,然后操作DOM元素添加上相应的类名。如下图所示。
4.由于css文件是ajax请求得来的,由于js同源策略的限制,css请求的位置必须跟html页面同域。(media.xxx.com和www.xxx.com不是同域)这个问题比较严重,因为在大型网站中,为了加快网页响应速度,一般都会通过多级域名加快静态资源下载速度。或许可以用跨域的思路来解决它,有待研究。