偶然发现了一个有关 CSS 3 transform 属性的 BUG

  • 内容
  • 评论
  • 相关

最近在弄一个功能,需要通过弹窗来显示内容,取舍并尝试之后选择利用 CSS 3 transform 属性的 translate() 参数来实现弹窗的居中定位。

鼓捣了半天,测试 Chrome 完全正常,Edge 也正常,恩,到这里我觉得自己已经看到结局了,万万没想到,打开 IE 11 之后直接气的吐血!设置的 transform 属性竟然完全无效,说好的 IE 9 及以上就可以兼容的呢?怎么和想象中的不一样呀!

之前尝试各种让元素水平加垂直居中的方法,都各种因为什么表格嵌套啊,兼容性啊,适用性啊,或多或少的出现了问题,好不容易决心抛下 IE 8 用 transform,结果又给我来这一出。

发现问题

当时我都打算干脆让整个 IE 全部滚蛋好了,计划让 IE 系列除了 Edge 全部只用 margin: auto; 大法左右居中,于是去问了一下 IE 的专有 hack,发现自从 IE 10 开始就没有 hack 了……

愤怒瞬间用上心头,啊喂,微软你浏览器没法自动升级,早晚跟不上时代,还不让人单独照顾了是吧!还非得别人统一来迁就你是吧!
偶然发现了一个有关 CSS 3 transform 属性的 BUG

解决方法

我一向不喜欢用 JS 来控制样式,最终还是一边痛骂微软全家,一边口嫌体正直的抱着最后一丝希望的真的只是随手的使用 IE 11 打开了 W3School 关于 translate() 的演示页面,啊咧,怎么有效呢?

偶然发现了一个有关 CSS 3 transform 属性的 BUG

难不成是 IE 11 不支持 translate() 的值为百分比?于是尝试用调试台把数值改成了百分比,竟然是有效的。

偶然发现了一个有关 CSS 3 transform 属性的 BUG

???什么情况???

经过一番折腾,最终得出结论:translate() 在 IE 下,括号的旁边是不能加空格的,一加就无效

偶然发现了一个有关 CSS 3 transform 属性的 BUG

而类似的 rgba() 就没这个问题,真是让人匪夷所思的 BUG,逼死强迫症的节奏。

翻了下,其实 WordPress 核心中的 CSS 也发现了这个问题,并且加上了一段注释。

偶然发现了一个有关 CSS 3 transform 属性的 BUG

评论

20条评论
  1. Gravatar 头像

    流量营销平台2491 回复

    最近刚学CSS,才在门口,这个问题太深奥了,不过我知道浏览器兼容性是一个大问题~

  2. Gravatar 头像

    微而 回复

    兼容IE版本就是烦咯

  3. Gravatar 头像

    Tokin 回复

    偶然。。。不是偶尔....

发表评论

电子邮件地址不会被公开。 必填项已用*标注