提示：PIEhtc URL路径是相对于当前HTML文件，不是CSS文件
比如 当前文件在“/”下 ，CSS文件在“/CSS”下，PIEhtc在“/CSS”下，behavior: url(/css/PIEhtc) 而不是behavior: url(PIEhtc)；
一、border-radius 圆角
代码如下:
radius{
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIEhtc); / 可以让IE 6,7,8模拟部分的CSS3属性 /
}
说明：不支持单边的圆角属性，比如： border-top-left-radius，但是你可以这样来写：
border-radius 圆角
代码如下:
border-radius: 5px 10px 15px 20px; /top-left, top-right, bottom-right, bottom-left/
二、box-shadow 盒子阴影
代码如下:
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
behavior: url(/PIEhtc);/ 可以让IE 6,7,8模拟部分的CSS3属性 /
说明：不支持text-shadow(文本阴影)
box-shadow 盒子阴影
三、border-image 边框
代码如下:
color: white;
border: 8px solid #013D7A;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-image: url(img/borderpng) 8 8 8 8 stretch;
-moz-border-image: url(img/borderpng) 8 8 8 8 stretch;
border-image: url(img/borderpng) 8 8 8 8 fill stretch;
behavior: url(PIEhtc);
用到的：
border-image 边框
四、CSS3 Backgrounds 背景渐变
代码如下:
gradient{
background: #CCC; /fallback for non-CSS3 browsers/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /old webkit/
background: -webkit-linear-gradient(#CCC, #EEE); /new webkit/
background: -moz-linear-gradient(#CCC, #EEE); /gecko/
background: -ms-linear-gradient(#CCC, #EEE); /IE10/
background: -o-linear-gradient(#CCC, #EEE); /opera 1110+/
background: linear-gradient(#CCC, #EEE); /future CSS3 browsers/
-pie-background: linear-gradient(#CCC, #EEE); /PIE/
behavior: url(PIEhtc);
}
说明：只支持linear-gradient（线性渐变）
linear-gradient 线性渐变
高级运用：
代码如下:
background-size: 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, 2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, 2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, 2) 50%, transparent 50%, transparent);
-pie-background: linear-gradient(rgba(255, 255, 255, 2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;
behavior: url(/PIEhtc);
更多demo：
五、RGBA 颜色值
代码如下:
rgba{
padding: 60px 0;
background: #000;
background: rgba(0,0,0,2);
-pie-background: rgba(0,0,0,2);
}
说明：不支持box-shadow
RGBA 颜色值
六、IE6 png 透明
代码如下:
png img{
-pie-png-fix: true;
behavior: url(/PIEhtc);
}
png{
background-image:url(imgpng);
-pie-background:url(imgpng);
behavior: url(/PIEhtc);
}
说明：直接用-pie-png-fix: true，背景使用-pie-background来修复IE6下png透明的问题
百度源代码解决IE的兼容问题
<!Doctype html>
<htmlxmlns=>
<head>
<meta>
<meta>
<title>百度一下，你就知道</title>
<script>varwpo={start:newDate1,pid:109,page:‘superpage’}</script>
<meta >
在网网站服务器上指定预设兼容性模式来解决这个办法
当然如果服务器是自己的话，可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。
一、如何调试 IE 浏览器？
1IE7以上版本可以按F12直接打开开发者调试工具进行调试。
2安装虚拟机。
3利用设置元素border: 1px solid red; outline: 1px solid red；进行调试。
二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
1CSS hack由于不同厂商的浏览器，比如IE、Firefox、Chrome等，或者同一厂商不同版本，比如IE6和IE7对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。
当然，我们也可以反过来利用CSS hack为不同的版本浏览器定制编写不同的CSS效果。
2CSS hack大致有三种表现形式，分别是CSS属性前缀法、选择器前缀法、IE条件注释法（即HTML头部引用if IE）。
在实际的项目中CSS hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
CSS属性前缀法(即类内部Hack)：例如IE6能识别下划线"_"和星号""；IE7能识别星号""，但是不能识别下划线"_"。
选择器前缀法(即选择器Hack)：例如IE6能识别选择器htmlcss{}，IE7能识别+htmlcss{}或者:first-child+htmlcss{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE（注：IE10+已经不在支持条件注释）；针对IE6及一下版本，这类hack不仅对CSS生效，对写在判断语句里的所有代码都会生效。
你好，这个可能是你的浏览器出问题了，建议你可以卸载当前的版本，之后去这个浏览器的官网下载最新版本重新安装一下应该就可以解决了。如果还是不行，那可能是浏览器的问题，你可以去换个浏览器试试。我用的QQ浏览器就不错，最新版本的QQ浏览器90与现在的系统非常兼容，很少会出现这种问题，建议你可以去下载试试。目前只支持border-radius box-shadow 和 text-shadow 不过不建议用，会有浮动到时候又要hack，而且代码性能差。注意：不支持rgba颜色值，诸如box-shadow:0 0 3px rgba(0,0,0,2);只能box-shadow:0 0 3px #f5f5f5;
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）