关闭

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

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

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

关闭

js通过window.navigator获取平台信息

获取浏览器信息需要使用navigator.userAgent 对象 根据获取到的内容判断浏览器信息navigator.userAgent。IE11浏览器 已经不能用msic 来判断是否是IE11了

浏览器重绘(repaint)重排(reflow)与优化

很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点!

浏览器中实现JavaScript计时器的4种创新方式

由于 Web Worker 本质上是Web线程,因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的,可以让主线程准确的知道什么时候合适

浏览器storage你真的会用吗

html5标准localstorage和sessionStorage 为现代浏览器提供用户会话级别的数据存取。它们允许你访问一个Document 源(origin)的对象 Storage,也就是在遵守同源策略情况下存取数据。

用了几十年的浏览器 user-agent 要退出历史舞台了?看看 Google 怎么说

Google 近日宣布,计划在 Chrome 浏览器上逐步淘汰 user-agent 字符串。这里稍微解释下,user-agent (UA,用户代理) 字符串是现代 web 和浏览器功能的重要组成部分。

Js详细判断浏览器运行环境

看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问

js监听浏览器后退事件

如果在浏览器执行了回退操作,则会触发页面弹出“不可回退”弹框,当然这里可以进行你所需要的不同的处理; 代码如下:

用JavaScript让你的浏览器说话

最近在开发一个个人项目时,我冒出了一个尝试让浏览器说话的想法。不知道该怎么做,于是,我在网上寻找了一下答案,在MDN上,我找到了答案。让我们来看看如何通过JavaScript让浏览器说话。

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

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

IE9及以下浏览器升级提示

在使用react的项目中一般都有兼容性问题,特别是使用了组件库比如element-react或者ant-design等等,在ie下多少都会有点小问题,比如样式不正确,或者组件功能失效,甚至白屏等问题。

点击更多...

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