CSS3和PIE不能在IE 8中工作

我试图演示CSS3PIE，它不会在IE中工作。CSS3和PIE不能在IE 8中工作

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <link href="test.css" type="text/css" rel="stylesheet"> 
    <title>Test</title> 
    </head> 
    <body> 

    <div id="title"></div> 
    <div id="sub_title"></div> 
    <div id="main_area"> 
     <div id="date_area"></div> 
    </div> 

    </body> 
</html>

CSS：

body{ 
margin: 0 auto; 
} 

#title{ 
margin: 0 auto; 
width: 100%; 
height: 40px; 
background-color: white; 
} 

#sub_title{ 
    margin: 0 auto; 
    width: 100%; 
    height: 25px; 
    background-color: green; 
} 

#date_area{ 
    width: 310px; 
    height: 250px; 
    border: 1px solid #4A4949; 
    padding: 60px 0; 
    text-align: center; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
    -webkit-box-shadow: #707070 2px 2px 4px; 
    -moz-box-shadow: #707070 2px 2px 4px; 
    box-shadow: #707070 2px 2px 4px; 
    background: #EBEBEB; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8)); 
    background: -moz-linear-gradient(#EDEBEB, #C9C7C8); 
    background: linear-gradient(#EDEBEB, #C9C7C8); 
    -pie-background: linear-gradient(#EDEBEB, #C9C7C8); 
    behavior: url(/PIE.htc); 
}

结果仅仅是一个边界块，没有梯度/阴影等

任何帮助/解决方案将不胜感激。

来源

2011-01-11 Julio

任何理由不使用`滤波器：的progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃EDEBEB'，endColorstr = '＃C9C7C8'，GradientType = 0）;`？ – 2011-07-20 06:07:07

该behavior位置应该是相对于您的HTML文件，而不是像任何其他使用url()声明的CSS。因此，假如你index.html和PIE.htc是根，你的CSS是一种“CSS”文件夹内，你应该是这样的：

background-image: url(../images/example.jpg); 
behavior: url(PIE.htc);

此外，尝试添加一个.htaccess文件在同一位置以下内容作为PIE.htc file：

AddType text/x-component .htc

希望这会有所帮助。

来源

2011-01-12 19:13:03

IE8兼容模式在IE10中修正了它，但在真正的IE8中却没有......任何想法？ – DrCord 2013-08-16 17:23:58

@DrCord哇，不知道...因为我目前不再依赖CSS3PIE，所以不确定。我支持IE8 +和我编码一个坚实的布局结构;关于“花哨的视觉效果”：在IE上运行的是什么，适用于IE，什么不是，没什么大不了的，设计看起来不错。 – 2013-08-20 22:17:05

该htaccess文件为我做了这项工作，谢谢 – Metzed 2013-10-25 13:44:37

确保您拥有最新的测试版。如果HTC文件仍然存在问题，请尝试使用JS实现。

来源

2011-01-11 23:01:41 Adam

CSS3 PIE - Giving IE border-radius support not working?

的PIE.htc请求应与MIME类型 “text/x分量” 响应 - 或IE不会接触到的行为。

来源

2011-01-12 00:22:59 drudge

尝试增加

position:relative; 
z-index: 0;

这里http://css3pie.com/forum/viewtopic.php?f=3&t=10

这个问题是类似的建议一张贴在这里：CSS3 PIE - Giving IE border-radius support not working?

来源

2011-01-13 23:38:29

尝试清除缓存在浏览器中。特别是在兼容模式之间切换时。它真的有帮助

来源

2011-12-02 10:00:44 cmms

增加：AddType text/x-component .htc - 到.htaccess文件对我来说就像一个魅力。

速记CSS属性可让您控制要旋转或不旋转的角。

border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */

来源

2011-12-12 20:28:37 Tom

CSS3和PIE不能在IE 8中工作

回答

相关问题