优雅降级实现IE8的transform平移属性

最新推荐文章于 2024-09-10 09:22:03 发布
原创 最新推荐文章于 2024-09-10 09:22:03 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie 8 #css #优雅降级 #transform #translateX

本文介绍了一种针对IE8浏览器不支持CSS transform属性的优雅降级方案。通过对浏览器信息的判断来实现对IE8的支持，当检测到为IE8时采用兼容性方案，确保网站在该浏览器下的正常显示。

其他方法如CSS滤镜做ie8兼容 transform 不起效果；

下面是优雅降级的方法；


首先通过，navigator.userAgent 获得 浏览器的信息，然后通过 MSIE  8.0 判断是否是ie8浏览器。如果是，就执行降级方法，如果不是就直线原本方法。

基于CSS3实现的transform属性相册图片墙源码
08-27
【CSS3实现的transform属性相册图片墙源码详解】 在现代网页设计中，CSS3的引入极大地丰富了网页的视觉表现力，其中`transform`属性是关键的一部分。本源码利用CSS3的`transform`属性实现了照片墙的动态缩放效果，...
IE10兼容性白皮书
11-15
- 利用原生支持实现多指缩放和平移等功能。 **3. 高级手势输入：** - **定义：**通过 JavaScript 实现更复杂的触摸交互。 - **实现方法：** - 使用 touchstart, touchend 等事件。 - 创建自定义手势识别逻辑。 ...
transform兼容ie8
热门推荐
Daisukes的博客
11-15 2万+
其他浏览器正常写法： transform:rotate(-30deg);  -ms-transform:rotate(-30deg);  -o-tranform:rotate(-30deg);  -webkit-transform:rotate(-30deg);  -moz-transform:rotate(-30deg); ie8写法： filter: progid:DXIm
ie8不支持transform: translateY，ie9支持不友好
weixin_30371469的博客
12-26 680
transform: translateY(0); ie8 不支持这个属性 但是我觉得用css实现的效果特好 特自然 也许是我的脚本写的不够完善 呵呵 现在我希望其他 主流的浏览器应用CSS3 其他不兼容的就给一个不是很差的效果 判断是否支持的代码 function supportCss3(style) { var prefix = ['webki...
IE8上面的旋转和透明度，利用滤镜属性去处理（兼容css3的transform和rgba()）
weixin_41757599的博客
07-09 820
1.关于在IE浏览器上面的一个旋转问题 IE8不支持css3的transform属性，因此在兼容ie8的时候需要用到滤镜来进行兼容 语法： 兼容c3属性的浏览器在设置旋转属性的时候： transform:rotate(-30deg);  -ms-transform:rotate(-30deg);  -o-tranform:rotate(-30deg);  -webkit-transform:rotate(-30deg);  -moz-transform:rotate(
解决IE8不支持transform、background-size属性
weixin_30593443的博客
03-26 552
一、transform 转换工具：http://www.useragentman.com/IETransformsTranslator/ 总结来源：http://blog.sina.com.cn/s/blog_42cdca7d010142m6.html 1）旋转90/180/270度 1 .rot90 { 2 -moz-transform:rotate(90deg); 3 -we...
ie8 及以下 引 di18n-translate 相关坑
dcxia89的博客
08-10 1142
  bug相关背景：应业务需求，现需要将 jsp文件老项目，运用国际化，经过讨论选用di18n-translate。但是di18n-translate通过npm下载后拿到的di18n.js在现代浏览器运行正常，ie8 及以下无法运行。 SCRIPT1028: 缺少标识符、字符串或数字 这个报错一看，很熟悉吧。很多情况下是因为在旧版ie下json最后一项是不允许有逗号的,那么找到对应报错位置，去掉...
CSS transform属性详解与前端动画应用
这种变换不仅包括二维空间内的平移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew），还涵盖了三维空间中的深度变换，极大地拓展了网页的视觉表现力与交互可能性。本文将围绕标题“CSS transform详解...
CSS中代替transform: translateX(100%);的属性
最新发布
08-16
**使用`grid`或`flex`布局**：通过调整网格或弹性盒子的布局属性，可能可以实现类似平移的效果，但通常用于整体布局调整，而不是单个元素的平移。 4. **使用`calc()`函数**：结合`left`或`margin-left`等属性，用...
基于Web组件的图片浏览与缩放实现
在交互功能方面，该组件支持双击放大（Zoom In）、单击缩小（Zoom Out）以及手势平移（Pan）操作，使得用户可以在全屏模式下对高分辨率图像进行细节查看。这些功能依赖于JavaScript事件监听机制与CSS变换（transform...
页面多出一块无法选中的区域，ie浏览器使用transform: translate属性使页面多出一块空白区域且造成不必要的滚动条
WanweI897的博客
12-08 1350
今天写项目时发现在ie浏览器下，页面右侧多出一块很小的无法选中的区域，造成页面出现横向滚动条，而在其他浏览器下均无此情况。 经过一个个元素排查最后发现是ie浏览器下使用transform: translate的bug造成的。 比如如下代码会让页面出现横向滚动条： 而我们给span设置transform属性后 一般来说因为span的transform属性使元素向左移动40px大于right属相向右的20px，所以此时页面不会出现横向滚动条，在chrome浏览器下测试的确如此，而在ie下仍然会有滚动条，滚
兼容 ie 的 transform
{ focus : web }
02-23 1457
css 2d transform 是 css3 引入的一个新的 css 属性，特别是可以很方便对元素进行旋转和扭曲变换，摆脱了传统枯燥的方方正正的形象，很好玩，但其实 ie 早就支持这种变化了，通过 matrix 滤镜在一些限制条件下完全可以达到同样的效果.   兼容   从角度转化为 matrix 滤镜所需要的矩阵值涉及基础的坐标旋转方面的知识，可参考 wiki . 简单举例：   ...
Transformie：为旧版IE带来现代CSS变换的轻量级插件
gitblog_00587的博客
09-10 475
Transformie：为旧版IE带来现代CSS变换的轻量级插件 项目介绍 Transformie 是一个轻量级的 JavaScript 插件，旨在为旧版本的 Internet Explorer（IE）浏览器提供 CSS 变换（Transforms）功能。尽管现代浏览器已经广泛支持 CSS 变换，但在某些特定的历史遗留项目或需要兼容旧版 IE 的场景中，Transformie 仍然具有不可替代的价...
IE浏览器CSS transform旋转属性的演示
younger_z的专栏
07-08 1877
IE浏览器CSS transform旋转属性的演示 body {  font-family: "Arial", sans-serif; } #ptOfRef {  border: #000 solid 3px;  background: #6FF;  width: 204px;  height: 204px;  position: absolute;  top: 100
html设置旋转中心兼容ie,CSS3 transform旋转属性在IE中的实现
weixin_29163797的博客
06-03 392
IE浏览器CSS transform旋转属性的演示body {font-family: "Arial", sans-serif;}#ptOfRef {border: #000 solid 3px;background: #6FF;width: 204px;height: 204px;position: absolute;top: 100px;left: 100px;}#example {posit...
IE8浏览器兼容问题（日常经验总结）
qq_44441669的博客
09-14 2842
ie8对待颜色值，最完整的就是 #ffffff 6位16进制数，三位也支持，但是4位就不支持了。所以以后在书写颜色值代码最好都写全了，防止不必要的bug，加班。。。。 module.exports 与export 区别：exports 与require 相匹配（ES5的用法） export 与 import匹配，是ES6的语法。 IE8的background属性支持，但是不支持background-size属性不支持，ie9以上才支持。解决办法是使用 filter:属性（ie8），但是图片的路径.
兼容IE8的旋转角度
wangweiscsdn的博客
02-14 6596
css代码如下： div{ position:absolute; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(350deg); -moz-transform: rotate(350deg); -o-transform: rotate(350deg); t
CSS 兼容IE8的线性渐变和旋转
weixin_39612961的博客
07-08 1559
因IE8不兼容CSS3旋转和渐变的属性，改用filter实现渐变以下效果为横向渐变，从左到右，加了透明度filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 finishopacity=50 style=1 startx=0,starty=0,finishx=100,finishy=0) progid:DXImageTransform....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值