HTML-ссылка по умолчанию на синем на мобильных устройствах

Это, наверное, что-то невероятно простое, что мне не хватает, но по какой-то причине мой текст в тексте HTML по умолчанию синим цветом, несмотря на то, что в CSS не было убрано текстовое украшение.HTML-ссылка по умолчанию на синем на мобильных устройствах

HTML, отображается как таковой -

\t .BecomeMemberBtn 
 
    { 
 
    display: block; 
 
    width: 100%; 
 
    height: 40px; 
 
    background: #34b629; 
 
    padding: 10px; 
 
    text-align: center; 
 
    border-radius: 4px; 
 
    font-weight: bold; 
 
    text-decoration:none !important; 
 
    font-size:11px; 
 
    color: #FFF; 
 
    webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border: solid 1px #20538D; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    }

<p><a class="BecomeMemberBtn" href=".../become-a-member">Become A New Member</a></p>

Когда я запускаю код здесь, он отображает в белом, как и положено, но когда я проверить его на мобильных устройствах (Android & iPhone), он отображает синий по умолчанию, что делает его нечитаемым на фоне зеленого фона этой кнопки.

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

.MobSampleBtn 
 
    { 
 
    display: block; 
 
    width: 100%; 
 
    height: 40px; 
 
    background: #1e558d; 
 
    padding: 10px; 
 
    text-align: center; 
 
    border-radius: 4px; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    text-decoration:none; 
 
    font-size:10px; 
 
    webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border: solid 1px #20538D; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    }

<p><a class="MobSampleBtn" href=".../Sample/True">Download Free Sample</a></p>

Мой вопрос - почему ли BecomeMemberBtn по умолчанию синий текст на мобильных устройствах, но MobileSampleBtn меняется на белый, как и предполагалось?

источник

2016-09-14 nobetterdan

Это не имеет ничего общего с 'текстовым decoration' –

Также [** ссылки не являются кнопки **] (HTTP: // WWW .karlgroves.com/2013/05/14/links-are-not-buttons-not-are-divs-and-spans /) –

Поскольку регулярные состояния определены в коде одинаково, разница может возникать из стилей для состояния :visited. Поэтому убедитесь, что вы также добавить стили для:

.BecomeMemberBtn:visited, 
 
.MobSampleBtn:visited { 
 
    color: #fff; 
 
}

источник

2016-09-14 10:17:50 skobaljic

Возможно, это глупый вопрос, но он бы: посетил только после того, как пользователь нажмет кнопку? Кажется, что происходит, что цвет по умолчанию всегда синий. – nobetterdan

': visited' - это стиль для страниц, которые вы посетили, открытые в браузере. Я предполагаю, что вы уже посетили одну из этих двух страниц, и поэтому цвет для одной ссылки отличается. Стилирование состояния активной ссылки/кнопки (когда пользователь нажимает кнопку/ссылку) управляется добавлением селектора ': active'. – skobaljic

Это решило! – nobetterdan

Свойство CSS text-decoration относится только к underline. Что вы хотите (пере) установить его color собственности.

Если вы используете внешние файлы CSS, также обязательно очистите кеш.

источник

2016-09-14 10:10:09

Вы знаете, я всегда думал, что текстовое оформление применяется ко всему форматированию, которое будет применяться к кнопка. – nobetterdan

HTML-ссылка по умолчанию на синем на мобильных устройствах

ответ

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