1. 首页
  2. 投稿中心

如何解决浏览器css样式兼容问题

今天为大家普及一个小小的知识点,那就是通配符“*”。在做前端的时候很难不会遇到浏览器的兼容问题,特别是遇到IE这种奇葩浏览器的时候。浏览器兼容问题是指不同浏览器的它的标签默认解读规则不一样,在IE浏览器当中能够很好的体现出来。

具体表现:

如何解决浏览器css样式兼容问题

浏览器CSS不兼容对比图

以上图文字并无外边距,两图的标签样式都是一样,那么我们不难看出,该浏览器明显在标签的外边距有距离,而同样样式的标签在另一个浏览器上则显示不同的样式。所以为解决默认样式在不同浏览器的表现,我们通常会用到“样式重置”,也就是用通配符在解决这个问题。

 

解决方法:

对于以上这种浏览器css样式兼容问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。比如在CSS开头写一句:

<style>
*{margin:0;padding:0;}
</style>

margin表示外边距,padding表示内边距,写在样式代码的上方,让浏览器优先识别,数值归0,表示恢复统一默认,也可按要求调整内外边距大小。而*是通配符,用它可以匹配所有的元素,从而省去了一个一个去敲标签名称的麻烦。

通配符常用于工作开发时,记得要注释好,以免沟通不便,因为程序员工作基本上都是有几个人配合完成。当你用不同的浏览器打开同一个文件时,如果觉得某些细节的外边距不一样,记得看看通配符哦!

 

以上来自老张原创分享张投稿,有问题可以留言!!!

本文来自阿南SEO学习博客原创发布,作者:阿南,转载请注明出处::https://www.tzrseo.com/tougao/697.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

阿南SEO

在线咨询:点击这里给我发消息

邮件:tzananseo@163.com

工作时间:周一至周六,13:30-11:30,节假日休息