html – CSS3和PIE在IE 8中不起作用

前端之家收集整理的这篇文章主要介绍了html – CSS3和PIE在IE 8中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图演示CSS3PIE,它不会在IE中工作。

HTML:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <Meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5. <link href="test.css" type="text/css" rel="stylesheet">
  6. <title>Test</title>
  7. </head>
  8. <body>
  9.  
  10. <div id="title"></div>
  11. <div id="sub_title"></div>
  12. <div id="main_area">
  13. <div id="date_area"></div>
  14. </div>
  15.  
  16. </body>
  17. </html>

CSS:

  1. body{
  2. margin: 0 auto;
  3. }
  4.  
  5. #title{
  6. margin: 0 auto;
  7. width: 100%;
  8. height: 40px;
  9. background-color: white;
  10. }
  11.  
  12. #sub_title{
  13. margin: 0 auto;
  14. width: 100%;
  15. height: 25px;
  16. background-color: green;
  17. }
  18.  
  19. #date_area{
  20. width: 310px;
  21. height: 250px;
  22. border: 1px solid #4A4949;
  23. padding: 60px 0;
  24. text-align: center;
  25. -webkit-border-radius: 1px;
  26. -moz-border-radius: 1px;
  27. border-radius: 1px;
  28. -webkit-Box-shadow: #707070 2px 2px 4px;
  29. -moz-Box-shadow: #707070 2px 2px 4px;
  30. Box-shadow: #707070 2px 2px 4px;
  31. background: #EBEBEB;
  32. background: -webkit-gradient(linear,0 0,0 bottom,from(#EDEBEB),to(#C9C7C8));
  33. background: -moz-linear-gradient(#EDEBEB,#C9C7C8);
  34. background: linear-gradient(#EDEBEB,#C9C7C8);
  35. -pie-background: linear-gradient(#EDEBEB,#C9C7C8);
  36. behavior: url(/PIE.htc);
  37. }

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

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

解决方法

行为位置应该是相对于你的HTML文件,而不是你的CSS像使用url()的任何其他声明。所以假设你的index.html和PIE.htc在根目录下,你的CSS在’css’文件夹中,你应该这样做:
  1. background-image: url(../images/example.jpg);
  2. behavior: url(PIE.htc);

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

  1. AddType text/x-component .htc

希望这可以帮助。

猜你在找的HTML相关文章