html - 文本缩进 - 在 Safari 中不显示文本

Question

我是编码新手，我在文本缩进和 Safari 浏览器方面遇到了一些问题。

在 chrome 和 firefox 上，一切正常。问题是我制作了两个按钮，一个在另一个按钮上方，文本彼此相邻，但文本未显示在 safari 上。

已经失去了 3 个小时，我不知道该怎么办。

这是 jsfiddle

.btn-group .button {
    background:url(https://image.ibb.co/iSdLzS/red.jpg) no-repeat;
    cursor: pointer;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    transition: 0.3s;
}
.btn-group .button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button:hover {opacity: 0.8
}

.btn-group .button2 {
    background:url(https://image.ibb.co/fskHeS/blue.png) no-repeat;
    cursor: pointer;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    transition: 0.3s;
}
.btn-group .button2:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button2:hover { opacity: 0.8
}

<div class="btn-group">
  <button class="button">Reeeed</button><br>
  <button class="button2">Blue</button>
</div>

Answer 1

Here你会发现一个类似的问题，但我尝试了答案然后没有工作

然后我用 position 完成了那个技巧并尝试了自己，希望它会有所帮助

您必须为文本创建一个 p 标签并将它们定位在 absolute 位置，但使用父按钮 relative 然后将它们垂直居中。

.btn-group .button {
    background:url(https://image.ibb.co/iSdLzS/red.jpg) no-repeat;
    cursor: pointer;
    position:relative;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    transition: 0.3s;
}
.btn-group .button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button:hover {opacity: 0.8
}

.btn-group .button2 {
    background:url(https://image.ibb.co/fskHeS/blue.png) no-repeat;
    cursor: pointer;
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-size: 100%; 
    display: block;
	  text-indent: 105px;
    font-size: 25px;
    font-kerning: normal;
    font-family: Lato,sans-serif;
    text-decoration: none;
    color: #007896;
    border: none;
    opacity: 1;
    position:relative;
    transition: 0.3s;
}
.btn-group .button2:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group .button2:hover { opacity: 0.8
}

button p {
position: absolute;
top: 0;
bottom:0;

}

<div class="btn-group">
  <button class="button"><p>Reeeed</p></button><br>
  <button class="button2"><p>Blue</p></button>
</div>