встраиваемыми ссылки значок имеют странное поведение на (некоторых) андроид устройств

Так вот крошечная jsFiddle:встраиваемыми ссылки значок имеют странное поведение на (некоторых) андроид устройств

<html> 
    <head> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <style> 
     .navButton { 
     font-size:30px; 
     height:43px; 
     text-align: center; 
     } 
    </style> 
    </head> 
    <body> 
    <div style="display:inline-block"> 
     <a class="navButton" href="#"><i class="fa fa-camera"></i></a> 
     <a class="navButton" href="#"><i class="fa fa-camera"></i></a> 
     <a class="navButton" href="#"><i class="fa fa-camera"></i></a> 
    </div> 
    <div style="display:inline-block"> 
     <a class="navButton" href="#">Bla</a> 
     <a class="navButton" href="#">Bla</a> 
     <a class="navButton" href="#">Bla</a> 
    </div> 
    </body> 
</html>

Он ведет себя прекрасно довольно много везде, но на моем LG G2 и Galaxy Note нативный браузер 2 телефона (он отлично работает в приложении Chrome), когда я нажимаю одну из правильных ссылок на камеру, он отображает белый прямоугольник, который покрывает примерно половину значка слева от него, следующим образом (здесь я коснулся правой камеры):

enter image description here

Отладка этой проблемы на chrome: // проверка не показывает абсолютно никакой подсказки: ни одно свойство CSS ни одного из элементов не изменяется при нажатии ссылки. При проверке на дисплее не отображаются маргинальные или дополнительные цвета в элементах. Используя инструменты разработчика, этот белый прямоугольник порождается при принуждении любого из трех состояний. (: active,: hover,: focus)

Это похоже ... ошибка? Даже если это так, любая идея, как я мог избежать этого эффекта с тем же видом рендеринга?

Кроме того, по-видимому, это на самом деле не белый оверлей, этот дефект только покрывает значки с «прозрачностью», как показано на этом изображении с background-color: red на теле:

enter image description here

источник

2015-02-26 SylvainB

Вы должны определить фиксированную ширину oh – dwkd

+0

Пробовал [там] (http://jsfiddle.net/1bjbyqxb/6/) все еще есть эти белые квадраты, покрывающие другие значки, даже когда я касаюсь текстовых ссылок в нижний div. Но [весь текст] (http://jsfiddle.net/1bjbyqxb/7/) работает нормально. Кроме того, это все равно, даже не используя i, как показано [здесь] (http://jsfiddle.net/1bjbyqxb/10/) – SylvainB

+0

Пробовали ли вы вместо этого использовать встроенный блок или блок? Извините, у меня есть HTC, и я выгляжу прекрасно там, поэтому я не могу его дублировать. – dwkd

@font-face { font-family:'FontAwesome'; src:url('/font-awesome/fonts/fontawesome-webfont.eot'); src:url('/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'),url('/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'),url('/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),url('/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'); font-weight:normal; font-style:normal; }

встраиваемыми ссылки значок имеют странное поведение на (некоторых) андроид устройств

ответ

Смежные вопросы