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 了……

 

愤怒瞬间用上心头,啊喂,微软你浏览器没法自动升级,早晚跟不上时代,还不让人单独照顾了是吧!还非得别人统一来迁就你是吧!

 

解决方法

 

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

 

 

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

 

 

???什么情况???

 

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

 

 

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

 

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

 

s

时间: 2024-10-31 11:07:37

CSS 3 transform 属性的 BUG分析介绍的相关文章

HTML几个特殊的属性标签的使用介绍

在HTML中还有几个容易让我们遗忘的特殊的属性标签,下面为大家详细介绍下这几个属性在各个浏览器中的使用,为了能达到更好的兼容,建议web人员抽空看看   以下几项属性对于浏览器的兼容很不好. 1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框 3.border-radius 该属性允许您向元素添加圆角边框 4.box-shadow 属性向框添加一个或多个阴影 5.text-shadow 属性向文本设置阴影 6.tr

ProGuard的作用、使用及bug分析

本文主要ProGuard的作用.使用及bug分析.1.ProGuard作用 ProGuard通过删除无用代码,将代码中类名.方法名.属性名用晦涩难懂的名称重命名从而达到代码混淆.压缩和优化的功能,跟JavaScript的混淆压缩类似. 压缩和优化使得编译后apk包更小. 混淆可以保证代码在被反编译后读懂的难度很大,防止逆向工程.这点也是我们在应用发布前需要ProGuard的一大原因. 2.ProGuard的使用(1). 系统应用: 在项目根目录下的Android.mk文件中添加 XHTML 1

css3中transform属性实现平移与变形

0×1.元素平移 让元素在页面显示中产生位移有很多方法,可以利用块状元素合模型,也可以利用相对和绝对坐标,这一小节给大家介绍css提供的两个元素移动属性:vertical-align和transform:transform为css3标准提供的新属性. a.内联元素垂直平移 内联元素的平移遵循下面的法则: 默认情况下,元素移动,负值往下,正值往上: 如果默认基线在上面,用负数: 如果默认基线在下面,用正值: 下面用一个实例来演示上面这三条法则: <!DOCTYPE html> <html

巧用CSS的Border属性

css 制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色,利用这个特性,可以制作一些特殊效果.下面将通过实例来说明其应用技巧. 1.给文本加边框 上面的示例中,给一段文字加了不同的边框,只是为了说明边框线的颜色.粗细是可变的.第一个边框的CSS代码是:style="border:thin s

CSS滤镜:Gray属性

css|滤镜 Gray属性把一张图片变成灰度图.它的表达式很简单: Filter:Gray 其实这个属性没什么好讲的,只需在您定义的IMG样式中加入一句代码: {Filter:Gray}就一切OK了. 下面两幅图分别代表未加Gray属性和添加了Gray属性的效果: 这是原图,点击可放大 转成gray属性后的效果图 本节讲述的内容比较简单,下一节将向您介绍Invert转化属性.

使用CSS布局定位属性轻松实现优美站点布局

本文为大家介绍CSS布局定位属性,熟练的使用可以轻松实现优美站点布局,感兴趣的朋友可以参考下,希望对大家有所帮助   CSS定位属性: ◆bottom.left.right和top ◆position ◆clip ◆float ◆clear ◆overflow ◆z-index 该类属性设置元素在父级元素中的位置.在设置这类元素时,如果设置长度数值,均以px作为单位,在通过style对象读取属性时,返回带单位的字符串. 1.边偏移(bottom,left,right和top) 作用:设置元素距离

CSS的position属性在DIV层中的应用

定位的话,父DIV设置position:relative后,子DIV的position:absolute就会相对父DIV作绝对定位,接下来为大家介绍下CSS的position属性在DIV层中的应用   原来只明白position:relative是相对定位,position:absolute 是绝对定位: 经常看到图片轮播的下方有个半透明背景的文字描述.我现在要做这样一个效果,因为不是轮播,所以没去找插件,想自己写. 半透明背景可以设置属性background: rgba(0, 0, 0, 0.

用CSS动态控制文本属性_CSS/HTML

本篇详细介绍了用CSS动态控制文本属性的文章主题,利用CSS的属性值可动态改变的特点,定义文本的多种属性值,再用一个事件来触发,一旦事件发生,则改变文本属性值,从而达到预期目的.     用CSS可以很方便地动态改变文本的属性,从而可制作出动态地使文字变大.缩小.改变文字颜色.改变文本的背景.字间距.行间距等等网页特效,一切都在你的掌握之中.是不是有点玄?事实就是如此.那一定很复杂吧?不!看完本文,你就会明白,原来这么简单. 请看下面的示例: 一.动态改变文字大小 这个例子的效果是:一段文本,当

Transform 属性会导致子元素的 fixed 属性失效

在项目中,需要为顶部导航条增加滚动跟随效果.很显然,只需要为 #header 加上 position:fixed; 属性即可,但是加上之后却无效.只能用监测浏览器滚动距离然后实时的赋值到 top 属性来模拟跟随. 但是这种方法由于浏览器之间滚动的距离不同等缘故,会导致闪烁等问题,只在 Firefox 效果完美.同时会影响性能,在中低端安卓设备中效果很差.这种影响用户体验的事情,是肯定要避免的.还是得回来使用 fixed,但是从未发现过 fixed 失效的情况啊,只能挨个测试一下. 问题发现 先写