浏览器的兼容性问题

Posted 2020-10-07

 

 

在chrome下，字体大小小于12px的文字，会按照12px来显示。

解决办法：以图换字；

 

在IE6下，当高度小于19px的时候，高度会被当作19px来处理。（内容的高度）

解决办法：给元素加overflow:hidden;

 

在IE6下，1px的点线边框，会被显示成虚线。

解决办法：用背景图代替；

 

在IE6下，如果元素中既包含文字，又包含inline-block类型的标签，元素的行高会消失。

解决办法：将文字单独包起来，单独设置行高；

 

在IE6，7下，给元素加边框，非但不能阻止元素的内容margin向外传递，还会使子元素的margin消失。

解决办法：触发元素的haslayout；

 

在IE6下，不设置文档声明，浏览器就进入怪异盒模型解析。

可视宽=content+padding+border

怪异盒模型：

     可视宽/高=width/height

     content=width/height-padding-border

标准盒模型：

     可视宽/高=width/height+padding+border

     content=width/height

 

在IE8及之前的IE浏览器中，html5新增的标签都不识别。

解决办法：用JS；

document.creatElement("标签的名字");

在文档中创建一个标签

注意：创建出来的标签默认都是没有display的，需要我们自己去设置display；

 

注意：在IE浏览器中，不支持main标签，需要设置main的display属性；

 

IE7及IE7之前的IE浏览器，都不支持除了(l-v-h-a)之外的伪类。

解决办法：用JS；

 

IE6及IE6之前的IE浏览器，只支持给a标签添加伪类。

 

IE6，7下，不允许把其他类型的元素设置为表格属性。

 

在IE6，7下，不支持把块标签设置为inline-block类型。

 

在IE6，7下，块元素有浮动和横向的margin，横向的margin值会被放大至两倍。

解决办法：转成内嵌；

margin-left     左侧第一个元素有双边距

margin-right     右侧第一个元素有双边距

 

在IE6，7下，一行元素的宽度之和 和 父级的宽度相差等于大于3px，最后一行的下margin失效。

解决办法：无解（不要用下margin）

 

在IE6下，内容会撑开元素设置好的宽高。

 

一行元素记得都加浮动。

在IE6，7下，li里的内容浮动了，但是li本身没有添加浮动，li下边会多出1个间隙。

解决办法：1）给li加浮动（最好不要使用）

                2）给li加垂直对齐方式

 

在IE6下，两个浮动元素之间有注释或者内嵌元素并且浮动元素的宽度和父级宽度相差小于3px，元素最后的文字会被复制。

解决办法：用div把注释和内嵌包起来

 

在IE6，7下，浮动元素的父级，有宽度的情况下，不需要清浮动。

在IE6，7中，没有BFC；

haslayout：当haslayout设置成true时，根据当前元素的父级或者元素自身的内容重新计算当前元素的宽高尺寸。

haslayout触发条件：

     display:inline-block;

     height:（任何值除了auto）

     float；（left或right）

     positon:absolute;

     width:（任何值除了auto）

     writing-mode:tb-rl;

     zoom:（除normal外任意值）     缩放 （倍数）                   在火狐浏览器下不支持zoom

IE7还有一些额外的属性（不完全列表）：

     min-height:（任意值）

     max-height:（除none外任意值）

     min-width:（任意值）

     max-width:（除none外任意值）

     overflow:（除visible外任意值）

     overflow-x:（除visible外任意值）

     overflow-y:（除visible外任意值）

     position:fixed;

 

在IE6下，浮动元素和绝对定位元素是并列关系，绝对定位元素会消失掉。

解决办法：把定位元素单独包起来；

 

在IE6，7下，元素有相对定位的话，父级的overflow对于这个元素不起效果。

解决办法：给父级添加相对定位；

 

在IE6下，通过margin使元素移出父级的部分，会被父级截掉。

解决办法：给元素添加相对定位；

 

在IE6下，定位父级的宽高是奇数的话，元素（绝对定位）的right和bottom值会有1px的偏差。

解决办法：无

 

在IE6下，不支持固定定位（最大最小宽高）

解决办法：用JS模拟；

 

在IE6，7下，不支持inherit这个属性值。

 

在IE8及IE8之前的IE浏览器，不支持opacity。

解决办法：用filter代替；

     filter:alpha(opacity=0-100)

 

在IE6，7下，输入类型表单控件，上下各有1px的间隙。

解决办法：给元素添加浮动；

 

在IE6下，表单控件设置border:none 无效。

解决办法：1）border:0;

                2）重置元素背景；

 

在IE6，7下，输入类型表单控件添加背景图，输入文字的时候，背景会随着元素一块移动。

解决办法：背景图片加给父级；

 

图片的格式：

GIF：支持透明，不支持透明度

JPEG：不支持透明

PNG-24：支持透明，支持透明度

 

在IE6下，不支持PNG的透明。

解决办法：1）用JS

                2）_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/img.png",sizingMethod="crop");

 

<!--[if IE]>

<![endif]-->

条件注释语句IE9及IE9之前的IE浏览器支持；

gt：greater than，选择条件版本以上版本，不包含条件版本

lt：less than，选择条件版本以下版本，不包含条件版本

gte：greater than or equal，选择条件版本以上版本，包含条件版本

lte：less than or equal，选择条件版本以下版本，包含条件版本

例：<!--[if gt IE6]>

      <h2>gt</h2>

      <![endif]-->

 

css hack：

     \0     IE8-IE11

     \9     IE6-IE10

     *,+     IE7-IE6

     _     IE6

 

注意：在IE6下，在important后边紧跟一条一样的样式，会破坏掉important的作用，这样就按照默认的优先级顺序显示。