IE6的一些BUG及解决方案
Position:fixed
|
解决方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- body {margin: 0; padding:0} p{ height:50px} html {_overflow: hidden} body {_overflow: auto; _height: 100%} .fixed {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; _position: absolute} --> </style></head> <body> <P>Begin</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>这是为了增加高度</P> <P>End</P></DIV> <DIV class=fixed>position: fixed;我始终在屏幕左上角哦</DIV> </body> </html> |
样式中文注释后引发失效
|
满足下面条件就会引起 注释下面的样式不起作用： 1. css有中文注释 2. css为ANSI编码 3. html为utf-8编码 解决方法： 1. 去掉中文注释，用英文注释 2. 统一css 和 html 的编码 |
注释造成文字溢出
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>多了一只猪</title> </head> <body> <div style="width:400px"> <div style="float:left"></div> <!-- _ --> <div style="float:right;width:400px">↓这就是多出来的那只猪</div> </div> </body> </html> 用IE6看一下，你会发现真的会多出一只“猪”！由注释造成文字溢出，属于IE6的BUG
1、不放置注释。最简单、最快捷的解决方法； 2、注释不要放置于2个浮动的区块之间； 3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>； 4、去除文字区块的固定宽度，与3有相似之处； 5、在后面加一个<br />或者空格；（不推荐） 6、使用IE注释格式，如：<!--[if !IE]>Put your commentary in here...<![endif]--> 7、给盒子加position:relative;属性 |
|
解决方案就是将外部相对定位的div宽度改成偶数。
 |
