как исправить iOS Safari, отображающий стиль тега «а», отличный от браузера?

Question

Довольно простой вопрос. Ниже приведены изображения для справки.

Вот сафари iOS с моего телефона. А вот мой браузер, обратите внимание, что оба они взяты с самого живого сервера.

Ниже приведен код HTML и CSS.

HTML

<div class="about-more-wrapper">
    <a type="button" data-toggle="modal" data-target="#inProgressModal">
        More
    </a>
</div>

CSS

.about-more-wrapper a {
    cursor: pointer;
    color: #666666;
    display: block;
    height: 100%;
    min-height: 40px;
    margin-top: 0;
    padding-left: 1.625rem;
}

.about-more-wrapper a:hover {
    color: #101010;
    text-decoration: none;
}

.about-more-wrapper a::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 5%;
    background-color: #666666;
    height: 20%;
    width: 1px;
}

.about-more-wrapper a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0%;
    left: 5%;
    background-color: #101010;
    height: 0%;
    width: 1px;
}

Как вы можете видеть, на iOS отсутствует кодовое отображение цвета, который присутствует. Буду признателен за любую оказанную помощь. Ура!

Answer 1

Я нашел решение проблемы! Поскольку этот код, по сути, запускает модальный режим bootstrap, я сделал все, что они сказали, из документации, в которой было указано, что type = "button". Это, однако, конфликтует с моим css, так как я не предоставляю какой-либо класс кнопок, и, следовательно, safari просто добавил кнопку по умолчанию css.

. * как мой основной инструмент разработки. Но safari для ma c также показывает то же самое.

Удаление type="button" исправило мою проблему.