【问题标题】:Page doesn't work as intended in Firefox but works fine in chrome页面在 Firefox 中无法正常工作,但在 chrome 中可以正常工作
【发布时间】:2020-01-31 15:39:39
【问题描述】:

所以我有一个带有电子邮件和密码输入的登录框。我有一些 javascript 可以让它在不为空时改变样式。每当输入聚焦时,我的 CSS 都会移动占位符。在我在 Firefox 中尝试之前,这一切都很好。 首先,当占位符向上移动时,即使它具有display: block 样式,它也会消失。
其次,在输入一些文本然后清空然后不再关注输入之后,输入顶部会出现一条奇怪的线。
我试过改变一些风格,但到目前为止没有任何效果。
这是我的 jsfiddle 页面的链接:https://jsfiddle.net/Etibi/z231ogeL/

【问题讨论】:

标签: javascript html css google-chrome firefox


【解决方案1】:

首先,文字消失了,因为background-clip: text只存在于webkit中,而Firefox中没有解决方案,这就是它什么都不显示的原因。

https://stackoverflow.com/a/4743930/3930247

https://stackoverflow.com/a/9363156/3930247

在 Firefox 中有一些渐变文本的解决方案,例如使用 SVG。另请查看:https://codepen.io/giana/pen/RPdLaQ

【讨论】:

  • 好的,既然是这样,为什么它说caniuse支持它?还是 caniuse 错了?
  • 页面显示:“根据 WebKit 博客,剪辑中不包含文本装饰或阴影。”
  • 这是什么意思?
猜你喜欢
  • 1970-01-01
  • 2022-08-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-15
  • 2011-03-31
  • 1970-01-01
相关资源
最近更新 更多