首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS3和PIE在IE 8中不起作用

CSS3和PIE在IE 8中不起作用
EN

Stack Overflow用户
提问于 2011-01-11 20:47:27
回答 5查看 29.2K关注 0票数 16

我正在尝试演示CSS3PIE,但它在IE中根本不起作用。

HTML:

代码语言:javascript
复制
 <!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:

代码语言:javascript
复制
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);  
}

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

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

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-01-13 03:13:03

behavior的位置应该相对于您的HTML文件,而不是您的CSS,就像任何其他使用url()的声明一样。所以假设你的CSS和index.html在根目录下,css在一个'css‘文件夹中,你应该这样做:

代码语言:javascript
复制
background-image: url(../images/example.jpg);
behavior: url(PIE.htc);

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

代码语言:javascript
复制
AddType text/x-component .htc

希望这能有所帮助。

票数 34
EN

Stack Overflow用户

发布于 2011-01-14 07:38:30

尝试添加

代码语言:javascript
复制
position:relative;
z-index: 0;

按照这里的建议,http://css3pie.com/forum/viewtopic.php?f=3&t=10

这个问题类似于这里发布的问题:CSS3 PIE - Giving IE border-radius support not working?

票数 14
EN

Stack Overflow用户

发布于 2011-12-13 04:28:37

.htaccess文件中添加:AddType text/x-component .htc -对我来说很有吸引力。

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

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

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4657760

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档