IE CSS Bug 系列
1.【IE CSS Bug系列】IE6&IE7图片链接无效
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7图片链接无效</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box a { display: block; width: 270px; height: 129px; }
.m-box a img { border: 0 none; }
.m-box a span { *zoom: 1; } .m-fix a span { position: relative; z-index: -1; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：特定的嵌套(a>内联元素>img)</p>
<div class="m-box">
<a href="#">
<span>
<img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下，你就知道"/>
</span>
</a>
</div> <h2>BUG修复</h2>
<p>解决方案：给这个内联元素设置position: relative; z-index: -1;</p>
<div class="m-box m-fix">
<a href="#">
<span>
<img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下，你就知道"/>
</span>
</a>
</div>
</body>
</html>
2.【IE CSS Bug系列】IE6&IE7里overflow的auto|hidden定位
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7里overflow的auto|hidden定位</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box { width: 200px; height: 100px; background-color: red; overflow: auto; }
.m-box .pos { position: relative; } .m-fix { *position: relative; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：父元素overflow:hidden | auto,子元素相对定位</p>
<div class="m-box">
<div class="pos">
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
</div>
</div> <h2>BUG修复</h2>
<p>解决方案：给父元素设置position: relative;</p>
<div class="m-box m-fix">
<div class="pos">
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
我是相对定位<br />
</div>
</div>
</body>
</html>
3.【IE CSS Bug系列】IE6&IE7表单双边距
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7表单双边距</title>
<style>
html,body {
margin: 0;
padding: 0;
} .m-box { width: 100%; margin-left: 100px; } .m-fix { *margin-left:0; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6/IE7里表单父元素设置宽度和横向margin</p>
<div class="m-box">
<input type="text" value="双边距"/>
<textarea>双边距</textarea>
</div> <h2>BUG修复</h2>
<p>解决方案：hack</p>
<div class="m-box m-fix">
<input type="text" value="双边距"/>
<textarea>双边距</textarea>
</div>
</body>
</html>
4.【IE CSS Bug系列】IE6&IE7里Li间隙
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7里Li间隙</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box ul li { overflow: hidden; width: 100%; height: 24px; line-height: 24px; background-color: red; }
.m-box ul li span {
float: left;
} .m-fix ul li {
vertical-align: top;
}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：li中浮动元素或者设置display:block</p>
<div class="m-box">
<ul>
<li>
<span>li内元素浮动</span>
</li>
<li>
<span>li内元素浮动</span>
<span>li内元素浮动</span>
</li>
</ul>
</div> <h2>BUG修复</h2>
<p>解决方案：给li设置vertical-align: top;</p>
<div class="m-box m-fix">
<ul>
<li>
<span>li内元素浮动</span>
</li>
<li>
<span>li内元素浮动</span>
<span>li内元素浮动</span>
</li>
</ul>
</div>
</body>
</html>
5.【IE CSS Bug系列】IE6奇数宽定位1px
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6奇数宽定位1px</title>
<style>
html,body {
margin: 0;
padding: 0;
} .m-box { position: relative; width: 201px; height: 200px; background-color: red; }
.m-box-inner { position: absolute; width: 20px; height: 20px; background-color: #000; top: 0; left: 200px;} .m-fix { width: 200px; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6下定位的父元素宽度是奇数时</p>
<div class="m-box">
<div class="m-box-inner"></div>
</div> <h2>BUG修复</h2>
<p>解决方案：将定位的父元素宽度改为偶数</p>
<div class="m-fix m-box">
<div class="m-box-inner"></div>
</div>
</body>
</html>
6.【IE CSS Bug系列】IE6浮动3px
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6浮动3px</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box {
overflow: hidden;
background-color: #ccc;
}
.m-box .m-box-main { width: 200px; float: left; background-color: red; }
.m-fix .m-box-main { _margin-right: -3px;}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：一个块浮动，另一个不浮动</p>
<div class="m-box">
<div class="m-box-main">浮动3像素bug</div>
<div>浮动3像素bug</div>
</div> <h2>BUG修复</h2>
<p>解决方案：1.给浮动元素设置负margin; 2.给另一个元素也浮动</p>
<div class="m-box m-fix">
<div class="m-box-main">浮动3像素bug</div>
<div>浮动3像素bug</div>
</div>
</body>
</html>
7.【IE CSS Bug系列】IE6浮动元素相邻绝对定位消失
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6浮动元素相邻绝对定位消失</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box {
overflow: hidden;
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
} .m-box .fl {
float: left;
width: 100%;
}
.m-box .pos {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
top: 0;
left: 0;
} .m-fix .pos { _clear: both; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：浮动元素相邻绝对定位，并且浮动元素有宽 >= 盒子宽-2 </p>
<div class="m-box">
<div class="fl">浮动元素</div>
<div class="pos">定位</div>
</div> <h2>BUG修复</h2>
<p>解决方案：给绝对定位设置clear: both;</p>
<div class="m-box m-fix">
<div class="fl">浮动元素</div>
<div class="pos">定位</div>
</div>
</body>
</html>
8.【IE CSS Bug系列】 IE6浮动双边距
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6浮动双边距</title>
<style>
html,body {
padding: 0;
margin: 0;
}
.g-clear { clear: both; } .m-box {overflow: hidden;}
.m-box p { float: left; background-color: red; margin-left: 100px; } .m-fix p { _display: inline; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6里块级元素浮动时设置横向margin</p>
<div class="m-box">
<p>双边距</p>
<p>双边距</p>
</div> <h2 class="g-clear">BUG修复</h2>
<p>解决方案：给浮动元素设置display:inline</p>
<div class="m-box m-fix">
<p>双边距</p>
<p>双边距</p>
</div>
</body>
</html>
9.【IE CSS Bug系列】IE6浮动注释
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6浮动注释</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box { overflow: hidden; width: 200px; }
.m-box .list { float: left; width: 100px; background-color: #ccc; } .m-fix { width: 203px; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：盒子里的浮动元素中间有注释，并且盒子的宽度 >= 浮动元素宽+2</p>
<div class="m-box">
<div class="list">浮动+注释</div>
<!-- 注释 -->
<div class="list">浮动+注释</div>
</div> <h2>BUG修复</h2>
<p>解决方案：1.去除浮动元素之间的注释; 2.给盒子的宽的增加2像素以上(不推荐)</p>
<div class="m-box m-fix">
<div class="list">浮动+注释</div>
<!-- 注释 -->
<div class="list">浮动+注释</div>
</div>
</body>
</html>
10.【IE CSS Bug系列】IE6滤镜PNG透明，容器内链接
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6滤镜PNG透明，容器内链接</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box {
width: 100px;
height: 100px;
background: url(x.png) no-repeat 0 0; _background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png', sizingMethod='crop');
} .m-fix a {
_position: relative;
}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：IE6滤镜PNG透明</p>
<div class="m-box">
<a href="#">滤镜透明后链接</a>
</div> <h2>BUG修复</h2>
<p>解决方案：给这个链接设置position: relative;</p>
<div class="m-box m-fix">
<a href="#">滤镜透明后链接</a>
</div>
</body>
</html>
11.【IE CSS Bug系列】IE6绝对定位bottom失效
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6绝对定位bottom失效</title>
<style>
html,body {
padding: 0;
margin: 0;
} .m-box { position: relative; }
.m-box .cont { width: 200px; height: 200px; background-color: #ccc; }
.m-box .pos { position: absolute; width: 50px; height: 50px; left: 0; bottom: 0; background-color: red; } .m-fix { width: 200px; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：绝对定位时，相对定位的父元素没有触发haslayout</p>
<div class="m-box">
<div class="cont"></div>
<div class="pos">bug</div>
</div> <h2>BUG修复</h2>
<p>解决方案：触发haslayout</p>
<div class="m-box m-fix">
<div class="cont"></div>
<div class="pos">fix</div>
</div>
</body>
</html>
12.【IE CSS Bug系列】IE6里定义小高度容器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6里定义小高度容器</title>
<style>
html,body {
margin: 0;
padding: 0;
} .m-box p { height: 5px; background-color: red; } .m-fix .overflow { overflow: hidden; }
.m-fix .fontSize { font-size: 0; }
.m-fix .lineHeight { line-height: 0; }
.m-fix .empty { line-height: 0 }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：默认</p>
<div class="m-box">
<p></p>
<p>最小高度</p>
<p>最小高度</p>
<p>最小高度</p>
</div> <h2>BUG修复</h2>
<p>解
class="m-box m-fix">
<p class="overflow">最小高度</p>
<p class="fontSize">最小高度</p>
<p class="lineHeight">最小高度</p>
<p class="empty"></p>
</div>
</body>
</html>
13.【IE CSS Bug系列】图片标签焦点问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签焦点问题</title>
<style>
html,body { margin: 0; padding: 0; }
h2 { clear: both; } /* 清浮动，无关的样式 */ .m-box label { float: left; }
.m-fix label {
position: relative;
overflow: hidden;
}
.m-fix label span {
position: absolute;
left: 0;
top: 0;
width: 200px;/* 宽高要盖住图片 */
height: 200px;
background: url(http://www.baidu.com/img/bdlogo.gif) no-repeat -5000px; /* required for IE click bug fix */
}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：label嵌套img焦点触发</p>
<div class="m-box">
<label for="default"><img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下"/></label>
<input type="checkbox" id="default">
</div> <h2>BUG修复</h2>
<p>解决方案：给label添加span并且定位</p>
<div class="m-box m-fix">
<label for="fix"><span></span><img src="http://www.baidu.com/img/bdlogo.gif" alt="百度一下"/></label>
<input type="checkbox" id="fix">
</div>
</body>
</html>
14.【IE CSS Bug系列】IE8按钮对齐
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE8按钮对齐</title>
<style>
html,body {
margin: 0;
padding: 0;
}
button, input{
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
} .m-fix button, .m-fix input{
width: 20em;
}
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：button/input[type=submit]/input[type=button]</p>
<div class="m-box">
<button>按钮</button>
<input type="button" value="button"/>
<input type="submit" value="button"/>
</div> <h2>BUG修复</h2>
<p>解决方案：定宽</p>
<div class="m-box m-fix">
<button>按钮</button>
<input type="button" value="button"/>
<input type="submit" value="button"/>
</div>
</body>
</html>
15.【IE CSS Bug系列】IE6&IE7浮动+清浮动内容折断
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>IE6&IE7浮动+清浮动内容折断</title>
<style>
html,body {
margin: 0;
padding: 0;
}
h2 { clear: both; } /* 清浮动，无关的 */ .m-box p {
border: 1px solid red;
clear: left;
float: left;
}
.m-fix p { width: 100%; }
</style>
</head>
<body>
<h2>BUG复现</h2>
<p>触发条件：浮动+清浮动</p>
<div class="m-box">
<p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
<p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
</div> <h2>BUG修复</h2>
<p>解决方案：设置宽度</p>
<div class="m-box m-fix">
<p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
<p>hi,我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！我是一段文字，一段文字！</p>
</div>
</body>
</html>
IE CSS Bug 系列的更多相关文章
- 打败 IE 的葵花宝典：CSS Bug Table
博主说:本博客文章来源包括转载,翻译,原创,且在文章内均有标明.鼓励原创,支持创作共享,请勿用于商业用途,转载请注明文章链接.本文链接:http://www.kein.pw/?p=35 原文发表于:A ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
随机推荐
- Jquery 判断IE
if( $.browser.msie && ( $.browser.version == '7.0' || $.browser.version == '8.0' ) ){ alert( ...
- pfsense下的流量管理（转）
http://www.pppei.net/blog/post/331 在作流量管理时,这些概念很重要,不要迷失.. 这里再对Limiter 的源地址和目的地址做个说明,因为limiter是被应用在La ...
- JVM试用G1的垃圾收集器
因为以前用默认的GC,,老年代经常在占比超过99%才发生一个GC行为,感觉不爽...尽管每次FULL GC只要0.5S. 结合上次听中华构架师大会,一哥们分享的G1 GC...试试.. 就在TOMCA ...
- 面试题 46 1+ 2＋3+...+n
class Temp{ public: Temp(){ ++N; sum+=N; } static void Reset(){ N = ; sum = ; } static int getSum(){ ...
- WCF服务实现客户端Cookie共享，表单验证的解决方案
基于前几篇的文章,如果理解了通道 拦截器 服务转发的概念,相信你肯定也能理解咋的玩了. 说白了就是创建客户端的拦截器: 实现接口:IClientMessageInspector. 里面的方法就是客户 ...
- Qt编译慢吗？
1. “用Qt写的程序编译比MFC慢”的说法是错误的绝对错误,单位代码行数编译Qt远比MFC快得多,因为Qt库的头文件设计非常好,尽量都使用了前置声明,避免了头文件嵌套,几乎所有类都使用了公有类和私有 ...
- Ruby的语法糖
发现Ruby的语法糖好多,比如函数调用,参数列表可以写括号和不写括号.代码块可以用do end 或者 {}. 还有 if,unless后置.等等. 如果看Ruby代码看多了,你会发现,它很多地方的 ...
- SQL SERVER 自带系统存储过程分类
目录存储过程 用于实现 ODBC 数据字典功能,并隔离 ODBC 应用程序以使其不受基础系统表更改的影响. 变更数据捕获存储过程 用于启用.禁用.或报告变更数据捕获对象. 游标存储过程 用于实现游标变 ...
- socketFunction
socket socket() 我们使用系统调用socket()来获得文件描述符: #include<sys/types.h> #include<sys/socket.h&g ...
- 论 <%@taglib prefix="s" uri="/struts-tags" %> 的重要性
前段时间在做项目的时候,碰到这个问题 结果是相应的内容显示不出来,原来是忘了这句很关键的引入:<%@taglib prefix="s" uri="/struts-t ...