文本缩进 - 在 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

在这里你会发现一个类似的问题，但我尝试了答案然后没有用

然后我用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>