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/