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>

标签： htmlcsssafari

Answer 1

在这里您会找到类似的问题，但我尝试了答案然后没有用

然后我已经完成了这个技巧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>