HTML5/CSS3hack
来源:互联网 发布:最坏的一天 电影 知乎 编辑:程序博客网 时间:2024/06/05 04:44
以下兼容技术我只测试了IE8+
background: rgba();
background: rgba(7,110,175,0.85);background:#076EAF\9; filter:alpha(opacity=85)测试ie78
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。
(3)容器div的max-width
#div2{ max-width:400px; _width:expression((documentElement.clientWidth > 600) ? "600px" : "auto" );}
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
针对ie11hack
.foo { color: green } /* 其他浏览器 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
- HTML5/CSS3hack
- HTML5
- Html5
- HTML5
- HTML5
- HTML5
- HTML5
- html5
- html5
- HTML5
- html5
- HTML5
- HTML5
- HTML5
- Html5
- HTML5
- Html5
- html5
- 数据库系统概论课后习题答案第二章
- JAVA笔记:Java IO流总结
- [Java]读取文件内容方法总结
- c99在不同编译器的实现情况
- hdu4121 Xiangqi
- HTML5/CSS3hack
- 译Variance Shadow Maps
- [C++]LeetCode: 83 Combinations (回溯法)
- i os 开发者证书 申请 详解
- ORACLE PL/SQL编程之五:异常错误处理
- UiNavigationController的使用
- 数据库系统概论课后习题答案第三章
- IntentService
- firefox 操作技巧