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