Как вызвать кроссбраузер FOCUS a элемент с аккуратным контуром?

Question

См. Скрипту: http://jsfiddle.net/stefek99/9m5NZ/1/ Получить источник: http://pastie.org/3654715

Chrome 17 : просто работает.

IE 9 : вам нужно дважды щелкнуть по «клику»

Firefox 11 : вам нужно сосредоточиться на каком-то другом элементе, а затем «щелкнуть» работает.

Почемув том, что? (все перепробовал, понятия не имею)

Answer 1

Прежде всего return false; из ваших обработчиков onclick, в противном случае браузер может перейти по ссылке и принять решение о переносе фокуса в другое место.

Остерегайтесь «перезагрузки CSS» или аналогичной, которые удаляют контуры фокуса. Добавьте свой стиль:

:focus {outline: 2px solid blue;}

С этими двумя модификациями у меня работает .

Что касается "аккуратности" контура, это зависит от браузера. Для этого в WebKit есть специальный -webkit-focus-ring-color. Геккон поддерживает -moz-outline-radius. Для кросс-браузерного стиля вам нужно накатить свой собственный (попробуйте border-image).