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.不同浏览器当 ...
随机推荐
- STM32应用笔记转载
stm32 外部中断嵌套[操作寄存器+库函数] stm32 NVIC中断管理实现[直接操作寄存器] stm32 SPI通信[操作寄存器+库函数] stm32 i2c通信 [操作寄存器+库函数] stm ...
- NMEA协议 上位机 C# (转)
源:NMEA协议 上位机 c# 前些时间写做了两款用NMEA协议的上位机,在这里做一个总结和记录.和大家分享,也为了以后不会忘记. NMEA协议总体来说,相对简单,是气象上比较成熟的协议. 主要有以下 ...
- Laravel 目录结构分析
根目录结构 /app/bootstrap/public/vendorartisancomposer.jsonserver.php 1./app 整个Laravel 目录中最需要我们注意的地方,包含设置 ...
- Pycharm之远程编程
mac上似乎暂时不支持. File->New Project 然后Location里选择你存放项目的地址 然后在Interpreter后面的齿轮状(下图红色处)点击后选择Add Remote. ...
- (C#)利用Aspose.Cells组件导入导出excel文件
Aspose.Cells组件可以不依赖excel来导入导出excel文件: 导入: public static System.Data.DataTable ReadExcel(String strFi ...
- FATFS外置UNICODE GBK双向转换码表(转)
源:FATFS外置UNICODE GBK双向转换码表 将UtoG,GtoU双向码表放到存储卡里面实现长文件名,因为FATFS长文件名需要unicode支持, 首先将UtoG.sys,GtoU.sys两 ...
- xml数据传输
- Practice Round China New Grad Test 2014 报告
今天有Google of Greater China Test for New Grads of 2014的练习赛,主要是为了过几天的校园招聘测试做练习用的,帮助熟悉平台,题目嘛,个人觉得除了A题外, ...
- java系列--HTTP协议
一.HTTP请求信息 请求行 请求头 空行 消息体 1.防盗链: 枚举类型: 二.中文乱码问题 1.Get提交 String username = request.getParameter(" ...
- linux 套接字编程入门--Hello World
下述代码是linux套接字编程的入门代码.分为服务端和客户端源码. 服务端代码的主要流程是绑定ip地址和端口号建立套接字,等待客户端发起访问.接受客户端请求之后,向客户端发送字符串"hell ...