Question

我的UI中存在浏览器兼容性问题。在Firefox中我面临一些UI破坏问题，在Chrome中我没有任何问题。所以我的团队说尝试一些不依赖于浏览器的CSS属性可以解决这个问题那么有谁可能知道这个？

 <li align="center" ng-show="showLoadingIcon">
                <img src="app-vrm/img/loader.gif"/>
            </li>

这就是加载掩码的代码。如果更改从中心向左，向左或对齐对齐。这在chrome中正常工作但在Firefox中加载掩码始终在左侧加载。它应显示在屏幕中央

Answer 1

一个好的起点是确保通过创建reset.css文件从同一点开始。此文件确保每个浏览器例如P-tag的margin-top总是5px。网上有大量资源

此外，您应该查看W3Schools表，了解浏览器兼容性here。

最后但并非最不重要的是，要注意一些CSS3标签尚未实现，因为它们太现代了＃39;或者您的浏览器太旧了。

一个好的CSS验证器可能有所帮助。在Google Chrome（或Iron Browser或Chromium）中，您可以启用开发人员工具并查看控制台是否存在错误，或安装扩展程序（Web Developer for Firefox与Firebug一起使用）。或者，如果您的网站在线，请使用W3 CSS validator

进行验证祝你好运！

Answer 2

我创建了一个跨浏览器中心对齐图像。主要有用的是具有边距和显示属性的img。请在此链接查看工作解决方案：网址：http://codepen.io/krunalv/pen/gborwo

 .loadingImage-wrapper li img{
  height: 50px;
  width: 50px;
  display: block;      
  margin: 0 auto;
}

Answer 3

我解决了这个问题........我更改了代码而不是

align="center"

我添加了

style="text-align:center;"

所以这个属性也在Firefox中运行。

我真的要感谢那些帮助我找到解决方案的人。每当你给出一些答案时，我都会收到很多新的东西。

哪个CSS属性不依赖于Browser

3 个答案: