HTML/CSS IE6、7兼容性问题、bug总汇

IE6，7下li、img的间隙———————————————————

在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙解决办法: 1.给li加浮动,给其父级清浮动2.给li加vertical-align:top;
当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动img元素在本身没有浮动也没有宽高的时候，会距离父级底部有几px间隙解决办法: 1.给img加浮动,给其父级清浮动2.给img加vertical-align:top;

IE6 7最小高度问题————————————————————–

IE6 7 下，元素最小高度为19px;
解决办法:设置 overflow:hidden

IE6下input输入框背景移动问题—————————————————

给输入框设置背景，在标准下背景不会随着输入内容改变
IE6下，当输入内容长度超过输入框，输入内容自动左移时，
输入框的背景会随着输入内容左移。解决办法:
给input加个父级，把本该给input设置的背景设置给父级

IE6下1px dotted不识别问题——————————————————

解决办法:切背景平铺

在IE6下的文字溢出BUG———————————————————–

子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素，子元素中的文本文字会溢出解决办法:用div把注释或者内嵌元素用div包起来

IE6 下奇数宽高问题————————————————————

在 IE6 下定位元素的父级宽高都为奇数，
那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。解决办法: 尽量用偶数做宽高

IE6,7下表单控件问题————————————————————

在IE6，7下输入类型的表单控件上下各有1px的间隙解决办法:给input加浮动在IE6，7下输入类型的表单控件加border:none;不起效果解决办法: 重置input的背景在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动解决办法: 把背景加给父级

IE6 PNG问题——————————————————————–

IE6下PNG背景不能透明。解决办法，用JS组件处理，组件需要自行下载
下载地址http://www.jb51.net/jiaoben/33338.html

    <!--[if IE 6]><script src="DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('.box');/*方法里面填写要起作用的元素*/</script><![endif]-->

IE6下important问题————————————————————

在IE6下 在important 后再在加一条同样的样式，会破坏掉important的作用，
会按照默认的优先级顺序来走

IE CSSHACK————————————————————————

css hack：
\9 IE10之前的IE浏览器解析
+,* IE7包括IE7之前的IE浏览器解析
_IE6包括IE6之前的IE浏览器

【外边距篇】
上下外边距叠压问题—————————————————-

   例如一上一下两个div，上div设置margin-bottom:10px，下div设置margin-top:10px，结果只会让两个margin叠压在一起，而不会相加为20px解决办法:把其中一个margin换成padding

margin传递问题———————————————————-

    IE6,7下父子级包含的时候子级的margin-top会传递给父级；子级的margin-top会消失在IE6下父级有边框的时候，子元素的margin值消失解决办法:触发父级的haslayout (zoom:1)

IE6下最后一个子元素margin消失问题—————————————–

当一行子元素占有的宽度之和和父级的宽度相差超过3px,
或者有不满行状态的时候,最后一个子元素的下margin在IE6下就会失效

IE6下的双边距BUG—————————————————————

在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍
解决办法: display:inline;

【浮动与定位篇】

IE6下内容撑开设置宽高———————————————————-

在IE6下，内容会撑开设置好的宽高
例如，给固定宽度的wrap_div下放left_div、right_div两个div并浮动，
wrap_div的宽度正好放下两个内部div(两个内部div也设置了宽度)。在IE6下，如果left_div或right_div内部内容宽度大于div本身宽度，
内容就会撑开宽度让wrap_div容不下，就会发生折行。解决办法: 给内容计算好宽高，不要溢出

IE6下子元素浮动问题———————————————————

在IE6下，父级下的两个子元素(块元素、未设置宽高)都浮动，
如果两个子元素内部有块元素时，两个子元素不会内容撑开宽高，而会
占满整行。解决办法:在IE6下父级下子元素浮动，如果子元素宽度需要内容撑开，
就给子元素里面的块元素都加浮动

IE6，7下3像素BUG—————————————————————

父级下两个div，左div设置左浮动width:100px，右div设置margin-left:100px
标准浏览器下左div和右div会相连。IE6,7下两者之间会有3px的间距。解决办法:在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动

IE6下绝对定位元素消失———————————————————

当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失解决办法:
给定位元素外面包个div

在IE6，7下父级的overflow包不住相对定位子元素———————————-

在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素解决办法: 给父级也加相对定位

IE6,7 下不支持fixed————————————————————

position:fixed在IE6下失效解决办法:
1.

_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));

2.用JS代替这个效果

HTML/CSS IE6、7兼容性问题、bug总汇相关推荐

ie6下常见的bug 调整页面兼容性
ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...
DIV+CSS页面设计中的IE6的文字溢出BUG
为什么这个div的文字在ie6里会多出3个字符,在页面制作中用DIV+CSS用的多了有时会遇到文字溢出的现象,出现此现象是由IE6的3PX的BUG所引起的. 以下为出现该BUG的实例: <div ...
html 布局兼容性,HTML+CSS入门浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象: ...
在网上找到一个CSS hack列表，记录在这里以分析css的浏览器兼容性
另外摘抄一份目前的css浏览器兼容问题汇总,记录在这里自己好好学习一下 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的 ...
css 如何ie7 兼容性问题,CSS对浏览器的兼容性性处理(IE7,6与Fireofx)
CSS对浏览器的兼容性性处理(IE7,6与Fireofx) 发布时间:2013-08-21 18:57:46 作者:佚名我要评论 IE7,6与Fireofx的兼容性的处理实在是让前端WEB开 ...
IE6,7兼容性问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
CSS+JS实现兼容性很好的无限级下拉菜单
CSS+JS实现兼容性很好的无限级下拉菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://ww ...
ie6,ie7兼容性总结（转）
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...
ie6,ie7兼容性总结
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...
html5 ie7兼容性问题,解决浏览器IE6,IE7兼容性的总结
4.最被痛恨的,double-margin bug.ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍.解决方案,给浮动容器定义display:inlin ...

HTML/CSS IE6、7兼容性问题、bug总汇

HTML/CSS IE6、7兼容性问题、bug总汇相关推荐

最新文章

热门文章