0
我跟隨聖盃3列液體佈局從here，我試圖用新的CSS技術來圓角，但我無法得到左上角正確的行爲。角落在外面是圓形的，但裏面還有一個不圓的圓角，它突出了圓角。我相信這可能是因爲所有的保證金轉換和不發生，但我沒有在完成這種佈局方面取得很大的成功。聖盃3列圓角不能在某些瀏覽器中工作
我要指出的角落，在Firefox正常工作，僅在這一點上，我顯然需要他們在所有現代瀏覽器中運行（IE可能是一個例外 - 我更期待的鉻，Opera和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>
我可以告訴你很多，這是因爲你的leftcolumn div從瀏覽器的絕對最左邊像素開始，因爲它嵌套在父div中，所以你不會看到它。看起來像黃色div的角落實際上是大約50-100像素到矩形。那有意義嗎？不知道如何去修理它，我無法在10分鐘內找出它，所以我想我至少會給你一個方向。 –
感謝您的提示！我認爲是這樣，但我也找不到一個好方法來修改它，甚至暫時看到最左邊的像素/角落。我也認爲這可能是不可能的，因爲這並不是製作左右兩列四角的三列布局的最佳實現。如果有人知道更好的方法，我全是耳朵！ – Joseph