Question

我正在为wordpress主题构建标题。我们正在使用CSS的文本渐变。

＆＃13;

body p.site-description,
body h1.site-title,
body h1.site-title a {
  background-image: -webkit-linear-gradient(left, #DFBB4A, #C889AA, #A3004D);
  background-image: -moz-linear-gradient(left, #DFBB4A, #C889AA, #A3004D);
  background-image: -ms-linear-gradient(left, #DFBB4A, #C889AA, #A3004D);
  background-image: -o-linear-gradient(left, #DFBB4A, #C889AA, #A3004D);
  background-image: linear-gradient(to right, #DFBB4A, #C889AA, #A3004D);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

＆＃13;

<div class="site_info col-lg-4">
  <h1 class="site-title"><a href="#" rel="home">AKA Lily With Some Extra Text</a></h1>
  <p class="site-description">Just another WordPress site but it has a longer name than a wordpress site tagline would normally be</p>
</div>

＆＃13;

在大多数情况下看起来很棒。

Screen at 840px wide

但是，在某些屏幕尺寸（例如839px宽）上，行末（文本换行前）的某些文本会在行的开头重复出现。文本没有添加到DOM或任何东西。浏览器似乎正在获得定位和稍微错误。

Screen at 839px wide - THIS IS ERROR

这种情况发生在最新版本的Chrome和Opera上，但不适用于Firefox。暂时忽略IE。

这只发生在h1 / a标签上，而不是p标签上。

h1 / a标签和p标签具有相同的边距和填充 - 0px。

最后，这是我删除h1样式的结果： Screen at 839px wide with h1 style removed 所以似乎a标签包裹了文本，而h1标签没有，所以它出现在两个地方。

以前有人发生过这个错误吗？我怎么能绕过这个？提前谢谢大家。

在某些浏览器大小上，CSS渐变文本将复制该行末尾的文本

0 个答案: