當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5/CSS3hack

發布時間：2025/3/21 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5/CSS3hack 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

以下兼容技術我只測試了IE8+

Media Query 媒體查詢

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然后下載里面就有這兩文件了哦

透明度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標簽

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

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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

CSS3hack

上一篇： easyui中tab页中js脚本无法加载
下一篇：在HTML中英文换行问题