CSS3PIE 不使用边界半径 [重复]
Posted
技术标签:
【中文标题】CSS3PIE 不使用边界半径 [重复]【英文标题】:CSS3PIE Not Working With border-radius [duplicate] 【发布时间】:2012-02-24 19:03:20 【问题描述】:我正在尝试让 CSS3PIE 为我的网站工作,以便我可以在 IE8(及更早版本)中使用边框半径。它在所有其他浏览器中都能正常工作。这是我的 CSS:
#body_text_design
border:2px solid black;
background-color:#CCC;
background-image:url(../pics/designbg.png);
font-family:"Britannic Bold";
color:black;
height:676px;
width:675px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:23px;
overflow:hidden;
behavior: url(PIE.htc);
还有我的 html:
<div id="body_box">
<div id="body_text_design">
<div class="design_text_div">
<h1>Test test test</h1>
<br />
<br />
<br />
<h3>Bla bla bla</h3>
<h3>Test test test</h3>
</div>
</div>
</div>
我已经尝试了所有可以找到的调试方法,例如:
尝试了php解决方案 尝试了指向 PIE.htc 文件的完整 http:// 链接 已将AddType text/x-component .htc
添加到我的 .htaccess 文件中
尝试了position:absolute
和zoom:1
以及z-index 值。
到目前为止没有任何效果。我羡慕那些仅仅通过在他们的 CSS 中添加 behavior
属性来获得这个的人。如果有人可以提供帮助,将不胜感激!
编辑
这是一个 jsfiddle:
http://jsfiddle.net/3aWVH/1/
【问题讨论】:
你能举个例子更好地理解 您的代码对我有用。确保您的 htc 文件的路径正确。我在本地电脑上对其进行了测试。例如路径:C:\Users\...\test.html 不确定是您的服务器设置问题还是…… 是的,我把 PIE.htc 放在了正确的位置。我什至实际上将它放在多个文件夹中,以确保它在某个地方的正确位置并且它不起作用。我无法在本地 PC 上测试它,因为我现在只有一台 Mac,而 IE8 不适用于 Mac。我能想到的唯一另一件事是它与 GoDaddy (他们托管我正在设计的网站)有关。我已经用 Google 搜索了,但找不到任何确凿的事实表明 GoDaddy 的 htc 文件存在权限问题。有什么想法吗? 您可以尝试将行为样式紧跟在边界半径定义之后,看看是否有帮助? 【参考方案1】:确保您没有在本地进行测试。 .htc 文件需要托管在服务器上,css3 pie 只能在 web 容器中工作
【讨论】:
这个。有点奇怪的问题,但在我的可公开访问的暂存环境中测试它就可以了。 @Pranay Krondekar:谢谢提示,这是应该在 CSS3PIE 官方网站和文档上显示的信息【参考方案2】:我为这个问题苦苦挣扎了一段时间,终于弄明白了!
某些服务器无法识别 .htc 文件,因此您必须将 Content-type 添加到您的 .htaccess 文件中:
AddType text/x-component .htc
在文档http://css3pie.com/documentation/known-issues/的已知问题页面上
【讨论】:
哦,对不起,我错过了你在问题中所说的地方:/抱歉【参考方案3】:我可以访问.htaccess
,但添加AddType text/x-component .htc
并没有什么区别,但是使用PIE.php
确实有效(尽管我一开始使用的路径输入错误,所以我花了 3 天时间才弄清楚php
确实一直在工作!)...无论如何,现在一切都很好!
【讨论】:
以上是关于CSS3PIE 不使用边界半径 [重复]的主要内容,如果未能解决你的问题,请参考以下文章
是否可以在全局范围内将 CSS3Pie 边框半径应用于 jQuery UI?