IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

时间: 2018-03-12阅读: 1454标签: 浏览器

1、IE6不支持min-height,解决办法使用css hack:

.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下内容高度超过会自动扩展高度
}


2、ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;


3、未定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:1)子元素去掉position: relative;; 2)不能为子元素去掉定位时,父元素position: relative;

<style type="text/css">
.outer {
    width: 215px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
    position: relative;  /* 修复bug */
}
.inner {
    width: 100px;
    height: 200px;
    background-color: purple;
    position: relative;
}
</style>

<div>
    <div></div>
</div>


4、IE6只支持a标签的:hover伪类,解决方法:使用js为元素监听mouseenter,mouseleave事件,添加类实现效果:

<style type="text/css">
.p:hover,
.hover {
    background: purple;
}
</style>

<p id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/JavaScript">
function addClass(elem, cls) {
    if (elem.className) {
        elem.className += ' ' + cls;
    } else {
        elem.className = cls;
    }
}
function removeClass(elem, cls) {
    var className = ' ' + elem.className + ' ';
    var reg = new RegExp(' +' + cls + ' +', 'g');
    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
    target.attachEvent('onmouseenter', function () {
        addClass(target, 'hover');
    });
    target.attachEvent('onmouseleave', function () {
        removeClass(target, 'hover');
    })
}
</script>


5、IE5-8不支持opacity,解决办法:

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}


6、IE6在设置height小于font-size时高度值为font-size,解决办法:font-size: 0;


7、IE6不支持PNG透明背景,解决办法: IE6下使用gif图片


8、IE6-7不支持display: inline-block解决办法:设置inline并触发hasLayout

    display: inline-block;
    *display: inline;
    *zoom: 1;


9、IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法: 1)使用padding控制间距。 2)浮动元素display: inline;这样解决问题且无任何副作用:css标准规定浮动元素display:inline会自动调整为block


10、通过为块级元素设置宽度和左右margin为auto时,IE6不能实现水平居中,解决方法:为父元素设置text-align: center;

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/495

关闭

浏览器fps、requestAnimationFrame() 以及 requestIdleCallback()

最近在研究 react 源码(v16.8)的过程中,发现 react 使用了 requestAnimationFrame 和 requestIdleCallback 这两个 api。同时,这两个 api 与 浏览器的 fps 存在着关系。

浏览器缩放,会导致布局打乱,解决方法?

在刚学会做自适应的时候,我们喜欢用百分比定义宽度,却会遇到这样一个现象,如果页面头部样式定义了宽度100%,那么当浏览器窗口缩放的时候就会发现有部分内容被截断或显示不全。 原因通常就是你的元素浮动了

Js实现阻止浏览器返回的功能

无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回

如何判断浏览器是否支持css3?

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。

从浏览器输入 URL 到页面展示过程

对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

JS 识别安卓还是ios苹果、识别是否微信内置浏览器、手机类型

识别手机平台是IOS还是安卓;识别是否微信内置浏览器;识别移动终端手机品牌

如何编写同时用于 Node 和浏览器的 JavaScript 包

我多次看到大家在这个问题上产生困惑,甚至经验丰富的 JavaScript 开发者都可能错过它的一些微妙之处。所以我认为应该写这么一个简短的教程。假设有一个 JavaScript 模块想发布在 npm 中,它既能在 Node 中运行,又能在浏览器中运行

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

window.open被拦截的解决方法总汇

介绍window.open方法被浏览器拦截的处理方式。在 Chrome 的安全机制里,非用户直接触发的 window.open 方法,是会被拦截的,这是由于浏览器为了维护用户安全和体验,下面采用几种变通方法解决:表单提交的方式、onclick事件、延迟打开等

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!