从 chrome 到 firefox 的网站看起来不同答案

【问题标题】：Website appearing different from chrome to firefox从 chrome 到 firefox 的网站看起来不同
【发布时间】：2017-02-21 04:15:44
【问题描述】：

我对我正在设计的网站上的内容如何出现有一些问题。

内容最初是在 chrome 中设计和正常工作的，但是当我在 android 上的 Firefox 或 chrome 中打开该网站时，我遇到了以下问题。

通过输入端的黑色背景和主 div 似乎有一个阴影，该网站正在呈现完全相同。

如果有人遇到过他们能够解决的类似问题，我将不胜感激。

【问题讨论】：

没有来源很难说。从这两张图片的外观来看，我会说在整个 Firefox 版本上都有一个（或更多）类处于活动状态。 Firefox 版本的信息文本区域似乎有一个红色边框。是否有尝试提交和验证失败，并且在某处应用了类？

【解决方案1】：

看起来 Firefox 会自动为 :required 字段添加红色边框。

如果您想覆盖此行为，您可以这样做：

input:required {
    box-shadow: inherit;
}

我最终做了

input:required {
    box-shadow: inherit;
}
input:focus {
    box-shadow: 0px 0px 2px 2px #7AA6ff;
}

具有跨浏览器的标准化行为。

【讨论】：