Html CSS3 和 PIE 在 IE 8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4657760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 and PIE not working in IE 8
提问by Julio
Im trying to demo CSS3PIE and it wont work in IE at all.
我正在尝试演示 CSS3PIE，但它根本无法在 IE 中工作。
HTML:
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:
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.
任何帮助/解决方案将不胜感激。
回答by Alejandro García Iglesias
The behaviorlocation should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.htmland PIE.htcis in root and your CSS is inside a 'css' folder, you should go like this:
该behavior位置应该相对于您的 HTML 文件，而不是像任何其他使用url(). 因此，假设您的index.html和PIE.htc位于根目录并且您的 CSS 位于“css”文件夹中，您应该像这样：
background-image: url(../images/example.jpg);
behavior: url(PIE.htc);
Also, try adding a .htaccessfile with the following content in the same location as the PIE.htcfile:
此外，尝试.htaccess在与PIE.htc文件相同的位置添加具有以下内容的文件：
AddType text/x-component .htc
Hope this helps.
希望这可以帮助。
回答by Daniel Rehner
Try adding
尝试添加
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
正如这里所建议的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?
回答by drudge
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.
PIE.htc 请求应以 MIME 类型“text/x-component”响应 - 否则 IE 不会触及该行为。
回答by Tom
adding: AddType text/x-component .htc- to the .htaccessfile worked like a charm for me.
添加：AddType text/x-component .htc-.htaccess文件对我来说就像一个魅力。
The shorthand CSS property let's you control what corners to round or not.
速记 CSS 属性可让您控制要圆角或不圆角的角。
border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */
border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */
回答by cmms
Try to clear cache in your browser. Especialy when you switch between compatibility modes. It really helps
尝试清除浏览器中的缓存。特别是当您在兼容模式之间切换时。它真的有帮助
回答by Adam
Make sure you have the latest beta release. If the HTC file still causes issues, try the JS implementation.
确保您拥有最新的测试版。如果 HTC 文件仍然导致问题，请尝试 JS 实现。
