浏览器的兼容问题

为什么浏览器需要兼容

在W3C出现之前，各种浏览器都是按照自己的规则来解释我们编写的html页面的,所以相同的一个页面，在不同的浏览器上会呈现出不同的效果，可能字体有偏差,也可能某些效果无法实现。而我们想要的效果是自己的页面在任何浏览器打开都是统一的样式，所以我们就需要针对各个浏览器来进行兼容(大多情况都是针对IE浏览器)。

常用的兼容方法

• css hack hack相当于一个选择器 根据浏览器来选择合适的样式

  1. 属性前缀法
     比如只有IE6可以识别 “-” ,我们在设置属性时写成 “-color:red;”,这样就只有IE6下的浏览器才会识别这个属性。同理， IE6/7/8/9/10可以识别"\9" ,IE8/9/10都可以识别 “\0” ,IE9/10可以识别 “\9\0” ，只要在兼容的属性前加上前缀就可以了。

  2. 选择器前缀法
     和属性一样，在特定的选择器前加上对应的前缀，就可以使他们在对应的浏览器中被解析出来

  3. 条件注释法
     这种是IE浏览器独有的hack方式

      格式是 <!--[判断条件]>内容<![endif]-->
      只在IE下生效 
      <!--[if IE]> 
      这段文字只在IE浏览器显示 
      <![endif]--> 
     
      只在IE6下生效 
      <!--[if IE 6]> 
      这段文字只在IE6浏览器显示 
      <![endif]--> 
     
      只在IE6以上版本生效   
      <!--[if gte IE 6]> 
      这段文字只在IE6以上(包括)版本IE浏览器显示
      <![endif]--> 
     
      只在IE8上不生效 
      <!--[if ! IE 8]> 
      这段文字在非IE8浏览器显示 
      <![endif]--> 
     
      非IE浏览器生效 
      <!--[if !IE]> 
      这段文字只在非IE浏览器显示 
      <![endif]--> 
     

常见的兼容性问题

1. 标签的margin和padding
   问题描述：在不加样式控制的情况下,我们写的标签的内外边距都是浏览器默认设置的。
   解决办法：使用通配符(*)来初始化margin和padding,或者在网上找一个浏览器样式统一的css样式文件引入一下。
2. 图片默认有间距
   问题描述：当我们试着用几个img标签的时候,会出现img之间有默认间距的问题,这个问题出现的原因常常是浏览器把换行符或者空格当成了一个字符。
   解决办法：我们可以使用float，或者在img的父标签上设置font-size:0，这样间距就没了。
3. https://blog.youkuaiyun.com/weixin_38536027/article/details/79375411