今天做一个项目中要用到圆角自适应容器，写了如下布局
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>demo</title>
<link href=”style/css/style.css” rel=”stylesheet” type=”text/css” />
<style>
/*box*/
.circbox{border:1px solid #E4E5EA; margin:10px; position:relative}
.circbox b{background: url(style/img/bg_box.png) no-repeat; display:block; position:absolute; width:6px; height:6px; overflow:hidden; font-size:0}
.circbox .tl{ background-position:0px 0px; left:-1px; top:-1px}
.circbox .tr{ background-position:-6px 0px; right:-1px;top:-1px }
.circbox .bl{ background-position:0px -6px; left:-1px; bottom:-1px}
.circbox .br{ background-position:-6px -6px; right:-1px;bottom:-1px }
.con h3{ font-size:14px; padding-left:10px; border-bottom:1px solid #ccc; height:24px; }/*将height+border之和变成奇数即可*/
.circbox .con{ padding:10px}
.con ul{ padding:10px;}
</style>
</head>
<body>
<div>
<b></b>
<b></b>
<div>
<h3″>标题</h3>
11111111111<br />
222222222222<br />
33333333333<br />
</div>
<b></b>
<b></b>
</div>
</body>
</html>
在IE6下因为H3导致边框不能对齐，搞了半天，经同事指点，发现原来又是IE6的奇数BUG在作怪，将height+border之和变成奇数即可
图像下载：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
