CSS3 and PIE not working in IE 8_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-03 09:45 出处：网络

Im trying to demo CSS3PIE and it wont work in IE at all. HTML: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">

Im trying to demo CSS3PIE and it wont work in IE at all.

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&l开发者_StackOverflow社区t;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);  
}

The result is just a block with a border, no gradient/shadow etc

Any help/solution would be much appreciated.

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.

Try adding

position:relative;
z-index: 0;

as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10

This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?

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

The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour.

adding: AddType text/x-component .htc - to the .htaccess file worked like a charm for me.

The shorthand CSS property let's you control what corners to round or not.

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

Try to clear cache in your browser. Especialy when you switch between compatibility modes. It really helps

Make sure you have the latest beta release. If the HTC file still causes issues, try the JS implementation.

CSS3 and PIE not working in IE 8

精彩评论

关注公众号

热门标签

图文推荐

CSS3 and PIE not working in IE 8

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：