如何修复 iOS Safari 显示与浏览器不同的 'a' 标签样式？

Question

非常简单的问题。以下图片供参考。

这是我 phone 的 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 冲突，因为我没有提供任何 class 按钮，因此 safari 只是添加了它的默认按钮 css.

我没有看透这一点，因为我使用 Chrome 作为我的主要开发工具。但是 mac 的 safari 也显示相同的内容。

删除 type="button" 解决了我的问题。

如何修复 iOS Safari 显示与浏览器不同的 'a' 标签样式？

how to fix iOS Safari displaying 'a' tag style different then browser?

html

css

safari

ios