IE6浏览器常见的bug及其修复方法
- IE6不支持min-height,解决办法使用css hack:
.target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下内容高度超过会自动扩展高度
}
ol
内li
的序号全为1,不递增。解决方法:为li设置样式display: list-item;
- 未定位父元素
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 class="outer">
<div class="inner"></div>
</div>
- IE6只支持
a
标签的:hover
伪类,解决方法:使用js为元素监听mouseenter,mouseleave事件,添加类实现效果:
<style type="text/css">
.p:hover,
.hover {
background: purple;
}
</style>
<p class="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>
- 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*/
}
- IE6在设置
height
小于font-size
时高度值为font-size
,解决办法:font-size: 0;
- IE6不支持PNG透明背景,解决办法: IE6下使用gif图片
- IE6-7不支持
display: inline-block
解决办法:设置inline并触发hasLayout
display: inline-block;
*display: inline;
*zoom: 1;
- IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法: 1)使用padding控制间距。 2)浮动元素
display: inline;
这样解决问题且无任何副作用:css标准规定浮动元素display:inline会自动调整为block - 通过为块级元素设置宽度和左右margin为auto时,IE6不能实现水平居中,解决方法:为父元素设置
text-align: center;
IE6浏览器常见的bug及其修复方法的更多相关文章
- 常见浏览器bug(针对IE6及更低版本)及其修复方法
常见bug及其修复方法有以下几种 1.双外边距浮动bug 双外边距浮动bug在IE6及更低版本中常见.所谓双外边距浮动bug是指使任何浮动元素上的外边距加倍.(见下图) 只要将元素的display属性 ...
- IE6 浏览器常见兼容问题 大汇总(23个)
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
- ie6下常见的bug 调整页面兼容性
ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...
- IE6 浏览器常见兼容问题 大汇总(23个)[转载]
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
- IE常见bug及其修复方法
一.双边距浮动的bug 1.1一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box) 2.1在浮动元素上使用了左边界(margin-left)来令它和容器的左边产 ...
- IE6条件下的bug与常见的bug及其解决方法
1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
- IE6 浏览器常见兼容问题 共23个
1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...
随机推荐
- Win7下 IIS+PHP(ZendLoader)+MySQL
这里使用的是傻瓜式安装方式 下载php-5.3.18-nts-Win32-VC9-x86.msi,Win7下可执行文件.(下载地址 http://pan.baidu.com/s/1qvJCA) 执行到 ...
- Delphi XE7 Update1修正列表
Delphi XE7 Update1修正列表 官方下载地址:http://altd.embarcadero.com/download/radstudio/xe7/delphicbuilder_xe7_ ...
- 用div做下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Git 解决同步 No value for key branch.master.merge found in
[core] repositoryformatversion = 0 filemode = false logallrefupdates = true [remote "origin&quo ...
- CentOS 6.X x64 编译安装 Countly
CentOS 6.X x64 编译安装Countly 安装所需的软件 yum -y install supervisor ImageMagick sendmail 1. 安装 node.js wge ...
- Linux 软件包安装管理
转自:http://www.cnblogs.com/Quains/archive/2012/01/03/2311049.html 本文主要是记录下RedHat系列的软件包管理. 内容分为以下三个部分: ...
- HTML学习(六)图像
图像标签(<img>)和源属性(Src)在 HTML 中,图像由 <img> 标签定义.<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签.要在页面上显 ...
- laravel database的事务函数
laravel的事务使用如下: DB::connection('gvideo')->transaction(function () use ($user_id, $video_id, $acti ...
- BMP085气压传感器驱动
BMP085是新一代的小封装气压传感器,主要用于气压温度检测,在四轴飞行器上可以用作定高检测,该传感器属于IIC总线接口,依然沿用标准IIC驱动程序 使用该传感器需要注意的是我们不能直接读出转换好的二 ...
- FAB、TextInputLayout及Snackbar笔记
FloatingActionButton 由于FloatingActionButton是重写ImageView的,所有FloatingActionButton拥有ImageView的一切属性. 控制F ...