16

我正在尝试演示 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);  
}

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

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

4

6 回答 6

34

The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:

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

Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:

AddType text/x-component .htc

Hope this helps.

于 2011-01-12T19:13:03.317 回答
14

尝试添加

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-13T23:38:29.557 回答
4

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

速记 CSS 属性让您可以控制圆角或不圆角。

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

于 2011-12-12T20:28:37.267 回答
4

CSS3 PIE - 给 IE 边框半径支持不起作用？

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

于 2011-01-12T00:22:59.877 回答
2

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

于 2011-12-02T10:00:44.063 回答
0

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

于 2011-01-11T23:01:41.257 回答