Отображение меню в IE?

Question

[Soho]

Как сделать чтобы в IE отображались стрелки не под ссылкой, а рядом. В Chrome все отлично. вот ссылка на меню Меню

Answer 1

[Soho]

спасибо за ответы, все это пробовал проверил, перед тем как писать вопрос. Фишка в том, что там есть и суб меню, и стрелка прилепает, по этому float:нельзя убирать, есть ли возможность использовать float только в Chrome? а в IE например без него.

Comments

[rapkin]

можно подключать отдельный файл CSS если это эксплорер, делается это подобной конструкцией

<!--[if lt IE 9]>
    <link rel="stylesheet" href="css/ie.css">
  <![endif]-->

но чувствую что можно обойтись и без float, если бы видел все код, то возможно что-то бы придумал

[Soho]

как именно в css сделать, через * пробовал и // не выходит, не могу понять почему

[rapkin]

focuspro: я здесь попытался организовать нужный функционал, код пришлось существенно изменить ... даже не знаю как вам удастся его перенести на сайт codepen.io/anon/pen/jEQNjW?editors=110

[Soho]

rapkin: спасибо поробуем

[rapkin]

focuspro: "как именно в css сделать, через * пробовал и // не выходит, не могу понять почему". это вставляется в html

[Soho]

все-таки костыль сделал))) @supports (top: 0__qem)

Answer 2

[Михаил Горячкин]

Замените в .menu-item-has-children a:after float: right на display: inline-block. Или просто уберите float.
Будет работать и так:

.menu-item-has-children a:after { 
  content: "\f0d7"; 
  margin: 2px 0px 0px 6px; 
  display: inline-block;
  opacity: 0.5; 
  font-family: FontAwesome;
}

и так:

.menu-item-has-children a:after { 
  content: "\f0d7"; 
  margin: 2px 0px 0px 6px; 
  opacity: 0.5; 
  font-family: FontAwesome;
}

Answer 3

[rapkin]

Михаил Горячкин уже написал решение, но из-за высоты элемента с треугольником, получим смещение (на скриншоте).
Здесь переписано с использованием абсолютного позиционирования (в IE должно работать)
codepen.io/anon/pen/jEQNjW?editors=010