在前端开发过程中遇到的问题1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/GY_Grace/article/details/72863568

1.在使用Bootstrap框架的过程中,代码没有错误但是元素样式却无法正常显示。

原因可能是导入的js文件顺序不正确。

html文件在加载和执行javaScript文件时,会按照一定的顺序来进行加载和执行,如果导入的代码顺序有误,就可能会导致想要的效果无法正常显示。

因为导入的javaScript文件就是HTML文档的一部分,因此JavaScript在页面装载时,会按照文档中的引入标记<script />的顺序来装载执行各个js文件


2.Font Awesome Font针对IE浏览器的兼容性问题


Font Awesome是在网页开发中十分实用的图标字体,可以使得网页得到极大的美化,使用起来也很方便。

但是在开发的过程中我们发现Font Awesome对IE的兼容性不是很好,有些图标根本无法显示。在查阅了网络资料以后,发现以下方法是实际可用的:

在CSS文件中利用expression表达式输出图标

在IE浏览器中,content:"\f08e";这样的写法是无效的,无法被浏览器正确地解释,但是expression表达式是可以的,因此我们可以把css文件中所有类似的表达都修改为expression表达式,代码如下所示:

.fa-external-link {
  *zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xf08e;');
}

这里的*zoom中的*表示仅对IE浏览器有效

这样,只要在HTML文件中使用<i class="fa fa-external-link"></i>就可以正常使用该图标了。

后来在网上发现了已经做完IE浏览器兼容的Font Awesome资源包,直接使用也是可以的。

猜你喜欢

转载自blog.csdn.net/GY_Grace/article/details/72863568