在IE浏览器中的奇怪页面表现
1.左右边框断线现象
条件：容器内有两个浮动，并用CLEAR清除浮动。
症状：在ie下拖动滚动条时最外层的border会消失，如果给最外层加上宽度或者高度就不会出现。
HTML代码
药方：
程序代码
2.LI中出现两个以上浮动列表符号问题
条件：在LI中定义了两个以上float浮动，其中有一个左浮动
症状：ie中列表符号跑到右边，ff中自己定义一行
HTML代码
点评：列表的LI在IE中，定了宽后，序号就变为1；定了浮动后，就没有了序号，FF却不同。IE认为：列表本来就不把序号算在实体内。
药方：未知！
3.注释在IE中造成文字复制
条件：
当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug
症状：文字复制
HTML代码
药方：
程序代码
4.绝对定位lay层消失问题
条件：在一个相对定位中有双数的浮动元素，并在这里有一个绝对定位元素
症状：
HTML代码
药方：
程序代码
5.绝对定位里有相对定位的一个问题
条件：一个DIV内有相对定位，相对定位里有绝对定位，无宽度高度的样式，其中相对定位有一个边界
症状：绝对定位总是相对于相对定位容器外边界的边定位，不是相对于外容器的外边定位。
HTML代码
药方：
程序代码
6.IE转行后无法显示背景图片
条件及症状：
靠右边,如果字体有转行,一个链接如果没有完全在一行的话就没有办法显示它的背景图了，但却能显示它的背景颜色.这个效果在ff下没有问题.
分析：
在ie中，background标签是以块来显示，以你所包含内容显示区域划为一个方块面显示，注意不是block但是包含block;
因为"如果没有完全在一行的话"，那就是说包含了2行甚至更多，这些内容是自适应流，可以自由显示。但是background却是以方块区域包含显示。也就是说你的一行未结束，它不是以你文档流开始处填写background-image，而是以你整个文档流距左边窗口最近的位置算起，就是另起一行的位置的上面一行开始！
通俗点：就是以你的文档流区域top和left最小的那个坐标点开始运行background-image.
HTML代码
药方：无
7.背景色跑入相临元素中
条件及症状：
略
HTML代码
药方：
程序代码
8.有序列表不按顺序显示
条件及症状：
1.没有声明
2.LI设了宽度
HTML代码
药方：
程序代码
可以去了LI中的宽度，或宽度用AUTO。
9.关于<li>标签中嵌入图片浮动的问题
条件：
症状：左只对图片应用浮动，firefox 下显示正常，但ie总多出来一行
HTML代码
药方：
程序代码
对图片元素的父元素LI应用浮动
10.IE6,7捉迷藏BUG的出现
条件：如段玉的六脉神剑时有时无，捉摸不定！
症状：文字看不到，要用鼠标选上才能看得见，IE67都有这种现象．
HTML代码
药方：
加入LAYOUT
11.display:inline之后出现的空隔bug
条件：
症状：
HTML代码
药方：
li中用到了display:inline属性，但是li和a之间会出现一个距离，在firefox下可以用给a:after的content:" "属性,那么IE下加入#First li {zoom:1;}
12.IE6捉迷藏(又名：猫躲躲)
条件：一个浮动元素，后跟一个非浮动元素，然后是一个清除元素，他们的父元素有背景色或背景图片．
症状：非浮动元素内容看不到．
HTML代码
药方：
1.去背景色或背景图片
2.给父元素或非浮动元素一个宽度或高度．
条件：容器内有两个浮动，并用CLEAR清除浮动。
症状：在ie下拖动滚动条时最外层的border会消失，如果给最外层加上宽度或者高度就不会出现。
HTML代码<div style="margin:500px 100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%"> <div style="float:left"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="float:right"> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> 网页标准化过程中一些理论<br /> </div> <div style="clear:both"></div> </div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码方法1.在父元素中加入height:1%
方法2.加入一个宽度
方法3.加入一个背景色
方法2.加入一个宽度
方法3.加入一个背景色
2.LI中出现两个以上浮动列表符号问题
条件：在LI中定义了两个以上float浮动，其中有一个左浮动
症状：ie中列表符号跑到右边，ff中自己定义一行
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> ol {list-style:inside;} span {display:block; float:left; margin:0 6px;} </style> </head> <body> <ol> <li><span><a href="#">文字</a></span><span><a href="#">文字</a></span><span><a href="#">文字</a></span></li> </ol> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
点评：列表的LI在IE中，定了宽后，序号就变为1；定了浮动后，就没有了序号，FF却不同。IE认为：列表本来就不把序号算在实体内。
药方：未知！
3.注释在IE中造成文字复制
条件：
当多个浮动的元素彼此跟随，中间加注释的时候，最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug
症状：文字复制
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>多了一只猪</title> </head> <body> <div style="400px"> <div style="float:left"></div> <!-- --> <div style="float:right;400px">↓这就是多出来的那只猪</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度，与3有相似之处。
5、有的人在猪后加一个<br />或者空格，但只是消除现象。
6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写：<!--[if !IE]>Put your commentary in here...<![endif]-->
4.绝对定位lay层消失问题
条件：在一个相对定位中有双数的浮动元素，并在这里有一个绝对定位元素
症状：
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- .content{ 600px; position:relative; background-color:#999900; } .left{ 300px; height:200px; float:left; position:relative; background:blue; } .right{ 300px; position:relative; height:200px; float:right; background-color:red; } .lay{ position:absolute; right:-25px; top:-6px; height:100px; 100px; background-color:#006633; z-index:5; float:left; } --> </style> </head> <body> <div class="content"> <div class="lay">dfdfdfdf</div> <div class="left">dfdf</div> <div class="left">dfdf</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码在第一个浮动元素前加<p></p>或其它元素可以自行适一下，其它方法不明！
5.绝对定位里有相对定位的一个问题
条件：一个DIV内有相对定位，相对定位里有绝对定位，无宽度高度的样式，其中相对定位有一个边界
症状：绝对定位总是相对于相对定位容器外边界的边定位，不是相对于外容器的外边定位。
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- body{ padding:0; margin:0; } #wrapper{ } #breadcrumb{ position:relative; margin:0 15px; } #breadcrumb .function{ position:absolute; right:0; top:0; } --> </style> </head> <body> <div id="wrapper"> <div id="breadcrumb"> <div class="function">bbbaa</div> </div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码1.在相对定位中加入一个高度如：1％或指定一个宽度。
6.IE转行后无法显示背景图片
条件及症状：
靠右边,如果字体有转行,一个链接如果没有完全在一行的话就没有办法显示它的背景图了，但却能显示它的背景颜色.这个效果在ff下没有问题.
分析：
在ie中，background标签是以块来显示，以你所包含内容显示区域划为一个方块面显示，注意不是block但是包含block;
因为"如果没有完全在一行的话"，那就是说包含了2行甚至更多，这些内容是自适应流，可以自由显示。但是background却是以方块区域包含显示。也就是说你的一行未结束，它不是以你文档流开始处填写background-image，而是以你整个文档流距左边窗口最近的位置算起，就是另起一行的位置的上面一行开始！
通俗点：就是以你的文档流区域top和left最小的那个坐标点开始运行background-image.
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> *{margin:0;padding;0;line-height:20px;} p{border:2px solid red;500px;margin:50px;} p a,div span{margin:4px;padding-left:14px;background:url(//img3.myking.cn/biz/all/small_pic/2_2_333333.gif) no-repeat 0 6px;} div{border:2px solid blue;500px;margin:10px 0 0 50px;} div a{margin:4px;padding-left:14px;background:#ccc} </style> </head> <body> <p><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a><a href="#">无标题文档</a></p> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：无
7.背景色跑入相临元素中
条件及症状：
略
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css" > * { margin:0; padding:0; } .大块 { background-color:#FFC; } .浮动块 { 100px; height:100px; float:left; background-color:#F00; } .清除浮动 { clear:both; } .正文部分 { margin-top:10px; } </style> </head> <body> <div class="大块"> <div class="浮动块"></div> <div class="信息">这里是一些文字</div> <div class="清除浮动"></div> </div> <div class="正文部分">神哪....怎么到了“大块”里面去了。</div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码haslayout 问题：
zoom:1;或者postion:relative;
zoom:1;或者postion:relative;
8.有序列表不按顺序显示
条件及症状：
1.没有声明
2.LI设了宽度
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>person resume</title> <style> body{margin:5px 0;text-align:center;background-color:#828598;} #all{margin:auto;text-align:left;background:#ffffff;700px;} #head{height:200px;background:url(sky2.jpg);} #general,#judge,#object,#skill,#experience,#award{660px;padding:2px 5px 0;margin:0 auto;} #top{border-bottom:1px #8C8C8C dashed;padding:5px 5px 2px;margin:5px 0;} #left{font:bold 14px "Times New Roman", Arial,Times, serif;} h2{650px;font-size:18px;color:#EFEEE3;text-align:left;background-color:#E56B2E;padding:8px 10px 4px;margin-left:2px;margin-bottom:2px;} #oul{margin:0px 5px 0;} li{border-bottom:1px #8C8C8C dashed;padding:5px 5px 2px;list-style-position: inside;300px;} #line{background-color:#828688;height:1px;font-size:1px;margin:10px 0;} </style> </head> <body> <div id="all"> <div id="head"></div> <div id="general">省略若干。。。 </div> <div id="judge"> <h2>自我评价</h2> <div id="top"></div> </div> <div id="object"> <h2>求职意向</h2> <div id="top">目标地点</div> <div id="top">期望工资</div> <div id="top">目标职位</div> </div> <div id="skill"> <h2>技能</h2> <ol id="oul"> <li>熟悉windows各操作系统的使用，维护，安装及相关的网络管理</li> <li>熟练掌握Dreamweave及photoshop的使用</li> <li>熟悉asp，html，xhtml，css2.0，javascript；初步了解php，xml，rss</li> <li>能够手写代码</li> </ol> </div> <div id="experience"> <h2>工作经验&教育经历</h2> <div id="work1"> 。。。。 </div> <div id="work2"> 。。。。 </div> <div id="line"></div> <ul id="oul"> <li></li> <li></li> </ul> </div> <div id="award"> <h2>证书</h2> <ol id="oul"> </ol> </div> <div id="foot">Last Modified:2005/12/07</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码可以去了LI中的宽度，或宽度用AUTO。
9.关于<li>标签中嵌入图片浮动的问题
条件：
症状：左只对图片应用浮动，firefox 下显示正常，但ie总多出来一行
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- * { margin:0; padding:0; } .phototext{ color:#999999; text-align:left; float:left; font-size:12px; list-style:none; } .phototext img{ margin:0 5px; float:left; } .phototext666{ color:#666666; } .phototext li{ line-height:1.8em; padding-left:5px; } .phototext li a, .phototext li a:hover{ color:#000000; font-size:14px; } #soyi{ 180px; background-color:#FFCC00; } --> </style> </head> <body> <div id="soyi"> <ul class="phototext"> <li><img src="//pages.blueidea.com/articleimg/2007/02/1424/preview_s01.jpg" alt="" width="72" height="82" class="photorim" /></li> <li><a href="#">蓝色经典</a></li> <li class="phototext666">15张照片</li> <li>1月15日更新</li> </ul> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
程序代码对图片元素的父元素LI应用浮动
10.IE6,7捉迷藏BUG的出现
条件：如段玉的六脉神剑时有时无，捉摸不定！
症状：文字看不到，要用鼠标选上才能看得见，IE67都有这种现象．
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>领航电动车配件批发中心</title> <style type="text/css"> /*<![CDATA[*/ #main{ background-color:#FFF; } dl{ 400px; margin-left:6px; display:inline; } dl dt{ 100px; } /*]]*/ </style> </head> <body> <div id="main"> <p>学员培训是本中心的最佳特点，从这儿培训班的优秀维修人员遍布大江南北，祖国各地。该中心是鲁西南较大的电瓶维修基地，配有国际最先进的充电修复多用机、多功能组合机和蓄电池检测仪。采用国际先进充电技术和独特的电池修复技术相结合，解决了蓄电池硫化问题，修复在充电中自动完成。使电动车3—5年不用更换电池，“废旧”电池变成了新电池。为用户省下不小的更换电瓶费用，解决了电动车行驶距离不断减少的困扰，并能延长电动车电瓶使用寿命2—3倍以上。</p> <dl> <dt>地址：</dt> <dd>曲阜市橡胶厂红绿灯向东50米路南</dd> </dl> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
加入LAYOUT
11.display:inline之后出现的空隔bug
条件：
症状：
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <title>menu center</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} a{padding:5px 10px;border:1px solid blue;} #First{background:#9999CC;white-space:nowrap;text-align:center;margin:20px auto;} #First li{display:inline;height:2em;margin:0;padding:0;background:red;} #First li a{position:relative;line-height:2em;} #First li a:after{content:" "} /** +html #First li{margin-right:-8px;} *html #First li{margin-right:-8px;}*/ </style> </head> <body> <ul id="First"> <li><a href="#">center1</a></li> <li><a href="#">center2</a></li> <li><a href="#">center3</a></li> <li><a href="#">center4</a></li> <li><a href="#">center5</a></li> <li><a href="#">center6</a></li> </ul> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
li中用到了display:inline属性，但是li和a之间会出现一个距离，在firefox下可以用给a:after的content:" "属性,那么IE下加入#First li {zoom:1;}
12.IE6捉迷藏(又名：猫躲躲)
条件：一个浮动元素，后跟一个非浮动元素，然后是一个清除元素，他们的父元素有背景色或背景图片．
症状：非浮动元素内容看不到．
HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <title>捉迷藏</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #clear { clear: both; } #layout { background: #e6e6e6; } #layout a:hover{ background: #333; } #left { float : left; border: 4px solid #333; padding : 5px; width : 200px; height: 200px; } #right div{ border: 3px solid #0c0; background: #dde; } </style> </head> <body> <div id="layout"> <div id="left"> #left </div> <div id="right"> #right 被隐藏的文本<br> <br /> </div> <div id="clear">bottom</div> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
药方：
1.去背景色或背景图片
2.给父元素或非浮动元素一个宽度或高度．