zoukankan      html  css  js  c++  java
  • ie浏览器兼容问题汇总

    对兼容ie浏览器所遇到的问题及总结

    1,若直接给一个元素设置absolute定位。在浏览器缩放的时候。位置会错位。解决的方法是给外层的元素设置为relative定位。

    2,低版本ie浏览器不支持placeholder属性

    3,盒模型上规定了垂直边界重叠,若父元素有一个向上的margin值(10px),其子元素有一个向上的margin值(20px)。重叠部分取大者。因此父元素和上一个div之间出现的是20px的空隙。

    4,使用display:inline-block会导致元素之间有空隙,解决方法:父元素设置font-size:0或采用浮动的方法;

    5,Ie 8及以下不支持透明度的写法,低版本的ie浏览器的透明度写法filter:alpha(opacity:).

    6,在谷歌浏览器中,一个li标签中存在一个a标签和一个span,li标签浮动,a标签旁边会多出来几px。解决方法是a标签进行浮动

    7,要让背景图片使用ie-css.htc的border-radius属性。有bug。很难使用。最好把背景换成img来使用。

    8,关于ie-css.htc的使用方法。Z-index要比周围元素大;要有定位属性;behavior中的路径最好写成绝对路径

    9,ie浏览器低版本的一个bug,透明元素不响应hover事件!

    10,在做区别ie8,ie9的hack的是时候。使用/9,/9/0来实现。发现若是做颜色的hack。可达到目的。若做margin-top的hack。发现在ie8,9下实现的效果是一样的。故猜测此hack只支持部分属性

    11,在ie8里background: url(../images/goods.png)no-repeat!important; 背景图片不显示

    background: url(../images/goods.png) no-repeat!important; 背景图片显示。 差距仅仅是多了个空格。

    12,jquery中的trigger无法触发hover

    13,在低版本ie浏览器下实现使用PIE.htc方法并要使背景透明的方法

    background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);

    -pie-background: url(assets/common/imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); /*路径相对于html页面而言*/

    -ms-border-radius: 350px 350px 0px 0px;

    border-radius: 350px 350px 0px 0px;

    behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/

    14,在ie 6下使用button标签或input type=“button”或input type=“submit”时。并给它们加上border属性的时候。会发现外层绕着一层白色缝隙。解决的办法可以给它本身的css属性border:none 0;并给它加一个嵌套层。给嵌套层加一个border属性。

    15,在ie7下发现padding-bottom属性失效。解决的方法是加上属性overflow:hidden;

    16,在ie6下发现padding-bottom属性失效。解决的方法是让被他嵌套的最后一个元素设置margin-bottom值。

    17,在ie 6下元素有默认的行高。解决方法是overflow:hidden;或font-size:0;或line-height:xx px;

    18,ie 6下快元素进行浮动。并且有横向的margin,实际的margin会比设置的margin多一倍。解决的方法是display:inline;

    19,在各个浏览器下img有空隙(回车的原因)。解决的方法是让图片浮动或给图片的包含层加font-size:0。

    20,两个块元素,竖向的margin值不增加,会重叠,其间距为最大的margin值。

    21,ie6对!important属性不支持

    22,z-index不起作用的bug:

    1)ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签position属性为relative;2、问题标签含有浮动(float)属性。

    2)所有浏览器:它只认第一个爸爸

    层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:

    父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。

    23,css hack:

    _height:100px; /*ie 6专用*/

    *+height:100px; /*ie 7专用*/

    *height:100px ; /*ie6,ie7共用*/

    height:100px; /*ie8,ie9,ie10共用*/

    height:100px9; /*ie6,ie7,ie8,ie9,ie10共用*/

    height:100px9; /*ie9,ie10共用*/

  • 相关阅读:
    配置JDK环境变量
    yum 卸载安装的软件包及依赖
    常用命令--patch
    Git 源码编译安装
    基础Git命令
    下载资源的一些方法
    Python/Jupyter小技巧
    欺诈类Kaggle竞赛赛题描述
    工作小笔记
    进入互联网数据分析岗位需要明白的一些事
  • 原文地址:https://www.cnblogs.com/ckf1988/p/6007651.html
Copyright © 2011-2022 走看看