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

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

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

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

防止用户在浏览器下调试查看js代码

浏览器可以通过F12或者鼠标右键的形式打开html页面,然后就可以看到页面的的信息,如dom结构,加载文件、请求信息等。那有没有办法禁止掉这一行为呢?

javascript如何判断浏览器类型?

不同的浏览器有不同的属性,你知道怎么来判断浏览器的类型吗?下面我们来看一下如何使用JavaScript判断浏览器类型。使用浏览器的userAgent来判断,userAgent是navigator的属性方法,可以返回客户机发送服务器的头部信息。

Chrome浏览器所有页面崩溃

Chrome浏览器所有页面崩溃,包括设置页面,喔唷,崩溃啦!显示错误码:STATUS_INVALID_IMAGE_HASH,Chrome所有插件报错,右下角一串弹框

浏览器引入gRPC的现况

gRPC 1.0于2016年8月发布,现已发展成为应用通信的首选技术解决方案之一。它已被全球的初创公司、企业公司和开源项目采用。它对多语言环境的支持、关注性能、类型安全性和开发者生产力已经改变了开发者设计架构的方式。

Chrome浏览器语音自动播放功能

Chrome浏览器为了屏蔽带声音的骚扰广告,从66版本后不再允许自动播放语音,我做的项目需要实时语音提示报警信息,网上搜索了好久都说不再支持自动播放,知道碰到一个大神提供建议设置Chrome浏览器允许声音自动播放:

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

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

浏览器内核有哪些?主流浏览器的所使用的内核介绍

一般说的浏览器内核是指浏览器最重要的核心部分,RenderingEngine,翻译成中文大概意思就是“解释引擎”,我们一般称为浏览器内核。由于不同的内核各自有一套自己的渲染网页和解释页面代码的机制,所以就会有一些问题存在。

如何将网站设置为浏览器首页

提示:按 Ctrl + D 即可添加网址到浏览器收藏夹中,方便下次访问fly63导航。下面是如何设置首页的方法。Google Chrome浏览器设为首页的方法;Firefox火狐浏览器设为首页的方法

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

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

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

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

点击更多...

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