1. 首页
  2. 问答
  3. 跨浏览器弯曲的边界

跨浏览器弯曲的边界

2010-05-08 122 views
11

什么是实现跨浏览器（ff，即> 6，铬合金，歌剧，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

来源

2010-05-08 Gandalf StormCrow

+5

IE6。真？真？ – 2010-05-19 15:28:23

+1

我以为ie6已被弃用 – Kieran 2010-05-25 01:21:35

回答

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]-->

如果仍有问题，请尝试从谷歌网站上的例子zip文件：http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

来源

2010-05-13 15:27:17

3

从文章哟引文ü提到：

的路径不同border-radius.htc作品可能比你预期，不像是相对于样式背景图片的路径，这个路径是相对于您从中调用CSS的页面。

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

来源

2010-05-14 22:06:15 newtover

8

你可以把JQuery Curvy Corners用来做这一切的开箱代替。

来源

2010-05-17 14:01:08 Sarfraz

+2

当然，使用JavaScript进行造型......多么可怕的建议。 – Seb 2010-05-20 00:36:28

+0

@Seb：如果有更好的跨浏览器解决方案，这首先不会存在。 – Sarfraz 2010-05-20 06:06:07

+0

@Sarfaz你知道有多少JS解决方案在那里，不需要它的东西？它存在的事实并不意味着没有更好的解决方案。事实上，在这个问题上看看正确的解决方案。 – Seb 2010-05-20 14:27:32

1

这里是CSS：

.curved { 

-moz-border-radius:10px; 

-webkit-border-radius:10px; 

behavior:url(border-radius.htc); 

}

这里是你将如何使用它，当然：

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

来源

2010-05-19 13:58:12 jessecurry

相关问题

 相关问题