CSS需这样识别火狐Firefox、Chrome浏览器写兼容性代码

技术频道 - html技术

作者:admin 时间:2022-4-23 2:19:59 浏览:

写CSS需要考虑浏览器兼容性问题，Chrome、Firefox火狐、IE等浏览器都会对某些CSS属性不能识别，或者对某些CSS属性值的渲染结果不太一样，从而导致网页排版或样式出现问题。因此，我们要针对不同的浏览器，某些CSS代码要略有不同。

由于Chrome浏览器使用量比较大，所以我现在编写CSS代码都是用Chrome来做主要浏览器调试前端显示效果，然后针对Firefox火狐、IE等浏览器编写独自的代码。为此，我需要用CSS识别火狐Firefox、Chrome、IE等浏览器，让代码能在不同的浏览器执行独自的CSS。

之前用以下代码，可以识别Chrome浏览器

@media screen and (-webkit-min-device-pixel-ratio:0) {}

不过现在发现，这个代码火狐Firefox浏览器也能满足了，也就是，Chrome、Firefox都会运行这个条件里的CSS代码。因此，现在已经不能再用这个代码来识别Chrome浏览器了。

现在可以用以下代码，识别Firefox浏览器。

@-moz-document url-prefix(){}

测试发现，这个代码可以识别Firefox浏览器，Chrome不会读里面的CSS代码。

我们在编写代码时，不用既要识别Chrome，又要识别Firefox，只需识别Firefox浏览器即可。比如下面的代码：

font-size:15px;
@-moz-document url-prefix(){
  font-size:14px;
}

代码的意思是，除了在Firefox浏览器里字体大小是14px，在其余浏览器里的字体大小都是15px。

通过前面的示例代码，应该明白识别Firefox浏览器的CSS代码，同时也应该知道如何去正确编写CSS代码了。

当然了，编写CSS代码，不仅要识别Chrome和Firefox浏览器，其他浏览器也要兼顾才行，以下几篇文章，可以帮助你如何编写识别其他浏览器的CSS代码。