HTML5/CSS3hack
以下兼容技术我只测试了IE8+
Media Query 媒体查询
<script src="respond.min.js"></script>
respond.min.js脚本下载
CSS3圆角
把下载的PIE.htc放到项目文件夹中然后在用到圆角的CSS中引入PIE.htc
behavior: url(../Images/PIE.htc);}//圆角兼容
PIE.htc脚本下载
使用说明
CSS3高级选择器
first-child是CSS2的内容,但是last-child就不是了,所以IE8不买账
首先,您需要下载DOMAssistant脚本和ie-css3.js脚本并将他们包含进head标签中.====只要百度下ie-css3.js然后下载里面就有这两文件了哦
<!--[if lt IE 9]><script src="IE8lower/ie-css3/DOMAssistantCompressed-2.7.4.js"></script><script src="IE8lower/ie-css3/ie-css3.js"></script><![endif]-->
透明度opacity
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0) IE8-
opacity: 0; 主流浏览器
CSS3 transform旋转
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 兼容ie8
其他旋转角度
.flipx {-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH();
}
.flipy {-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV();}
.rotate90 {filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);}
/*顺时针旋转180度*/.rotate180 {filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.rotate270 {filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);-webkit-transform: rotate(270deg);transform: rotate(270deg);}
HTML5标签
<script src="html5shiv.js"></script>
html5shiv.js脚本下载
max-width
还有一个在IE8中经常遇到的问题就是max-width,网页中图片的尺寸可能比较宽,我会给它设置max-width: 100%来限制其宽度最大为父容器的宽度,但是有时候却不奏效,慢慢摸索才得知IE解析max-width所遵循的规则:严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些,所以这个问题应该不归属为IE兼容性问题,不过我还是提一下吧。分享两个我遇到的场景:
(1)td中的max-width
如果针对td中的img元素设置max-width: 100%,在IE和Firefox你会发现不奏效,而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed,对此属性的具体解释见W3School。
(2)嵌套标签中的max-width
如下的HTML结构:
<div class="work-item"><a href="#" class="work-link"><img src="sample.jpg" class="work-image img-responsive"></a>
</div>
最外层元素.work-item设置了固定宽度,但是对img设置max-width为100%却无效,后来才发现需要再对a标签设置width: 100%,这样才能使最内层的img标签充满整个div。
placeholder
<script src="jquery-placeholder.js"></script>
<script>
$(function() {$('input, textarea').placeholder();
});
</script>
placeholder脚本兼容下载
background-size: cover
如果你想使用background-size: cover设置全屏背景,很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现,添加一条如下的CSS样式:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
将sizingMethod设置为scale就OK了。
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/img001.jpg',sizingMethod='scale');
还没完,如果你在此背景之上放置了链接,那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative使其相对浮动。
box-sizing
这个我试过了感觉不凑效,大家用过bootstrap3的都知道它里面全是CSS3,我试过为它做IE6/7的兼容,其他的兼容问题都好办,最不好办的就是box-sizing这个属性的兼容。
box-sizing 兼容脚本下载
渐变
ie6测试通过
filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE67*/
-ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE8*/
background:-o-linear-gradient(top, rgba(225,0,25, 1),rgba(0, 96, 27, 1));
绿色位置该为自己需要的颜色可以,注意颜色值格式,滤镜的是“#”,其他用rgb
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
html,body{margin:0;height:100%;}
.gradient{height:100%;filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE67*/-ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e10019,endcolorstr=#00601b,gradientType=0);/*IE8*/background:#006600; /* 一些不支持背景渐变的浏览器 */background:-ms-linear-gradient(top,rgba(225,0,25, 1),rgba(0, 96, 27, 1));background:-moz-linear-gradient(top,rgba(225,0,25,1),rgba(0, 96, 27, 1));/*Firefox*/background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(225,0,25, 1)), to(rgba(0, 96, 27, 1)));/*chrome Safari*/background:-o-linear-gradient(top, rgba(225,0,25, 1),rgba(0, 96, 27, 1));/*Opera11*/
}
</style>
</head><body>
<div class="gradient"></div>
</body>
</html>
background: -ms-linear-gradient(top,#c00,#c00); background: -moz-linear-gradient(top,#c00,#c00); background: -webkit-gradient(linear,0 0,0 100%,from(#c00),to(#c00));//主流-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#c00", endColorstr="#c00")"; //ie
转载于:https://www.cnblogs.com/xiaominwu/p/4348010.html
HTML5/CSS3hack相关推荐
- html5代码转换为视频,HTML5中的视频代码详解
摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- HTML5调用手机的Datepicker(日期选择器)
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型: email url number range Date pickers (date, month, ...
- android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题 那就是弹出的时候会出现串 来自http://xxxxx 网页的提示 然后下面出来具体的弹出信息,还有更奇 ...
- HTML5 本地文件操作之FileSystemAPI整理(二)
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
- 使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- [重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...
- html5 FileReader初识
使用html5的FileReader可以实现多媒体文件的预览功能,代码如下: <html> <head> <script type="text/javascri ...
最新文章
- 摄影测量(计算机视觉)中的三角化方法
- mysql创建function 报错误1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in
- python-自定义模块-文件的操作
- (54)FPGA基础编码D触发器(三)
- 算法 - 反转字符串
- C++指针、空指针、野指针使用的一些总结
- Ps制作的立体字效果
- pion ice项目源码分析
- ALLEGRO模块无法移动解决方案
- 王小川谈创业必须突破的六大槛:人、产品、渠道、体制、资本、移动
- WORD、WPS中插入公式后行距变大怎么办
- 物联网时代来袭,智能快递柜到底方便了谁?
- “请不要在虚拟机中打开”解决方法
- 微型计算机实验仪,微型计算机实验仪
- 解决最新版 mac os sierra usb网卡不能使用的问题
- 新手入门前端,需要学习的基础内容。
- Windows10电脑底部任务栏无响应解决方法
- 考研党员自我个人总结
- 个人博客注册,申请,美化流程
- Docker容器实现跨主机间通讯