本篇记录工作中遇到的ie8兼容问题以及找到的解决方法
圆角的处理border-radius
border-radius有两个类型的值，长度和百分比，是从左上角顺时针到左下角四个角的简写模式。CSS3属性，IE支持9+。（这里有两篇文章直观讲解了border-radius的八个属性值 ① ②）。IE8的适配有几种不同的方法，这里简单做一下整理。
1.ie-css3.htc 2.PIE.htc 3.border:dotted 4.另外的一些工具也有一些，不过没有实际使用过，暂留备份：IE7/8/9.js/eCSStender.js/border-radius.htc/cssSandpaper.js等。
1 和 2 的htc文件属于IE自有的behavior调用，类似于封包的js脚本文件，可以让IE调用自有的VML画笔画出圆角。需要注意的地方是，htc文件不管写在哪里，他的文件相对定位路径总是相对于当前HTML文件的，所以behavior:url(PIE.htc);在复用到其它页面时要注意文件指向问题；另外，htc文件是调用VML画出效果覆盖在原有元素上的，画出的效果属于原有元素的兄弟元素，如果原有元素位置默认静止的话，z-index属性无法生效，自然不能实现兼容。此处应配合behavior增加position:relative/absolute;或在祖先元素里有position和z-index的定义。根据htc文件的工作原理，其还可以实现box-shadow和gradient的渐变效果。另外，在PIE.htc的实际应用中，VML绘图在实现过程中出现了闪现的问题，从父元素盒子的左上角极快闪现到了需求位置，暂时没有解决。Mark
3 的原理是张鑫旭博客中提出的，边框在dotted下，IE是正圆形的，chrome是方形。既如此那给一个足够大的边框，取其中一个点让其显示在有限区域的父级元素中，就出现一个正圆。此处只是纯CSS的运用，而且原生的IE8浏览器下这个圆还是比较毛糙的。这里更重要的是一种处理问题的思想，代码只是实现目的的工具，至于怎么使用这些工具，只局限于自己的想象。
Canvas
canvas的兼容也是IE9+，IE8需要实现同样是利用插件，这次遇到的问题是数据可视化的处理，开始的时候想直接用ECharts，翻文档的时候看到了ExCanvas，因为并没有实际使用过，所以引进来做了次尝试。初次引用虽然实现了绘图，但是在数据显示上出了点问题，canvas里的filltext()并没有整合进去，不得已在网上下了补丁包打上。这里IE重写了html进行插入（可以看到在IE中文字是可以选中的，而canvas里是图像），虽然得到了文字，但是在IE里的定位没有canvas中准确，需要重新适配。这里用了canvas里的textAlign和textBaseline，实际操作中通过ctx.textAlign = "right";和 ctx.textBaseline = 'hanging';配合起始位置坐标实现了双边效果大体一致。
vertical-align垂直居中
这个垂直对齐的属性总是不太好用，居中不生效，之前遇到篇文章有介绍使用这个vertical-align的方法，给要垂直居中的元素添加一个width:0;height:100%的兄弟元素，两元素都取display:inline-block，然后再使用vertical-align:middle，此时的居中效果就出现了，需要注意兄弟元素的100%高度一定要生效，否则还是不行。似乎这个属性只有在有小伙伴对比的时候才会生效。
网友评论