插入文字效果适用于Chrome，但不适用于Firefox

Question

我有这个JSFiddle，它可以很好地用于Chrome：

但是在Firefox中，它不会像你在这里看到的那样：

要关注的实际CSS是：

.inset-text-effect {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  -webkit-border-radius: 0 50px 50px 100px / 0 100px;
  border-radius: 0 50px 50px 100px / 0 100px;
  font: normal 70px/1 "Comic Sans MS", cursive, sans-serif;
  color: rgba(48,48,48,1);
  text-align: justify;
  text-transform: normal;
  text-indent: 44%;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 68%, rgba(0,0,0,0) 100%);
  background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 68%, rgba(0,0,0,0) 100%);
  background: linear-gradient(45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 67%, rgba(0,0,0,0) 68%, rgba(0,0,0,0) 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-box-shadow: 0 0 9px 4px rgba(255,255,255,0.5) inset;
  box-shadow: 0 0 9px 4px rgba(255,255,255,0.5) inset;
  text-shadow: 1px 1px 0 rgba(140,140,140,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;
  -webkit-transform: rotateX(-25.21014298575622deg) rotateY(-38.38deg) rotateZ(-18.0535228296deg)   ;
  transform: rotateX(-25.21014298575622deg) rotateY(-38.38deg) rotateZ(-18.0535228296deg)   ;
}

完整摘录：

＆＃13;

＆＃13;

body {
  background: #3fa46a;
}
.inset-text-effect {
  display: inline-block;
  box-sizing: content-box;
  border: none;
  border-radius: 0 50px 50px 100px / 0 100px;
  font: normal 70px/1"Comic Sans MS", cursive, sans-serif;
  color: rgba(48, 48, 48, 1);
  text-align: justify;
  text-transform: normal;
  text-indent: 44%;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
  box-shadow: 0 0 9px 4px rgba(255, 255, 255, 0.5) inset;
  text-shadow: 1px 1px 0 rgba(140, 140, 140, 0.6), -1px -1px 1px rgba(0, 0, 0, 0.67);
  transform: rotateX(-25.21014298575622deg) rotateY(-38.38deg) rotateZ(-18.0535228296deg);
}

＆＃13;

<nav class="cl-effect-9">
  <div class="inset-text-effect">iCage</div>
</nav>

＆＃13;

＆＃13;

＆＃13;

CSS是从enjoycss自动生成的。

Answer 1

问题和解决方案

Firefox不包含text-indent，因此请改用padding-left。

其他想法

自动生成的CSS有一些前缀属性。要查看是否有必要，请检查caniuse.com上任何CSS属性的浏览器兼容性。另外，using Comic Sans is a criminal offense！

实施例

body {
  background: #3fa46a;
}
.inset-text-effect {
  display: inline-block;
  box-sizing: content-box;
  border: none;
  border-radius: 0 50px 50px 100px / 0 100px;
  font: normal 70px/1"Comic Sans MS", cursive, sans-serif;
  color: rgba(48, 48, 48, 1);
  text-align: justify;
  text-transform: normal;
  padding-left: 44%;
  text-overflow: clip;
  white-space: pre;
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 0) 67%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
  box-shadow: 0 0 9px 4px rgba(255, 255, 255, 0.5) inset;
  text-shadow: 1px 1px 0 rgba(140, 140, 140, 0.6), -1px -1px 1px rgba(0, 0, 0, 0.67);
  transform: rotateX(-25.21014298575622deg) rotateY(-38.38deg) rotateZ(-18.0535228296deg);
}

<nav class="cl-effect-9">
  <div class="inset-text-effect">iCage</div>
</nav>