什么是在div上实现跨浏览器(ff,即> 6,chrome,opera,safari)弯角的最佳方法。 我发现这篇文章http://jonraasch.com/blog/css-rounded-corners-in-all-browsers ,我已经多次按照说明进行操作,这是我的css:

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

<!--[if lte IE 8]>
<style>
#content_wrapper{
behavior: url(template/css/border-radius.htc);
border-radius: 20px;
}
</style>
<![endif]-->

有人能指出我做错了什么,或者有更好的方法来达到同样的效果,它在IE以外的所有浏览器中工作

#1楼 票数:17 已采纳

如果这是HTML文件中未经修改的片段,则很明显为什么它不起作用:您在另一个<style>使用<style>标记。

作为第一个测试,只需尝试用(删除IE特定块!)替换整个片段:

#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    behavior: url(template/css/border-radius.htc);
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}

如果可行,您可以将IE特定部分移动到单独的<style>

<style type="text/css">
#content_wrapper{
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;
    border-radius: 25px;
    background-color:#F2DADC;
    border:25px solid #ECD3D5;
    height:780px;
    opacity:0.7;
    width:747px;
    margin:0px auto;
    position:relative;
    display:block;
    zoom:1;
}
</style>


<!--[if lte IE 8]>
<style type="text/css">
#content_wrapper{
    behavior: url(template/css/border-radius.htc);
    border-radius: 20px;
}
</style>
<![endif]-->

如果您仍有问题,请尝试使用google网站上的示例zip文件: http//code.google.com/p/curved-corner/downloads/detail?name = border-radius-demo.zip

#2楼 票数:8

您可以将JQuery Curvy Corners用于开箱即用。

#3楼 票数:3

你提到的文章的引用:

border-radius.htc的路径与您预期的工作方式不同 - 与相对于样式表的背景图像路径不同,此路径相对于您调用CSS的页面。

这就是为什么避免像我们上面那样的相对路径是一个好主意。

#4楼 票数:2

下载.htc文件:

并将其放在文件夹./template/css 有关详细信息,请参阅http://code.google.com/p/curved-corner/项目(与您放置的文章相关联)。

#5楼 票数:1

这是css:

.curved {

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 behavior:url(border-radius.htc);

}

以下是你如何使用它,当然:

<div class="curved">Curvd div</div>

#6楼 票数:1

如果你有兴趣在IE中获得圆角,这可能是有用的 - http://css3pie.com/

#7楼 票数:0

你好,我只是懒惰,粘贴一个链接到别人的工作....我不想要赏金

试试这个。 http://dillerdesign.com/experiment/DD_roundies/

  ask by Gandalf StormCrow translate from so

未解决问题?本站智能推荐:

4回复

CSS 跨浏览器弯曲边框

定义跨浏览器 CSS/CSS3 兼容/有效弯曲边框的正确/最佳方法是什么? 在跨浏览器兼容的同时,是否有非 JavaScript 的方式这样做? 如果没有,是否有任何适当的解决方法?
4回复

编码弧形阴影框以实现跨浏览器兼容性的最佳方法

我有这样设计的盒子 基本上,我需要对它们进行编码,以便它们可以根据内部内容的大小在高度方向和宽度方向上任意变化。 加上阴影效果必须透明,因为背景颜色可能会改变。 做到这一点的最佳方法,使其可以在所有浏览器中使用? (IE6 +,FF,Opera,Safari,Chrome)
10回复

防止缩放跨浏览器

对于类似地图的工具,我想禁用浏览器缩放功能。 (我知道这通常是一个坏主意,但对于某些特定网站,它是必需的)。 我通过听键盘快捷键CTRL + / CTRL -并添加e.preventDefault()等成功做到了这一点。但这并不能阻止从浏览器的缩放菜单更改缩放。 我试过: 使用 CSS:
1回复

跨浏览器的1px工具提示箭头边框与CSS?

我试图根据Paulie-D具有2px边框的工具提示,在我的工具提示div及其:before&:after箭头上获得1px绿色边框。 我可以让它们一次在一个浏览器中运行:如果它们在Chrome中运行,那么它们在Firefox中就降低了1px。 如果它们在Firefox中运行,则在Safar
2回复

跨浏览器独特的形状链接

我正在开发一个网络应用程序,允许用户输入内容,然后将其提交给人们的手机。 它就像一个魅力,但我对徽标有一些问题。 徽标如下: 我左边有一个不同的链接按钮,这就是为什么我们不希望徽标链接覆盖它。 我的第一个想法是使用边界半径,但底部的角度太尖锐了。 例如,如果我使用的边界半径为
3回复

自定义滚动条跨浏览器支持

我正在尝试在 css 中创建自定义滚动条,但它不是跨浏览器,我想使用 javascript 使其跨浏览器。 滚动条不在正文标签中。 滚动条位于卡片盒(类别)中。 这是屏幕截图: 单击此处查看屏幕截图这是我的 html 代码: CSS代码: 我试过这个,但它不是跨浏览器。 有人可以告诉我,
1回复

跨浏览器 3D 动画

我目前正在尝试开发一个基于浏览器的小型游戏。 我一直在摆弄让动画按照我想要的方式工作。 问题是它在 Opera 中运行良好,在 Edge 中运行良好(尽管它对圆圈进行了一些裁剪)。 然而,与往常一样,IE 失败了很多。 该示例并未完美显示该功能,即使它通常可以在我的浏览器 (Opera) 中运行
2回复

单击CSS跨浏览器大纲抑制

我有一个看起来像这样的菜单结构: HTML: CSS: 我已经尝试了很多天来找到一个跨浏览器的解决方案来抑制点击大纲样式,同时通过标签导航保持启用它。 以下页面中写的所有解决方案都不适用于我: http : //people.opera.com/patrickl/ex