简体   繁体   English

CSS3 PIE不适用于border-radius和box-shadow

[英]CSS3 PIE doesn't work with border-radius and box-shadow

I've coded a simple html/css for testing purposes and I can't get the library to work. 我编写了一个简单的html / css用于测试目的,我无法使该库工作。 I've moved the .htc, .php and .js files to the same directory of index.html and it doesn't work at all. 我已将.htc,.php和.js文件移动到index.html的同一目录中,它根本不起作用。

Link to the code. 链接到代码。

All files are in the same directory of index.html, are accessible via URL, and I believe that should be enough to work. 所有文件都在index.html的同一目录中,可以通过URL访问,我相信这应该足够了。 I've already tried putting the behavior tag and position: relative, z-index:0 in the css file but IE can't see these properties. 我已经尝试将行为标记和位置:relative,z-index:0放在css文件中,但IE无法看到这些属性。

The Code: HTML 代码: HTML

<link rel="stylesheet" type="text/css" href="index.css">
<script src='jquery.js'></script>
<script src='PIE.js'></script>
<body>
<div>test</div>
</body>

CSS : CSS

 div {
     float: left;
     position: relative;
     z-index: 0;
     width: 300px;
     height: 300px;
     -webkit-border-radius: 10px;
     -moz-borderradius: 10px;
     border-radius: 10px;
     -pie-box-shadow: 1px 1px 10px #000;
     box-shadow: 1px 1px 10px #000;
     behavior: url(PIE.htc);
     background-color: red;
}

Solved it. 解决了它。 The problem were several things. 问题是几件事。

How it worked: 它是如何工作的:

  1. I'm testing on IE10 but I hadn't activated the Navigate Mode, only Document Mode IE8. 我在IE10上测试但我没有激活导航模式,只有文档模式IE8。 So just activate Navigate Mode IE8. 所以只需激活导航模式IE8。
  2. Import script PIE.js. 导入脚本PIE.js. .htc or .php doesn't matter. .htc或.php并不重要。
  3. Set the element styles one by one with position: relative and z-index: 0 使用position: relativez-index: 0逐个设置元素样式

That's it. 而已。 Tnks! TNKS!

I have found that the order in which you set the different browser-compatibility rules is important: 我发现您设置不同浏览器兼容性规则的顺序很重要:

border-radius
then -moz
then -ms
then -webkit

I had them in a different order and it wouldn't work... 我以不同的顺序让它们不起作用......

Maybe it will help someone... 也许它会帮助某人......

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM