如何使跨浏览器，W3C有效，语义，非JavaScript的圆角？ [英] How to make a cross browser, W3C valid, semantic, non-javascript ROUND corner?

问题描述

我想建立一个跨浏览器（FF3，IE6，Safari，Opera），W3C有效（HTML和CSS两者） em>（水平垂直），不使用JavaScript 和 图片可以用于IE6。

I want to make a cross-browser (FF3, IE6, Safari, Opera), W3C valid (HTML and CSS both), stretchable (horizontally vertically), without JavaScript and with Semantic and lesser HTML markup Round CORNER. Images can be used for IE6.

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

I've tried and tested many techniques available on community. But everything has one of the problems mentioned above . If anyone knows what I want please share with me?

记住我想要没有任何类型的JavaScript，jquery或任何类型的js。 b $ b

Remember I want to make it without any type of JavaScript, jquery or any type of js.

推荐答案

两个主要的渲染引擎支持CSS3相当长的时间，这使得圆角变得简单：

The two major rendering engines have supported CSS3 for quite some time, which makes rounded corners as simple as:

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

当然，这对IE6或7 没有任何影响IE8）或8，所以你需要实现令人讨厌的堆叠分区与图像的角落，这不符合你的语义要求。

Of course, this doesn't have any effect on IE6 or 7 (it works in IE8) or 8 so you need to implement the nasty stacked division with images for the corners, which doesn't fit your semantic requirement.

不是涉及javascript或css-hacks的显示黑客的风扇 - 所以我使用CSS3，并检查IE7中的平方版本看起来可以接受。我已经做了一段时间，因为IE从来没有用来支持PNG透明度 - 这意味着你不能很好地覆盖在图案背景上的圆角图像。 IE8是一个很大的改进，所以问题开始消失 - 但我明白你的愿望，使其工作在IE6及以上。

I'm not a fan of display-hacks that involve javascript or css-hacks - so I use CSS3 and check that the squared-off version in IE7 looks acceptable. I've been doing this for a while as IE never used to support PNG transparency either - which meant you couldn't nicely overlay a rounded corner image on a patterned background. IE8 is a big improvement, so the problem does start to go away - but I understand your desire to make it work on IE6 and above.

更新：最初计划包括在IE8中的CSS3位和片段实际上从最终版本中删除。 border-radius是受害者之一。

这篇关于如何使跨浏览器，W3C有效，语义，非JavaScript的圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！