web前端：有关css的兼容问题

作者:LZH3319 更新于： 2020-03-01 16:24:12

　　随着html的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是css便诞生了。

　　兼容性1

　　页面在不同浏览器中可能显示不同

　　在IE6下子级的宽度会撑开父级设置好的宽度

　　温馨提示：和模型的计算一定要精确，IE浏览器可能显示不同

　　兼容性2

　　在IE6中，元素浮动，如果宽度需要内容撑开，

　　需要给里面的快元素添加浮动才可以

　　兼容性3

　　在IE6,7下，元素要通过浮动{float：left；}排在同一排，就需要

　　解决：给这个元素都加浮动

　　兼容性4

　　注意标签的嵌套规则

　　兼容性5

　　在IE6下，元素的高度如果小于19px的时候，就会

　　当成19px来处理

　　解决方法：overflow：hidden；

　　兼容性6

　　在IE6下不支持1px的dotted边框样式

　　解决：切背景平铺

　　兼容性7

　　在IE下大部分兼容性都是因为haslayout属性

　　的触发问题，尽量触发haslayaout属性可以

　　减少很多IE下兼容性问题

　　在IE下父级有边框的时候，子元素的margin会失效

　　解决：触发父级haslayout属性

　　兼容性8

　　在IE6下双边距bug

　　在ie6块元素，有浮动，有横向margin的值

　　的时候，横向的margin的值会夸大两倍

　　解决：转换为内敛display：inline；

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

　　margin-right以行中右侧的第一个

　　兼容性9

　　在IE67下li本身没有浮动，li里面的内容有浮动，

　　li下会产生一个间隙

　　解决：

　　1.给li加浮动

　　2.给li加vertical-align：top：

　　3.在IE6最小高度，li的间隙问题共存情况

　　加float：left；

　　兼容性11

　　当一行子集的宽度之和父级的宽度相差超过3px，

　　或者子级元素不满行的情况的时候，最后一行子级

　　的margin-bottom会失效。

　　兼容性12

　　在IE6下文字容溢出bug

　　子元素的宽度和父级的宽度如果相差小于3px的时候，两个浮动元素中间有注释或者内敛元素，就会出现文字溢出，

　　内敛元素越多，溢出越多

　　解决：用div吧注释的或内联元素抱起来

　　兼容性13

　　在IE下，当浮动元元素素和绝对定位是兄弟关系的时候，

　　绝对定位会失效

　　解决：

　　不让浮动元素和绝对元素是兄弟关系，用div或者其他标签吧

　　a边检抱起来

　　兼容性14

　　在IE67下，子元素有相对定位，父级overflow抱不住子元素

　　解决：

　　给父级也加相对定位

　　兼容性15

　　在IE6下，如果决定定位的父级宽高是奇数的时候，

　　子级元素的right和bottom的值会有1px的偏差

　　兼容性16

　　在IE67下，输入型的表单标签控件上下会有1px的间隙

　　解决：

　　给input加浮动

　　兼容性17

　　csshack：

　　\\9IE10Z之前的ie浏览器解析代码

　　+或者*表示ie7包括7之前的ie浏览器

　　-表示ie6包括6之前的ie浏览器

　　CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。