我正在遵循来自 here 的 chalice 3 列液体布局我正在尝试使用新的 css 技术来圆 Angular ，但我无法让左上角正常运行。 Angular 在外面是圆的，但是里面还有一个div不是圆的，把圆 Angular 戳出来了。我相信这可能是因为所有边距切换和其他原因，但我在完成此布局方面并没有取得多大成功。
我应该提一下，目前 Angular 落只能在 firefox 中正常工作，而且我显然需要它们在所有 现代 浏览器中工作(IE 可能是个异常(exception) - 我更喜欢 chrome 、歌剧和 Safari 支持)。
出于测试目的，我创建了一个更简单的布局版本，我希望有人至少能够为我指出正确的方向，以解决这个问题。我添加了一些 lorem ipsum 并对列和 div 进行了颜色编码，希望可以更轻松地查看需要更改的样式。具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title Here</title>
<style type="text/css">
.wrapper
{
color: #333;
line-height: 130%;
margin: 10px 12px 0px 10px;
-webkit-border-radius: 11px 11px 0 0;
-moz-border-radius: 11px 11px 0 0;
border-radius: 11px 11px 0 0;
}
.columnmask
{
position: relative;
clear: both;
float: left;
width: 100%;
overflow: hidden;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
}
.threecol
{
background: white;
-webkit-box-shadow: #000 2px 2px 3px;
-moz-box-shadow: #000 2px 2px 3px;
box-shadow: #000 2px 2px 3px;
background: red;
}
.threecol .middlecolumn
{
float: left;
width: 200%;
margin-left: -170px;
position: relative;
right: 100%;
background: blue;
}
.threecol .leftcolumn
{
float: left;
width: 100%;
margin-left: -50%;
position: relative;
left: 340px;
background: yellow;
}
.threecol .midcolwrap
{
float: left;
width: 50%;
position: relative;
right: 170px;
padding-bottom: 1em;
}
.threecol .midcol
{
margin: 0 180px;
position: relative;
left: 200%;
overflow: hidden;
padding-top: 5px;
background: green;
}
.threecol .leftcol
{
float: left;
float: right;
width: 160px;
position: relative;
right: 5px;
text-align: center;
background: silver;
}
.threecol .rightcol
{
float: left;
float: right;
width: 160px;
margin-right: 15px;
position: relative;
left: 50%;
text-align: center;
background: purple;
}
.footer
{
-webkit-border-radius: 0 0 11px 11px;
-moz-border-radius: 0 0 11px 11px;
border-radius: 0 0 11px 11px;
background: orange;
}
#footer
{
position: relative;
clear: both;
margin: 0px 10px 10px 10px;
padding: .5em;
text-align: center;
border: 1px solid gray;
-webkit-box-shadow: #000 2px 2px 3px;
-moz-box-shadow: #000 2px 2px 3px;
box-shadow: #000 2px 2px 3px;
}
.roundTop
{
-webkit-border-radius: 11px 11px 0 0;
-moz-border-radius: 11px 11px 0 0;
border-radius: 11px 11px 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="colmask" class="columnmask threecol roundTop">
<div class="middlecolumn">
<div class="leftcolumn">
<div class="midcolwrap">
<div class="midcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="leftcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="rightcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
最佳答案
你能不能也给内部的列一个 border-radius ？或者，给他们一点 top-margin，让他们远离边缘？
关于html - 带圆 Angular 的 chalice 3 列在某些浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12102445/