CSS3 和 PIE 在 IE 8 中不起作用

Posted 2023-05-08

技术标签:

【中文标题】CSS3 和 PIE 在 IE 8 中不起作用【英文标题】：CSS3 and PIE not working in IE 8 【发布时间】：2011-06-07 03:56:24 【问题描述】：

我正在尝试演示 CSS3PIE，但它根本无法在 IE 中运行。

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

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

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

【问题讨论】：

有什么理由不使用filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEBEB', endColorstr='#C9C7C8',GradientType=0 );？ 【参考方案1】：

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

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

另外，请尝试在与PIE.htc 文件相同的位置添加具有以下内容的.htaccess 文件：

AddType text/x-component .htc

希望这会有所帮助。

【讨论】：

在 IE10 中修复了 IE8 兼容模式，但在真正的 IE8 中没有……有什么想法吗？ @DrCord 哇，不知道……我不确定，因为我目前不再依赖 CSS3PIE。我支持 IE8+，我编写了一个可靠的布局结构；关于“花哨的视觉效果”：什么在 IE 上有效，在 IE 上有效，什么无效，没什么大不了的，无论如何设计看起来都不错。【参考方案2】：

尝试添加