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

Question

我是编码的新手，我在文字缩进和野生动物园方面遇到了一些问题。

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

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

以下是jsfiddle

＆＃13;

＆＃13;

.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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>