Question

昨天我在网站上发现了一个小问题。我的Box-Shadows在大多数浏览器上看起来都不同。它曾经是红色的（Firefox和IE），但有几个看起来完全不同：

歌剧：橙色
Chrome：Violet
Safari：Blue

怎么会发生这种情况？

我的CSS看起来像：

input.test {
  ...
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  ...
}

input.test:focus {
  ...
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(159, 48, 57, 0.6);
  ...
}

这可能是我也使用的过渡吗？或者这样正常吗？

过渡css：

input.test {
  ...
  -webkit-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  -moz-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  -o-transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  transition: border-color 0.75s ease-in-out, box-shadow 0.75s ease-in-out, color 0.75s ease-in-out, background 0.75s ease-in-out;
  ...
}

希望有人可以帮助我。我真的希望每个浏览器上的盒子阴影颜色相同。

Answer 1

好的我发现了： Opera，Chrome和Safari（可能更多）浏览器在表单元素上使用自动轮廓：焦点。因此，他们可以改变你的盒子阴影的外观，特别是如果你使用它的不透明度。

要摆脱这些问题，请使用：

input:focus, textarea:focus {
  outline: 0 none;
}

这里发生了一些类似的问题： how to remove textbox outline in Opera

不同浏览器的盒子阴影中的不同颜色？

1 个答案: