如何制作跨浏览器,W3C有效,语义,非javascript ROUND角落？

我想制作一个跨浏览器(FF3,IE6,Safari,Opera),W3C有效(HTML和CSS两者),可伸缩(水平垂直),没有JavaScript和语义和较小的HTML标记Round CORNER.图像可用于IE6.

我已尝试并测试了社区上的许多技术.但是一切都有上面提到的问题之一.如果有人知道我想要什么,请与我分享？

记住我想在没有任何类型的JavaScript,jquery或任何类型的js的情况下制作它.

两个主要的渲染引擎已经支持CSS3很长一段时间了,这使圆角简单如下:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

当然,这对IE6或7没有任何影响 (适用于IE8) 或者8你需要用角落的图像来实现令人讨厌的堆叠分区,这不符合你的语义要求.

我不喜欢涉及javascript或css-hacks的显示黑客 - 所以我使用CSS3并检查IE7中的平方版本是否可以接受.我已经做了一段时间,因为IE从来没有用过支持PNG透明度 - 这意味着你不能很好地在图案背景上覆盖圆角图像.IE8是一个很大的改进,所以问题确实开始消失 - 但我理解你希望它能在IE6及更高版本上运行.

更新:最初计划包含在IE8中的各种CSS3部分实际上已从最终版本中删除.border-radius是受害者之一.

简短的回答是,如果没有CSS3,你无法做任何你想做的事情 - 除了最新版本的浏览器之外,没有实现.

所以,答案是要么使用CSS3(如上面Sohnee所详述),要么学会喜欢javascript/divs/images解决方案.当没有这些浏览器的浏览器看到它时,请确保它显示正常...