CSS兼容处理的相关案例
- 双倍显示：这个BUG出现在IE6以及下浏览器，当解析浮动元素时，会错误地把浮向边边界加倍显示。
修复问题方式： display：inline;
代码示例：
/*[IE6及更低版本浏览器双倍浮向 hack]*/
div {
margin：10px;
float：left;
width：100px;
height ：100px;
display：inline;/*屏弊IE6及更低版本浏览器双倍浮向 hack*/
}
具体详解：
因浮动元素自动以块状显示，将元素设成display：inline，在这里似乎没有作用，但却可以修改这个BUG.
- 多出3像素：这个Bug在IE6及更低版本浏览器中存在。在windows系统中，IE5.x和IE6在解析浮动元素与流动文本环绕时，流动元素会莫名其妙地多出3像素宽的补白。
修复问题方式：margin-right:-3px;
代码示例：
#float {
float：left;
width：100px;
height：100px;
border：4px red solid;
}
#flow {
border：4px solid blue;
margin-left：120px;
}
*html #float {
/*过滤器，在IE6及更低版本浏览器中清除浮动元素右侧的3像素空隙*/
margin-right:-3px;
}
*html #flow {
height：1%;
}
具体详解：
在IE6和IE5.X浏览器中，如上述代码所述。当固定宽度两栏布局时，如果左边浮动，右栏流动，则右栏就会多出3像素的宽度。
- 高度不适应：当元素内的子元素大小发生变化时，而外部元素的大小却不能自动进行调整。严格讲不算是一个Bug。因为根据CSS规则内外元素嵌套时会存在边界重叠现象，不同浏览器都会支持这个重叠。
解决方式：
#content {
/*父元素*/
background：#EEDC82;
margin：20px auto;
overflow：auto;/*在标准浏览器中定义父元素能够自适应高度*/
display：inline-block;/*在IE6及更低版本中定义父元素为内联块状显示强迫自动伸缩*/
}
P {
/*子元素*/
height：100px;
border：20px solid blue;
margin:20px;.
}
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content {
/*父元素*/
background：#EEDC82;
margin：20px auto;
}
p {
/*子元素*/
height：100px;
border：20px solid blue;
margin：20px;
}
</style>
</head>
<body>
<div id="content">
<p>内部文本</p>
</div>
</body>
</html>
具体详解：
根据常理计算，P元素的高度应为180像素，外部div元素的高度为220像素。但实际上div元素的高度仅为180像素。根据CSS规则，丢失部分已发生了重叠。
实际设计中是不希望它们上下边界重叠，而是根据内部元素的大小能够自适应高度，实现布局的合理性。
- 多余字符：这个Bug在IE6版本浏览器中存在。
解决方式：不要在浮动元素中间添加注释。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width：100%; /*占满窗口*/
float：left; /*浮动布局*/
}
</style>
</head>
<body>
<div>文本行</div>
<div>文本行</div>
<div>文本行</div><!---->
<div>文本行</div>
</body>
</html>
具体详解：
如果继续添加更多的注释，会继续余出更多字符，如此重复。
当超过最后一行字符长度时会显示更奇怪的显示效果，甚至显示脚本错误提示。
- 定位异常：这个Bug在IE6及更低版本浏览器中存在。
解决方式：
利用过滤器为IE6及更低版本浏览器定义一个高度，强迫相对元素拥有布局属性。
*html #box {
/*定位 Hack*/
height：1%;
}
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title></title>
<style tyle="text/css">
#box {
/*父元素相对定位*/
position:relative;
}
#absoulte1，#absoulte2，#absoulte3 {
/*子元素绝对相对定位*/
position：aboulte;
width：100px;
height：100px;
border：solid red 4px;
}
#absoulte1 {
/*第一个子元素定位坐标，位于包含块的左上角*/
top：0px;
left：0px;
}
#absoulte2 {
/*第二个子元素定位坐标，位于包含块的右上角*/
top：0px;
right：0px;
}
#absoulte3 {
/*第三个子元素定位坐标，位于包含块的右上角*/
bottom：0px;
left：0px;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/>
<div id="box">
<div id="absoulte1"></div>
<div id="absoulte2"></div>
<div id="absoulte3"></div>
</div>
</body>
</html>
具体详解：把绝对定位的元素嵌入相对定位元素中可以实现灵活布局，但在IE6及更低版本浏览器中解析时却存在问题。
- 捉迷藏：
解决方式：去除父元素的背景色，或为父元素指定固定高度和宽度，也可以为浮动元素和父元素定义position属性为relative,都可以避免此类问题的发生。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content {
/*父元素属性*/
background: #EEE8AA;/*定义了父元素的背景色*/
}
#left {
/*左侧栏目布局属性*/
float：left;/*浮动布局*/
border：1px solid red;
width：200px;
height：200px;
}
#bottom {
/*底部栏目布局属性*/
clear：both;/*定义清除属性*/
height：50px;
width：100%;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
左侧栏目<br/>
左侧栏目<br/>
左侧栏目<br/>
...
</div>
<div id="right">
右侧栏目<br/>
右侧栏目<br/>
右侧栏目<br/>
...
</div>
<div id="bottom">底部栏目</div>
</div>
</body>
</html>
具体详解：
问题描述：这个Bug在IE6版本浏览器中存在。在特定条件中，标准布局页面被刷新或重新下载时，会发现某些内容消失了，当再次刷新或选中时才会显示出来。
问题根源：原来它们都隐藏在父元素背景之后，出现这种Bug多因为浮动元素与流动元素混和布局，后面元素又被设置了clear属性。
如果设置了父元素的背景色，当加载页面时，流动元素内的内容可能会隐藏在父元素下而看不见。
- 百分比取值：
解决方法：在右侧子元素中定义clear属性为right。如：
#right {
background：blue;
clear：right;/*清除右侧浮动*/
}
代码示例：
当两个并列浮动的子元素宽度都为50%时，在IE怪异模式中有时会出现错行现象。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#content { width：403px; /*奇数宽度*/} /*定义父元素的宽度*/
#left,#right {
/*浮动子元素*/
float：left;
width：50%; /*各占一半宽度*/
height：100px;
}
#left { background：red; } /*左侧子元素属性*/
#right { background：blue; } /*右侧子元素属性*/
</style>
</head>
<body>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
具体详解：
这个Bug在IE怪异模式中存在。像素值是没有数值的，但是当布局中使用百分比设置单位时，就会存在计算的像素值出现小数部分。
对于小数值问题、不同类型浏览器取舍方法不同，IE怪异模式将根据四舍五入的方法进行计算。
标准浏览器对于小数值一般采取忽略不计的方法，多出值将按元素顺序进行分配。
例如：
包含框宽度为11像素，平分3个子元素，则每个子元素平分3像素，多出的2像素按顺序分给第一个和第二个子像素;
如果包含框宽度为10像素，则每个子元素平分为像素，多出的1像素分给第一个子元素。
- 丢失项目符号：
解决方法：当给列表父元素添加15像素的左补白时才可以显示出来，而在IE5.X及更低版本中需要添加16像素的左补白才可以显示。
如：
#right {
/*[项目符号隐藏Hack]*/
width：400px;
float：left;
border：solid 1px blue;
padding-left：16px; /*适用IE5.X及更低版本*/
padding-left：15px; /*适用IE6版本*/
}
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#left {
/*左侧浮动项目*/
width：100px;
height：100px;
float：left;
border：solid 1px read;
}
#right {
/*右侧浮动项目*/
width：400px;
float：left;
border：solid 1px blue;
}
ul {
/*清除列表项目缩进*/
margin：0;
padding：0;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
</body>
</html>
具体详解：
这个Bug在IE怪异模式中存在，当清除列表缩进以后，会突然发现列表项符号在IE中不见了。
由于列表的左边沿起始位置是列表项内容的左侧，而非列表项符号，故当列表的补白设为0时，列表项符号的实际位置是负值。
标准浏览器一般不会解析负补白，而是忽略负值，但IE就会将负值的列表项符合隐藏起来。
- 内容溢出：
解决方法：
如果已经设置了宽和高，并且没有意识到内容的多少实际上比设置的值要大。这种情况很好情况。
只要了解内容的准确大小，并为父元素重新设置合适的尺寸即可。
如果包含区域是动态内容，无法静态确定大小，可以使用min-height属性来修复这个溢出行为。
例如：
/*[IE7盒模型溢出兼容解决方案]*/
#box {
/*父元素布局属性*/
width：100px;
_height：100px;/*过滤器，在IE6及更低版本中适用*/
min-height：100px;/*限定最小高度，在现代标准浏览器中适用*/
border：double red 2px;
}
#sub_content {
/*子元素布局属性*/
width：200px;
height：200px;
margin-top：50px;
margin-left：50px;
border：thin dashed blue;
}
为了确保该行为在更低版本IE中不会发生改变，推荐使用条件注释设计IE不同版本的兼容样式表。方法是新建一个针对IE6及更低版本的样式表文件。
/*[样式表文件，针对IE6及更低版本浏览器使用]*/
#box {height：100px;}
然后利用IE条件语句导入样式表文件，这是一个简单、可维护的方法，用来将更老的IE版本中的行为从IE7中的更加标准的行为中分离出来。
如果没有给父元素设置宽和高，应该为父元素定义overflow:visible;声明，那么在版面中的区域应该可以像在IE6中一样正常显示。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box {
/*父元素布局属性*/
width：100px;
height：100px;
border：double red 2px;
}
#sub_content {
/*子元素布局属性*/
width：200px;
height：200px;
marign-top：50px;
margin-left：50px;
border：thin dashed blue;
}
</style>
</head>
<body>
<div id="sub_content">内容</div>
</body>
</html>
具体详解：
溢出是一种方法。用来描述当一个块元素的内容超出父元素时，这些内容是否被省略。默认是可见的，可能显示在父元素以外的地方。
IE7以前的版本不支持这种方法，父元素总会自动调整自身大小来适应超出自己范围的子元素。
