元素的border-collapse變化寬度

Question

有沒有辦法在不改變元素寬度的情況下使用「border-collapse：collapse」？

發生了什麼：當我不使用border-collapse屬性時，右/左邊框看起來是「粗體」，因爲它們在一起。

如果我使用border-collapse屬性，它會一起解決右/左邊框的這個「粗體」問題，但菜單的寬度比其他具有相同寬度的元素大。

body { 
    background-color: #EEEEEE; 
    margin: 20px; 
    max-width: 1280px; 
    min-width: 768px; 
} 

header { 

} 

#menu { 
    display: table; 
    width: 100%; 
    border-collapse: collapse; 

} 

#menu ul { 
    display: table-row; 



} 

#menu li { 
    display: table-cell; 
    height: inherit; 
    border: solid 1px; 
    padding: 0; 
    margin: 0; 




} 

#menu li a { 
    font-family: sans-serif; 
    text-align: center; 
    display: block; 
    line-height: 1.2em; 
    text-decoration: none; 
    color: black; 
} 

#menu li a:visited { 
    color:black; 
} 

#menu li:hover { 
    background-color: white; 
} 

#main { 
    background-color: white; 
    height: 600px; 
    border: 1px solid; 
    border-top: none; 
    border-bottom: none; 
} 

footer { 
    background-color: white; 
    height: 200px; 
    border: 1px solid; 
} 

http://jsfiddle.net/wHDMn/3/ http://i.stack.imgur.com/UroWQ.png

Answer 1

從我所看到的，表得到一個像素大。您可以使用box-sizing: border-box模型解決此問題。

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

http://jsfiddle.net/wHDMn/3/