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