ul Проблема с раскладкой CSS с Chrome

Question

Я использую bootstrap отзывчивый макет, и у меня есть неупорядоченный список, который отлично выглядит в Firefox, Opera, IE, кроме браузера Chrome (версия 28). В Chrome это выглядит на картинке:

Вот CSS Styling:

ul { 
    margin: 20px; 

    li { 
     border-bottom: 1px solid #E6E6E6; 

     div {        // the icon 
      color: #0085AF; 
      display: inline-block; 
      font-size: 12px; 
      width: 10%; 
     } 

     p {        // the text 
     display: inline-block; 
     float: right; 
     margin-bottom: 0; 
     width: 89%; 

     a { 
      font-family: 'Open Sans',sans-serif; 
      margin-left: 10px; 
     } 
     } 
    } 
} 

Стайлинг обнуляется уль Ли:

ul, li { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
} 

Я не мог понять, какие я должен изменить, не нарушая текущий макет, текст должен совпадать с значком, а над границей - не сидеть на нем! почему он это делает?

Answer 1

использование display: block; вместо display: inline-block;