CSS - <li>Элементы в горизонтальном меню имеют разрыв между ними

Question

выпуск

По какой-то причине левая и правая границы элементов li не соприкасаются, между ними разрыв примерно 4-5 px. Понятия не имею, откуда он ... мы потратили много времени на обезьян в Firebug без удачи ...

Разметка

 <div id="menucontainer">      
      <ul id="menu">              
           <li><a href="google.com"></a></li>
           <li><a href="google.com"></a></li>
           <li><a href="google.com"></a></li>
      </ul>
 </div>

CSS

#menucontainer
{
    display: block;
    float: left;
    width: 100%;
}

ul#menu
{
    display: block;
    padding: 5px 0px 5px 15px;
}

ul#menu li
{
    display: inline;
    padding: 3px;
    border-right: 1px solid #D8D6FF;
    border-left: 1px solid #D8D6FF;
    margin: 0 !important;
}

ul#menu li a
{
    padding: 3px;
    margin:0;
}

Другая информация

Я использую сброс CSS системы сетки 960 (который, кажется, не меняет мою проблему без нее). Мне нужно, чтобы это работало в IE 7+ и Firefox - проблема существует в IE8 и FF.

Answer 1

Вы используете display: inline. Это означает, что пробельные символы между каждым из этих li элементов соблюдаются и будут сведены в один пробел. Если вам нужно, вы можете попробовать вместо этого использовать float s или удалить все пробелы между этими элементами.

 <ul id="menu">              
     <li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a></li>
 </ul>

будет работать, или, если вы склонны использовать поплавки,

#menu li {
    float: left;
}

вместо display: inline

Answer 2

Чтобы следовать решению И Цзяна:

<div id="menucontainer">      
  <ul id="menu">              
       <li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li><!--
    --><li><a href="google.com"></a></li>
  </ul>
</div>

гарантирует, что у вас действительно нет пробелов. Плавающее влево может вызвать проблемы в меню, которое имеет опрокидывание a:hover.