Span внутри тега привязки блокирует событие касания для Safari на iPhone
Я сделал обычную ссылку, чтобы она напоминала кнопку в нашем мобильном приложении на базе Sencha Touch 2, и у меня возникли проблемы с тем, что большая часть ссылки не работает в Safari на iPhone.
Ссылка представляет собой обычный тег с внутренним элементом , содержащим текст метки. В элементе есть отступы, которые позволяют регистрировать касания. Похоже, что внутренний элемент блокирует регистрацию касаний в родительском якоре как касание ссылки, а его фон прозрачен.
Вот разметка:
<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
<span class="x-button-label">View profile on full site</span>
</a>
Тестирование в Chrome не представляет никаких проблем, т. е. щелчок по диапазону приводит к переходу по родительской гиперссылке. Оба браузера основаны на Webkit. Один из наших тестировщиков также без проблем проверил это в Safari на Macbook; Я также без проблем протестировал это в Chrome с помощью планшета Wacom Bamboo. Это проблема только на мобильных устройствах (проверено как на iPhone, так и на Android 2.2) — это то, на что мы нацелены.
Есть ли свойство CSS, которое я могу установить для элемента , чтобы разрешить нажатия на родительскую гиперссылку? В идеале я хочу избежать необходимости устанавливать события через JavaScript. Любые идеи относительно того, почему это не работает, как я ожидал?
Обновление: Вот стили для внутреннего диапазона, о которых сообщила консоль разработчика Chrome:
-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
Большое спасибо.