ie6

处理png格式图片在ie6中显示的白色边框：
　　
1. div 的垂直居中问题：

vertical-align:middle;
将行距增加到和整个 DIV 一样高： line-height:200px;
然后插入文字，就垂直居中了。
缺点是要控制内容不要换行。

2. margin 加倍的问题

设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。
解决方案：在这个 div 里面加上 display:inline

3. 浮动 ie 产生的双倍距离

　　#box {

　　 float:left;

　　width:100px;

　　margin:0 0 0 100px;

　　}

　　这种情况之下 IE 会产生 200px 的距离, display:inline; /*使浮动忽略*/

　　这里细说一下 block 与 inline 两个元素：

block 元素的特点：总是在新行上开始，高度、宽度、行高、边距都可以控制(块元素)；
Inline 元素的特点：和其他元素在同一行上，不可控制(内嵌元素)。

4. IE 与宽度和高度的问题 IE 不认得 min-这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;} html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5. 页面的最小宽度 min -width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个<div> 放到 <body> 标签下，然后为 div 指定一个类，然后 CSS 这样设计：

#container{

　　min-width: 600px;

　　width:expression(document.body.clientWidth < 600? "600px": "auto" );

}

第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。

.DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距. 例： <style type="text/css"> #box{ float:left; width:800px;background-color: #000066;//可以优化为#006;} #left{ float:left; width:50%;background-color: #006600;//可以优化为#060;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}
</style> <div id="box"> <div id="left"> </div> <div id="right"> </div> </div> 7. IE 捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接，这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页
面。
解决办法：对#layout 使用 line-height 属性或者给#layout 使用固定高和宽。页面结构尽量简单。 8.float 的 div 闭合；清除浮动；自适应高度
① 例 1：
<style type="text/css"> .float_a,.float_b,.float_c { float:left; } .clear { clear:both; } </style> <div class="float_a">内容 1</div> <div class="float_b">内容 2</div> <div class="clear"></div> <div class="float_c">内容 3</div> 或者例 2： <style type="text/css"> .float_a,.float_b { float:left; } .fl_l { float:left;} .fl_r { float:right;} .clear:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { zoom: 1; } </style> <div class="clear aa"> <div class="float_a fl_l"><div class="float_a fl_r">这是内容</div></div> </div>
②作为外部 wrapper 的 div 不要定死高度，为了让高度能自动适应，要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候，高度
自动适应在 IE 下无效，这时候应该触发 IE 的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。例如某一个 wrapper 如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 11.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或 paddign 时。例： <style type="text/css"> #box {background-color:#eee; } #box p {margin:20px 0; text-align:center;//原样式 margin-top:20px; margin-bottom:20px; } </style> <div id="box"> <p>p 对象中的内容</p> </div> 解决方法：在 P 对象上下各加 2 个空的 div 对象 CSS 代码：.1{height:0px;overflow:hidden;}或者为 div 加上 border 属性。 12 .IE6 下为什么图片下有空隙产生解决这个 BUG 的方法也有很多，可以是改变 html 的排版，或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决。 13.如何对齐文本与文本输入框加上 vertical-align:middle; <style type="text/css">
 </style> 14.web 标准中定义 id 与 class 有什么区别吗一、web 标准中是不容许重复 id 的，比如 div id="aa" 不容许重复 2 次，而 class 定义的是类，理论上可以无限重复，这样需要多次引用的定义便可以使用他；二、属性的优先级问题 id 的优先级要高于 class，看上面的例子三.方便 JS 等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个 id，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个 id 来得简单。 15. li 中内容超过长度后以省略号显示的方法（此方法适用与 IE 与 OP 浏览器） <style type="text/css">  </style> 16. 为什么 web 标准中 IE 无法设置滚动条颜色了解决办法是将 body 换成 html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "网址"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> 17. 为什么无法定义 1px 左右高度的容器 IE6 下这个问题是因为默认的行高造成的。解决的方法也有很多，例如:overflow:hidden | zoom:0.08 | line-height:1px 。 18. 怎么样才能让层显示在 Flash 之上呢解决的办法是给 Flash 设置透明 <param name="wmode" value="transparent" /> 19. 怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二。
<style type="text/css">  </style>

posted @ 2015-11-15 23:51 ShirleyHe 阅读(335) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

JQD

ie6

公告