Question

我已经尝试过类似问题的解决方案，但我一生都无法弄清楚如何让文本显示在 Safari 中我糟糕的自定义按钮之上！它们在 Chrome 和 Firefox 中完美显示……但这当然对 iOS 用户没有帮助。

关于如何让这些文本正确显示在预期背景之上的任何建议？

HTML：

<a href="#" class="dark-button border">Register</a>
<a href="#" class="light-button border">Register</a>

CSS：

/* Hexagon Button Style */
.dark-button,
.light-button{
  position: relative;
  display: block;
  background: transparent;
  width: 280px;
  height: 48px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1.8px;
  text-decoration: none !important;
  text-transform: uppercase;
    font-weight:600;
  margin: 15px auto;
  font-family: Orbitron, Helvetica, sans-serif;
 
}
.dark-button:before,
.dark-button:after,
.light-button:before,
.light-button:after{
  position: absolute;
  content: '';
  width: 280px;
  left: 0px;
  height: 24px;
  z-index: -1;
}

.dark-button:before,
.light-button:before{
  transform: perspective(8px) rotateX(3deg);
}
.dark-button:after,
.light-button:after{
  top: 24px;
  transform: perspective(8px) rotateX(-3deg);
}

/* Hex Button color styles */
.dark-button{
    color: #ffffff;
}
.light-button{
    color: #2c2a2b;
}
.dark-button.border:before,
.dark-button.border:after {
  background: #2c2a2b;
}
.light-button.border:before,
.light-button.border:after {
  background: #ededed;
}
/* Hex Button hover styles */
.dark-button.border:hover:before,
.dark-button.border:hover:after,
.light-button.border:hover:before,
.light-button.border:hover:after{
  background: #BDBDBD;
}
.dark-button.border:hover,
.light-button:hover{
  color: #ffffff;
}

>> Here's the CodePen link

Answer 1

正如问题中所暗示的那样，确实出现了各种转换造成的问题。非空转换可以创建一个新的堆栈上下文 - 尽管我不知道为什么不同的浏览器以不同的方式对待转换的聚合。

但是，我想建议一种更简单的创建外观的方法 - 在锚元素上使用剪辑路径。这消除了对伪元素和转换的需要，因此就堆叠上下文而言使事情变得简单。

此代码段只有绿色按钮所需的 CSS，但其他按钮的原理相同。并且您会想要在剪辑路径上使用 % 设置来获得您想要的尖尖外观。

/* Hexagon Button Style */


/* Green Button Style */

.green-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 48px;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.8px;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: #ffffff;
  margin: 15px auto;
  font-family: Orbitron, Helvetica, sans-serif;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  background-color: #4f9f45;
}

.green-button:hover {
  color: #ffffff;
}

<a href="#" class="green-button border">Register</a>

注意：IE 不支持剪辑路径，因此如果 IE 仍在使用，用户可能不得不忍受矩形按钮。

z-index 在 safari 上失败 - 是转换问题吗？

1 个答案: