网页制作CSS教程:自适应圆角
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-02-29
前言有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想… 需求
困惑经典的解决方案看起来像这样： <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>传统方案及bug</title>
<style>
body{margin:100px;background-color:red;}
div, p, b{margin:0;padding:0;}
b{display:block;}
.rc{display:inline-block;#display:inline;#zoom:1;}
/* float 效果相同
.rc{float:left;} */
.rc1, .rc2, .rc .bd{border-style:solid;border-color:black;background-color:yellow;}
.rc1, .rc2{height:1px;overflow:hidden;}
.rc2, .rc .bd{border-width:0 1px;}
.rc1{margin:0 2px;height:0;border-width:1px 0 0;}
.rc2{margin:0 1px;}
.rc .bd{padding:0 6px;line-height:1.5;}
</style>
</head>
<body>
<div class="rc">
<b class="top"><b class="rc1"></b><b class="rc2"></b></b>
<div class="bd">
<p>FML!!!</p>
</div>
<b class="bottom"><b class="rc2"></b><b class="rc1"></b></b>
</div>
</body>
</html>
使 rc float: left 或 display: inline-block 或许能满足需求，不过 IE 6&7 出现 bug：IE6中依然显示为dispaly:block，而IE7中top 和 bottom缩成一坨，不肯扩展开来，而在 rc1/rc2/rc3 中插入文字 <b class="rc1">XXX</b> 则只能扩展到文字XXX的宽度，无法与 bd 对齐！ 解决试了几个方法均不通，也搜索不到这个 bug，这时想到了 Google 系产品的 1px 圆角按钮： |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于网页制作CSS教程:自适应圆角的所有评论
