HTML常见浏览器兼容汇总

HTML常见浏览器兼容汇总

  • 1.标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的;

  • 2.在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动 ;

  • 3.在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动

  • 4.IE6下,最小高度为19px;解决办法:overflow:hidden;

  • 5.IE 6下,1px dotted #000不支持,解决办法:切背景平铺;

  • 6.在IE6下父级有边框的时候,子元素的margin值消失 解决办法:触发父级的haslayout

  • 7.IE6下双边距BUG 在IE6,块元素有浮动和和横向的margin值 ,横向的margin值会被放大成两倍 解决办法: display:inline;

  • 8.①margin-right 一行右侧第一个元素有双边距(margin:第一个元素左侧,最后一个右侧有双边距) ② margin-left 一行左侧第一个元素有双边距

  • 9.① /在IE6,7下,li本身没浮动,但是li的内容有浮动,li下边就会产生一个间隙 解决办法:
    1.给li加浮动,还需要加宽度width:300px;
    2.给li加vertical-align,当IE6下最小高度问题,和 li的间隙问题共存的时候 给li加浮动
    /

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

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

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

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

  • 14.在IE6下绝对定位元素的父级宽和高是奇数的时候,元素的right值和bottom值会有1px的偏差

  • 15.1. /* 在IE6,7下输入类型的表单控件上下各有1px的间隙

    1. 解决办法:给input加浮动
    2. 在IE6,7下输入类型的表单控件加border:none;无效
    3. 解决办法: 重置input的背景 background:#fff;
    4. 在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动
      父级,清掉自身背景
  • 16.在IE6下 在important 后边在家一条同样的样式,会破坏掉important的作用,会按照默认的优先级顺序来走

  • 17.圣杯布局:左右宽度固定,中间宽度自适应伸缩,并且中间先加载

  • 18.img外部的border
    产生条件:img外部有a标签,即img标签有链接时
    解决办法:设置img边框border:0;

  • 19.图片默认有边距
    产生条件:img标签(每个img之后敲了回车)
    解决办法:为img设置float的浮动布局方式

猜你喜欢

转载自blog.csdn.net/Calla_Lj/article/details/89488934