html去除边角,WEB开发向HTML5及CSS3迈进（1）——圆框边角的处理

web页面中，对于圆角边框处理时会增加许多不必要的html代码，这对于内容的表述来说是非常不和谐的。一片有逻辑结构的内容中增加了这些代码，一眼望去就像草地上的杂草一样的星星点点。对于如今已向CSS3开始过度的时期来说，已经不需要去对边框做类似于“滑动门”等技术的过多处理。能精简就精简，虽说流量不是问题，但是对于维护来说，代码越精致越容易维护。

先说一点题外话，在以后会另开页面详细说明。一点，不赶潮流或者使用的不是私人电脑，浏览器使用的是电脑中已存在的那种，在国内一般就是IE浏览器(公用XP系统IE6更为普遍)，要么就是国产浏览器，但其实还是IE内核，而其中大部分也还是IE6为主。而双核浏览器基本可以无视，在浏览同一网页时频繁切换内核很容易导致出错，基本上默认为IE内核的情况也是其主要原因。当它调用webkit内核时也就不存在IE的问题。各种版本双核浏览器满街飞，为其一个个做兼容性调整也是不可能也没有意义的。所以，归根结底是IE与非IE的问题。

原归正传，处理圆角边框等一系列CSS时，我的看法是，可以完全使用CSS3来进行处理，然后对旧版本(在此针对指IE)浏览器，完全用浏览器专用代码(hack)带带过就可以了。这样做好处多多：

1.IE的旧版本始终是旧版本，这里指的是IE6 7

8，XP系统再这么折腾也用不了IE9，那这么一来IE9就是一个风水岭，这样一来就不是IE之间的差别了，而是 Windows XP 与

Windows

7的区别了(Vista带带过的)。IE的特点就是特稳定，一个版本再怎么折腾也就那样，不会有内核上的更新，更不会支持CSS3。所以可以放心的给他们加上特定代码而不用担心页面需要重新调整。

2.IE的注释型hack还是十分不错的，能够准确的区分IE间的个版本，还能对其进行集合式的代码管理。把所有IE的hack都放在一个css文件夹，用注释链接，这样别的非IE浏览器跟本不会去调用这些CSS，以及这些CSS调用的图片(这会很省流量又兼顾到了IE这个只支持CSS2的浏览器)。在这也不要担心这些代码对IE9有重大影响。

3.以谷歌浏览器为代表的，具有自动更新功能的浏览器，是不存在对新技术的不支持的问题的。就算是火狐浏览器也无需担心其新技术的支持问题，这两天正好是火狐4正式版要推出，那CSS3和HTML5等这些就更加不是问题的问题了。而且用这些浏览器的用户都是“懂得入”的，不要去过多担心他们的浏览器版本的新旧问题。所以我觉得可以大胆使用CSS3的稳定特性。这年头，支持可变宽高的灵活框及页面和支持移动平台，比支持过旧版本的浏览器来得更为实际一些，代码很万能，但为了进行万能地支持，把作为内容载体的内容代码搞的乱七八糟是件适得其反的事情，在代码之上的内容才是最需要不被破坏的东西，而不是界面。

还有一种解决方法，就是在IE的hack中进行冗余代码添加，底线是不添加HTML。例如给一个框里的标题添加顶部的圆角背景，在正文div层添加底部圆角背景，不过这个方法对界面的要求更高了，不能够随意添加margin，padding甚至是border属性。

还有一点要注意，CSS3的使用有一个限度，那就是厂商代码尽量不用(如：-moz,-webkit)。这样代码加一行就变成了加一组代码了，毫无意思。很快新版浏览器就不需要这些多余代码。

最后说一下宽度的问题，如果说整个网站想做成活动宽度的，可是这样旧版浏览器会给带来更多的错位。想简单点的话，那这里就玩一下小把戏了，用hack把旧版浏览器的宽对给固定了，单个框的宽度固定，或者直接把整个页面的也宽固定了。

其实只要是内容显示正常，旧版浏览器的界面效果不添加圆角框又有什么缺失呢，这就是一个时代下的产物，方框年代的产品就应该做方框的事，不然就会像老牛拖车一般的力不从心。缓慢的浏览器去让他在去加载一大堆图片，这也是没有什么良好浏览体验的。方框也挺好～～～

----------------------------------------------------------------------------------------