关于IE浏览器的兼容性问题

Posted 2020-10-14

这周老师教了我们关于浏览器兼容性问题，如何让不同的浏览器兼容也是我们程序师要为客户解决的问题，
无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

在最开始做网页中我们也会用到设置布局的方式来适应不同的屏幕大小的兼容，适应台式电脑、笔记本电脑、各种手机、平板。

我们会用到如下的方式

有时候我们网页做出来的效果会把一行挤到下一行去，没有那么的大身子却占用一大块空间，我们常用div标签，而div标签就是一个典型的块属性标签它把一行占满，其他的就移动不上去，我们就会用到 display:inline;将其转化为行内属性：

现在我们还学了css hack 的原理，由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。学习了这个之后，原来各版本不同的浏览器显示不同，让我找到了问题所在，让我稍稍了解了怎么去适应浏览器展现效果的问题

通过 IE 的条件注释 来完成条件注释：        

与html注释相似<!-- -->  if条件判断是否能够解析注释里的内容

gt : 选择条件版本以上的版本(不包含条件版本)       gt ie 7  

lt : 选择条件版本以下的版本(不包含条件版本)       lt ie 8

gte :选择条件版本以及以上版本       gte ie 7  

lte :  ! :选择条件版本意外的所有版本      ! ie6

 我们通过实践得到

* 或 # ，IE7、IE11 支持。
     \\9 ，IE8、IE9、IE11 支持。
     \\0 ，IE8、IE9 IE10 支持。
      *、#、\\9、\\0 这几个写法除了IE外其他浏览器均不支持。