打造超完美CSS圆角框

时间:2008-02-04 16:16:32 来源:www.drekey.cn 作者: 点击:次出处:技术无忧

关键字：css 圆角 div html

问题二，三在web2.0如火如荼的今天，圆角成为一种首推的web2.0标志性设计元素和风格，webstandard由于其强大的控制能力和便于修改的特性得到大面积推广，这直接促使div（span）+css的设计模式越来越得到大家的认可，于是CSS圆角框就有了它存在的最大理由，可惜的是，大多数圆角框的设计意图仅仅是为了要在其中放置一些简单的页面元素，诸如文本和图片，由于需求的局限，设计者无法考虑到日后圆角框还有更大的活动空间（不要去责怪设计者，CSS圆角框作为一种设计手段上的革新，本身就是一种伟大的颠覆和创造，我们又怎么忍心对设计者要求的如此十全十美，如此苛刻呢）

下图为在Firefox（以下简称ff）中页面出现混乱的情况

正确的显示效果

由于圆角框内放置了复杂的页面元素（包括了float属性，margin属性等），ff下混乱的页面元素大家也看到了，可以用惨不忍睹来形容，而同样的错误在ie6， ie7中也会发生，那么究竟是什么导致了元素混乱不堪呢？

下面以spiffycorners生成的代码为例

CSS代码

.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#CC0000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #e99191;
border-right:1px solid #e99191;
background:#d83f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #f9e5e5;
border-right:1px solid #f9e5e5;
background:#d53030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #d53030;
border-right:1px solid #d53030;}
.spiffy4{
border-left:1px solid #e99191;
border-right:1px solid #e99191}
.spiffy5{
border-left:1px solid #d83f3f;
border-right:1px solid #d83f3f}
.spiffyfg{
background:#CC0000}

XML/HTML代码

在仔细观察了代码之后我们发觉一个问题，在其中的容器元素spiffyfg的css中没有出现float属性，float是用于控制页面元素浮动的工具，它是负责页面布局的强有力的手段，我们在页面设计中会用到大量的float控制代码，但是，对于float而言，微软的IE和Firefox有着不同的理解，在W3C对于webstandard的标准中，严格的规定了属性的继承法则，子元素必须以明文声明某个属性是从它的父元素继承而来，若是该属性缺失，则认为继承终止，Firefox就严格的贯彻了这一标准，而微软的产品一向以实用主义和尊重用户体验闻名，这势必导致他更遵从于产品的价值标准，在IE中，浏览器对属性的解释会采取就近原则，如果子元素属性缺失，就会从它的父元素获取属性。这种做法粗看上去方便了设计者，但已不适应走向标准化的今天。

没错，我们已经找到了问题的症结，于是我们在这里可以把第二个和第三个问题归结为由于ie和ff在float属性上的不同解释所引发的冲突和不兼容。

我们找到了问题的本质原因，但又带来了新的问题，如何编写代码适应两个不同的浏览器，出于同一属性的不同解释，也就意味着这是一个原子性问题，擅自改动代码，造成的结果只能是拆东墙补西墙，这时候，我们想，是否有一个工具，IE认可，FF不认可，那不就解决问题了，那么这样的工具存在吗，这个时候我的这位兄弟提醒了我，应该说，上帝在关闭一扇门的时候总会为其打开另一扇门（不要把上帝认为是比尔盖茨^_^），微软擅做决定改变了标准，让我们无法设计统一的代码，但在其css的设计中也提供了一个他独有的工具：表达式（expression）,表达式的最初设计意图是为了在css中插入可执行的javascript代码，方便对群组元素方便的赋值，而在实践中我们发现，这一工具不为ff认可，于是问题就出现了转机。

针对属性继承的问题，我们可以在容器元素spiffyfg的属性中插入如下代码

CSS代码

.spiffyfg{
background:#CC0000
float:left;       /*for Firefox*/
float:expression("none"); /*for IE     */
}

还有一个小问题，两款浏览器正对圆角边框的显示方法也会有不同，同样的解决方法，在.spiffy *元素中插入

CSS代码

.spiffy *{
display:expression("block");
display:-moz-box;
height:1px;
overflow:hidden;
font-size:.01em;
background:#CC0000
}

OK，到现在为止，借助与各种工具，我们成功的打造了一款没有任何锯齿，可以容纳任意复杂元素而又没有任何兼容性问题的圆角框

本文在思考实践和写作过程中均受到了我的这位好兄弟的积极的启发和引导，可以说没有他的经验和智慧，我们无法解决这些问题，文章的大量篇幅也不仅局限于解释原理和解决问题，而是希望能通过这样一个在常人看来不起眼的圆角框的改良过程，给大家以问题解决思路和攻克难关的精神上的启发

问题虽小，我们或许也能找到迂回的道路，可人生中总会碰到绝境，如何逢生不在于工具，而在于你有没有绝境逢生的信念。
（完）

想自己动手组装电脑吗？想了解市场行情吗？来技术无忧 DIY资讯一切烦脑都没有！