html - CSS3 和 PIE 在 IE 8 中不工作

标签 html internet-explorer css css3pie

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

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

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

最佳答案

behavior 位置应该是相对于您的 HTML 文件的,而不是像任何其他使用 url() 的声明那样的 CSS。因此,假设您的 index.htmlPIE.htc 位于根目录中,并且您的 CSS 位于“css”文件夹中,您应该像这样:

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

此外,尝试在与 PIE.htc 文件相同的位置添加一个包含以下内容的 .htaccess 文件:

AddType text/x-component .htc

希望这对您有所帮助。

关于html - CSS3 和 PIE 在 IE 8 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4657760/

相关文章:

javascript - 如何让你的 Javascript 根据浏览器有条件地运行?

php - 大奖网站空白

javascript - 使用 step-before 或 step-after 插值时的 D3 线型

html - 页脚中的图标定位不正确

javascript - 仅在较小的屏幕上显示图像

jquery - IE 和翻转动画问题

internet-explorer - IE10支持OTF吗?

javascript - 使 Semantic-ui 表格行像 Meteor JS 中的按钮一样可选择

html - 删除显示内联 block 列表后的空格

javascript - 如何添加淡入淡出