CSS：單元格邊框由於某種原因未被圓角化

我想創建一個漂亮的導航欄，但由於某種原因，我無法獲得圓角末端單元格的邊框。如果仔細觀察角落，您應該能夠看到背景發生一些四捨五入的情況，但出於某種原因，不會出現在邊界上。CSS：單元格邊框由於某種原因未被圓角化

你可以明白我的意思是：http://jsfiddle.net/7veZQ/299/

這裏是我的代碼：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
table { 
    border-collapse: collapse; 
    border: none; 
    box-shadow: 0px 5px 10px #BBB; 
} 
.nav tr td { 
    width: 160px; 
    height: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    color: #666; 
    border: 1px solid #999; 
    vertical-align: middle; 
    text-align: center; 
    background: #eeeeee; /* Old browsers */ 
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0); /* IE6-9 */ 
    text-shadow: 1px 1px 0px #FFFFFF; 
    letter-spacing: 3px; 
} 
.nav tr td:hover { 
    background: #F4F4F4; /* Old browsers */ 
    background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */ 
} 
.nav tr td#first { 
    border-radius: 5px 0px 0px 5px; 
    -moz-border-radius: 5px 0px 0px 5px; 
    -webkit-border-radius: 5px 0px 0px 5px; 
} 

.nav tr td#last { 
    color: #09C; 
    border-radius: 0px 5px 5px 0px; 
    -moz-border-radius: 0px 5px 5px 0px; 
    -webkit-border-radius: 0px 5px 5px 0px; 
} 
</style> 
</head> 
<body> 
<table class="nav" width="960" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td id="first">Home</td> 
    <td>Options</td> 
    <td>Prices</td> 
    <td>Showcase</td> 
    <td>Help</td> 
    <td id="last">Order Now!</td> 
    </tr> 
</table> 

</body> 
</html>

那我做錯了嗎？

來源

2012-07-13 atb

我建議你使用'div'元素而不是表格來建立你的導航菜單。表不應該用於佈局，甚至像導航菜單一樣簡單。 Div也比桌子少挑剔，這可能會解決您的圓角問題。 – kevin628 2012-07-13 16:09:36

那麼我做錯了什麼？

使用表進行佈局。

Tables are not layout tools。一些瀏覽器不會在表格單元格上轉角。你有一個數據清單，use list markup。

來源

2012-07-13 16:09:40 Quentin

具有諷刺意味的是，這篇文章是'

'中的''，它正在鋪設整個頁面（儘管我同意不應該這樣做）。 – ThinkingStiff2012-07-14 08:07:27

你的表CSS改變

border-collapse: separate;

來源

2012-07-13 16:20:34

不幸的是，這是不是跨瀏覽器CSS。在所有瀏覽器中都找不到CSS3。話雖如此，我想提出一些改變。首先，你不應該使用任何東西的確切高度&寬度。

其次，你應該使用DIV。 Decent forum post as to why...

在任何情況下，這裏是「修復」（我個人反對浮動任何東西，但哦有時會發生什麼：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
.nav { 
    float:left; 
    width:960px; 
    height:40px; 
    border: 1px solid #999; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    box-shadow: 0px 5px 10px #BBB; 
} 
.nav a { 
    float:left; 
    display:inline-block; 
    margin:0; 
    padding:0; 
    line-height:40px; 
    text-decoration:none; 
    width: 160px; 
    height: 40px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    text-transform: uppercase; 
    color: #666; 
    text-align: center; 
    background: #eeeeee; /* Old browsers */ 
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0); /* IE6-9 */ 
    text-shadow: 1px 1px 0px #FFFFFF; 
    letter-spacing: 3px; 
} 
.nav a:hover { 
    background: #F4F4F4; /* Old browsers */ 
    background: -moz-linear-gradient(top, #F4F4F4 0%, #E0E0E0 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F4F4), color-stop(100%,#E0E0E0)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #F4F4F4 0%,#E0E0E0 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #F4F4F4 0%,#E0E0E0 100%); /* W3C */ 
} 
.nav a#first { 
    border-radius: 5px 0px 0px 5px; 
    -moz-border-radius: 5px 0px 0px 5px; 
    -webkit-border-radius: 5px 0px 0px 5px; 
} 

.nav a#last { 
    color: #09C; 
    border-radius: 0px 5px 5px 0px; 
    -moz-border-radius: 0px 5px 5px 0px; 
    -webkit-border-radius: 0px 5px 5px 0px; 
} 
</style> 
</head> 
<body> 

<div id="main-menu" class="nav"> 
    <a href="#" id="first">Home</a> 
    <a href="#">Options</a> 
    <a href="#">Prices</a> 
    <a href="#">Showcase</a> 
    <a href="#">Help</a> 
    <a href="#" id="last">Order Now!</a> 
</div> 

</body> 
</html>

這應該是所有你需要它。工作...如果您在使用CSS佈局的麻煩，檢查出YUI3網格我YUI 3的粉絲，所以是的，這是一個可恥的插頭

YUI Library

來源

2012-07-13 16:24:28 CrazyVipa

看這個：

http://jsfiddle.net/7veZQ/313/

表被轉換成div + ul。

看line-height（用於垂直居中文本）。

另外，我改變了first和last爲classes（而不是id's），因爲他們是很常見的名字和id's應在文件唯一的。

最後，請看borders。我們在列表中沒有border-collapse，所以last項目與其他項目稍有不同。

來源

2012-07-13 17:25:28

相關問題

CSS：單元格邊框由於某種原因未被圓角化

回答

相關問題