Search the Community

У меня двух колоночное меню: .menu > li { display: inline-block; vertical-align: top; width: 50%; border-right: 1px solid #fff; /*белая линия в конце блока. вместе с серой линией тэга <a> образует бело-серую линию*/ }.menu a { text-decoration: none; display: block; text-align: center; font-size: 14px; border-right: 1px solid #dedede; /*вместе с белой линией тега <li> образует бело-серую линию*/ }.menu > li:nth-child(2n), .menu > li:nth-child(2n) a { border-right: none; /*убираем у правых пунктов меню линии разграничения - они там не нужны, там граница самого меню*/ }Поскольку бордюр тега <а> должен влезть в <li> у которого width: 50%, то тег <a> автоматически подвинется на ширину бордюра, а вот бордюр тега самого <li> никуда двигаться не станет, и сам подвинет следующий тег <li>, в результате ширина двух таких тегов будет больше 100% из-за бордюра. Проблема решается просто добавлением li {box-sizing: border-box;}, но тогда у нас левые колонки уже правых на величину двух бордюров, тегов <a> и <li>. Не велика беда, конечно, но можно же сделать более красиво: .menu > li:nth-child(2n+1) { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); Тогда линия у нас будет точно по центру: одна полосочка тега <a> будет чуть левее, а полосочка тега <li> будет чуть правее. Но вопрос, ведь спецификация calc хуже поддерживается броузерами чем border-box, можно ли как-то сделать, чтоб если calc не сработает, то сработал border-box?