2023年6月21日发(作者：)

关于解决不同浏览器之间的兼容性问题常见的浏览器兼容性问题与解决⽅案⼤致有以下九种形式：

　　⼀、不同浏览器的标签默认的外边界和内填充不同　　问题表现：不加样式控制下，margin和padding差异较⼤　　解决⽅案：css⾥ *{margin:0; padding:0;}　　备注：这是最常见也是最易解决的⼀个兼容问题，⼏乎所有的css⽂件开头都会⽤通配符*来设置各个标签外边界和内填充为0

　　⼆、块属性标签float后，⼜有横向的margin情况下，在IE6显⽰margin⽐设置的⼤　　问题表现：IE6后⾯的⼀块被顶到下⼀⾏　　解决⽅案：在float的标签样式控制中加⼊display:inline;转化为⾏内属性　　备注：横向浮动的div布局，使⽤上margin进⾏边界设置时，必然会碰到此问题

　　三、设置较⼩⾼度标签(⼀般⼩于10px)，在IE6、IE7，遨游中⾼度超出设置⾼度值　　问题表现：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度　　解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height⼩于你设置的⾼度　　备注：⼀般出现在设置⼩圆⾓背景的标签⾥。出现该问题原因是IE8之前的浏览器都会给标签⼀个最⼩默认⾏⾼的⾼度，即使标签是空内容，标签的⾼度还是会有默认⾏⾼。

　　四、⾏内属性标签，设置display:block后采⽤float布局，⼜有横向的margin情况，IE6间距bug　　问题表现：IE6的间距⽐超过设置的间距　　解决⽅案：在display:block;后⾯加⼊display:inline;display:table;　　备注：⾏内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在⽤float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，⾼度失效，所有在后⾯补上display:table。

　　五、图⽚默认有间距　　问题表现：⼏个img标签放在⼀块，有些浏览器会有默认的间距，有通配符也不起作⽤　　解决⽅案：使⽤float属性为img布局　　备注：img标签是⾏内属性标签，只要不超出容器⾼度，img会排在⼀⾏⾥，使⽤float是⽐较好的选择

　　六、标签最低⾼度设置min-height不兼容　　问题表现：min-height本⾝就是⼀个不兼容的css属性，所以设置min-height时不能兼容所有浏览器　　解决⽅案：如果设置⼀个标签最⼩⾼度为200px，需要进⾏设置 {min-height:200px; height:auto !important;

height: 200px; overflow:visible;}　　备注：b/s系统前端时，当内容⼩于⼀个值时，容器的⾼度保持该值，当内容⼤于该值时，⾼度⾃适应且不出现滚动条。

　　七、光标⼿形　　问题表现：firefox不⽀持hand，但ie⽀持pointer　　解决⽅案：统⼀使⽤cursor:pointer; 　　⼋、字体⼤⼩定义不同　　问题表现：对字体⼤⼩small定义不同，Firefox为13px，⽽IE为16px，差别⽐较⼤　　解决⽅法：使⽤指定的字体⼤⼩如14px或者使⽤em

　　九、IE6 3px bug　　问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型⼀列固定，第⼆列⾃适应，IE6出现之间3px间隙　　解决⽅法：对左侧left的盒⼦补上_margin-right: -3px;

2023年6月21日发(作者：)

关于解决不同浏览器之间的兼容性问题常见的浏览器兼容性问题与解决⽅案⼤致有以下九种形式：

　　⼀、不同浏览器的标签默认的外边界和内填充不同　　问题表现：不加样式控制下，margin和padding差异较⼤　　解决⽅案：css⾥ *{margin:0; padding:0;}　　备注：这是最常见也是最易解决的⼀个兼容问题，⼏乎所有的css⽂件开头都会⽤通配符*来设置各个标签外边界和内填充为0

　　⼆、块属性标签float后，⼜有横向的margin情况下，在IE6显⽰margin⽐设置的⼤　　问题表现：IE6后⾯的⼀块被顶到下⼀⾏　　解决⽅案：在float的标签样式控制中加⼊display:inline;转化为⾏内属性　　备注：横向浮动的div布局，使⽤上margin进⾏边界设置时，必然会碰到此问题

　　三、设置较⼩⾼度标签(⼀般⼩于10px)，在IE6、IE7，遨游中⾼度超出设置⾼度值　　问题表现：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度　　解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height⼩于你设置的⾼度　　备注：⼀般出现在设置⼩圆⾓背景的标签⾥。出现该问题原因是IE8之前的浏览器都会给标签⼀个最⼩默认⾏⾼的⾼度，即使标签是空内容，标签的⾼度还是会有默认⾏⾼。

　　四、⾏内属性标签，设置display:block后采⽤float布局，⼜有横向的margin情况，IE6间距bug　　问题表现：IE6的间距⽐超过设置的间距　　解决⽅案：在display:block;后⾯加⼊display:inline;display:table;　　备注：⾏内属性标签，为了设置宽度，需要设置为display:block;(表单元素除外)在⽤float布局且有横向margin后，在IE6下，就具有了块属性float后的横向margin的bug。由于设置为display:inline，⾼度失效，所有在后⾯补上display:table。

　　五、图⽚默认有间距　　问题表现：⼏个img标签放在⼀块，有些浏览器会有默认的间距，有通配符也不起作⽤　　解决⽅案：使⽤float属性为img布局　　备注：img标签是⾏内属性标签，只要不超出容器⾼度，img会排在⼀⾏⾥，使⽤float是⽐较好的选择

　　六、标签最低⾼度设置min-height不兼容　　问题表现：min-height本⾝就是⼀个不兼容的css属性，所以设置min-height时不能兼容所有浏览器　　解决⽅案：如果设置⼀个标签最⼩⾼度为200px，需要进⾏设置 {min-height:200px; height:auto !important;

height: 200px; overflow:visible;}　　备注：b/s系统前端时，当内容⼩于⼀个值时，容器的⾼度保持该值，当内容⼤于该值时，⾼度⾃适应且不出现滚动条。

　　七、光标⼿形　　问题表现：firefox不⽀持hand，但ie⽀持pointer　　解决⽅案：统⼀使⽤cursor:pointer; 　　⼋、字体⼤⼩定义不同　　问题表现：对字体⼤⼩small定义不同，Firefox为13px，⽽IE为16px，差别⽐较⼤　　解决⽅法：使⽤指定的字体⼤⼩如14px或者使⽤em

　　九、IE6 3px bug　　问题表现：左侧div浮动left，右边DIV可以接着横向排列，形成典型⼀列固定，第⼆列⾃适应，IE6出现之间3px间隙　　解决⽅法：对左侧left的盒⼦补上_margin-right: -3px;