ie下设置样式时参数值的坑,解决流程梳理

  起因是项目中饼图如果分区太多,文字显示不下,于是我做了一版将文字使用牵引线放到饼图周围的样式。

  做完后 chrome 没问题。。。后来测试过程中(使用ie9),发现饼图绘制不出来,打开f12查看控制台,发现有个错误:对象不支持 apply 属性或方法。也点不进去,这怎么办呢?启动ie自带的浏览器调试功能吧,错误的时候停下了,报错说是 js 文件的多少行有这个问题,开 chrome 找到那一行,发现是个 console.error.apply() 的错误。

  难道是 console 对象没引进来?百度了下解决 console 没有 apply 的解决办法,然而失败了。

  没查到 console apply 的解决办法,决定换条路试试,通过对比以前的历史记录,确定了是我后加的牵引线及文字部分代码的问题,因为切换回去后是可用的。

  将一些没用的动效移除,只剩下写添加元素、js计算值、添加样式的干货,再次查看 ie ,还是不行,不过报错的问题提示换了:参数无效。

  参数无效!这是一个好提示,再看svg的画图步骤,牵引线出来了,而文字没出来,可以一步一步注释看到底是哪个样式设置错了。

复制代码
//添加弧外的文字元素
arcs.append("text")
    .attr("transform", function (d) {
        var x = 0;
        var y = 0;
        x = (d.textLine.x1 + d.textLine.x2) / 2;
        y = d.textLine.y1 - fontsize * 0.4;
        return "translate(" + x + "," + y + ")";
     })
     .style("text-anchor", "middle")
     .style("font-size", fontsize)
     .text(function (d) {
         return getDisplayChars(d.data.displayName, 20);
     });
复制代码

  能猜出来问题可能出现在哪里不?

  font-size!为了方便计算, fontsize 变量保存的值是 number 类型的,chrome 下没毛病,它兼容这种数值设置。但 ie 下就有问题了!只能进行设置带 “px” 的值,于是乎在设置font-size 的时候,在 fontsize 后加上   +"px"   就解决问题了。好大一个坑!不过这次会永久的记住!

posted @   名字不好起啊  阅读(602)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示