меню Выпадающее не работает на сафари

Question

У меня есть простое выпадающее меню, которое работает на хром/Firefox без каких-либо проблем, но не работает на сафари - в меню просто не появляется на нажатие кнопки:

<div> 
    <a id='action-btn-1' href='#' data-toggle='dropdown' class='btn btn-default btn-xs edit' aria-haspopup='true' aria-expanded='false' role='button'> 
     <span class="caret"></span> 
    </a> 
    <ul class='dropdown-menu text-left' role='menu' aria-labelledby='dLabel'> 
     <li>aaa</li> 
     <li>bbb</li> 
    </ul> 
</div> 

Что здесь может быть неправильно?

Answer 1

role='menu' не поддерживается в Safari под элементом ul.

Вам необходимо использовать <select> elelemt.

Answer 2

Ну ... вы используете функции ARIA. Я время от времени слежу за этой технологией, просто из интересов. Хотя следует отметить, что ARIA не так широко поддерживается в этот момент (февраль 2017 года). Вы можете иметь хороший обзор поддержки браузера по функциям ARIA here.

Но этот стол является неопределенным и не поддерживается должным образом. Вы должны щелкнуть по каждому элементу, чтобы узнать, какая строка - что ... Нелегко узнать, какой браузер поддерживает то, что.

<ul class='dropdown-menu text-left' role='menu' aria-labelledby='dLabel'> 
    <li>aaa</li> 
    <li>bbb</li> 
</ul> 

Проблема здесь role='menu'. Вы должны сначала проверить, поддерживает ли Opera. И если это так, возможно, они следовали спецификациям более строго, чем другие браузеры (например, firefox). Возможно, вы можете попробовать добавить menuitem -role, чтобы проверить, не является ли это.

<ul class='dropdown-menu text-left' role='menu' aria-labelledby='dLabel'> 
    <li role="menuitem">aaa</li> 
    <li role="menuitem">bbb</li> 
</ul> 

Если он не работает, то это может быть, что Safari не поддерживает его еще. Если это так, вы можете использовать вместо этого элемент select.