Question

我试图演示CSS3PIE，它根本不会在IE中运行。

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);  
}

结果只是一个带边框的块，没有渐变/阴影等

非常感谢任何帮助/解决方案。

Answer 1

behavior位置应该与您的HTML文件相关，而不是像使用url()的任何其他声明那样的CSS。因此，假设您的index.html和PIE.htc位于root用户，并且您的CSS位于“css”文件夹中，那么您应该这样：

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

另外，尝试在.htaccess文件所在的位置添加包含以下内容的PIE.htc文件：

AddType text/x-component .htc

希望这有帮助。

Answer 2

尝试添加

position:relative;
z-index: 0;

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

所建议的那样

此问题类似于此处发布的问题：CSS3 PIE - Giving IE border-radius support not working?

Answer 3

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

PIE.htc请求应该使用mime类型“text / x-component”进行响应 - 否则IE将不会触及该行为。

Answer 4

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

简写CSS属性让你可以控制要转角的角落。

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

Answer 5

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

Answer 6

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

CSS3和PIE在IE 8中不起作用

6 个答案: