《网页兼容性问题解决方案》由会员分享，可在线阅读，更多相关《网页兼容性问题解决方案（21页珍藏版）》请在金锄头文库上搜索。
1、(http:/ 0242a8956bece4aa.html) ！important 优先级优先级 兼容兼容 IE61.div 的垂直居中问题的垂直居中问题2. margin 加倍的问题加倍的问题3.浮动浮动 ie 产生的双倍距离产生的双倍距离4 .IE 与宽度和高度的问题与宽度和高度的问题 IE 不认得不认得 min-这个定义这个定义5. 页面的最小宽度页面的最小宽度 min -width 是个非常方便的是个非常方便的 CSS 命命令令6.DIV 浮动浮动 IE 文本产生文本产生 3 象素的象素的 bug 左边对象浮动左边对象浮动7.IE 捉迷藏的问题捉迷藏的问题8.float 的的 div
2、闭合闭合;清除浮动清除浮动;自适应高度自适应高度;11.高度不适应高度不适应1.div 的垂直居中问题的垂直居中问题 vertical-align:middle; 将行距增将行距增加到和整个加到和整个 DIV 一样高一样高 line-height:200px; 然后插入文字，然后插入文字，就垂直居中了。缺点是要控制内容不要换行就垂直居中了。缺点是要控制内容不要换行 2. margin 加倍的问题加倍的问题 设置为设置为 float（浮动）的（浮动）的 div 在在 ie下设置的下设置的 margin 会加倍。这是一个会加倍。这是一个 ie6 都存在的都存在的 bug（臭（臭虫）虫） 。解决方案
3、是在这个解决方案是在这个 div 里面加上里面加上 display:inline; 例如：例如： 相应的相应的 css 为为 #IamFloat float:left; margin:5px;/*IE 下理解为下理解为 10px*/ display:inline;/*IE 下再理解为下再理解为 5px*/ 3.浮动浮动 ie 产生的双倍距离产生的双倍距离 #box float:left; width:100px; margin:0 0 0 100px; /这种情况之下这种情况之下 IE 会产生会产生 200px 的距的距离离 display:inline; /使浮动忽略使浮动忽略 这里细说一下
4、这里细说一下 block 与与inline 两个元素两个元素block 元素的特点是元素的特点是,总是在新行上开始总是在新行上开始,高度高度,宽度宽度,行高行高,边距都可以控制边距都可以控制(块元素块元素);Inline 元素的特点是元素的特点是,和其他元素和其他元素在同一行上在同一行上,不可控制不可控制(内嵌元素内嵌元素); #box display:block; /可可以为内嵌元以为内嵌元素模拟为块元素素模拟为块元素 display:inline; /实现同一行排列的效实现同一行排列的效果果 diplay:table; 4 IE 与宽度和高度的问题与宽度和高度的问题 IE 不认得不认得 m
5、in-这个定义，但这个定义，但实际上它把正常的实际上它把正常的 width 和和 height 当作有当作有 min 的情况来使。的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用这两个值就不会变，如果只用 min-width 和和 min-height 的的话，话，IE 下面根本等于没有设置宽度和高度。下面根本等于没有设置宽度和高度。 比如要设置背比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以景图片，这个宽度是比较重要的。要解决这个问题，可以这样：这样： #box width: 80px;
6、 height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px; 5.页面的最小宽度页面的最小宽度 min -width 是个非常方便的是个非常方便的 CSS 命令，命令，它可以指定元素最小也不能小于某个宽度，这样就能保证它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但排版一直正确。但 IE 不认得这个，而它实际上把不认得这个，而它实际上把 width 当当做最小宽度来使。为了让这一命令在做最小宽度来使。为了让这一命令在 IE 上也能用，可以把上也能用，可以把一个
7、一个 放到放到 标签下，然后为标签下，然后为 div 指定一个类指定一个类, 然后然后 CSS 这样设计：这样设计： #container min-width: 600px; width:expression(document.body.clientWidth 7.IE 捉迷藏的问题捉迷藏的问题 当当 div 应用复杂的时候每个栏中又有应用复杂的时候每个栏中又有一些链接，一些链接，DIV 等这个时候容易发生捉迷藏的问题。等这个时候容易发生捉迷藏的问题。 有些有些内容显示不出来，当鼠标选择这个区域是发现内容确实在内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。页面。 解决办法：对解决办法
8、：对#layout 使用使用 line-height 属性或者给属性或者给#layout 使用固定高和宽。页面结构尽量简单。使用固定高和宽。页面结构尽量简单。 8.float 的的 div 闭合闭合;清除浮动清除浮动;自适应高度自适应高度; 例如：例如：这里的这里的 NOTfloatC 并不希望继并不希望继续平移，而是希望往下排。续平移，而是希望往下排。(其中其中 floatA、floatB 的属性已的属性已经设置为经设置为 float:left;) 这段代码在这段代码在 IE 中毫无问题，问题出在中毫无问题，问题出在FF。原因是。原因是 NOTfloatC 并非并非 float 标签，必须将
9、标签，必须将 float 标签标签闭合。在闭合。在 之间加上之间加上 这个这个 div 一一定要注意位置，而且必须与两个具有定要注意位置，而且必须与两个具有 float 属性的属性的 div 同级，同级，之间不能存在嵌套关系，否则会产生异常。并且将之间不能存在嵌套关系，否则会产生异常。并且将 clear 这这种样式定义为为如下即可：种样式定义为为如下即可： .clear clear:both; 作为外部作为外部 wrapper 的的 div 不要定死高度不要定死高度,为了让高为了让高度能自动适应，要在度能自动适应，要在 wrapper 里面加上里面加上 overflow:hidden; 当包含
10、当包含 float 的的 box 的时候，高度自动适应在的时候，高度自动适应在 IE 下无效，下无效，这时候应该触发这时候应该触发 IE 的的 layout 私有属性私有属性(万恶的万恶的 IE 啊！啊！)用用zoom:1;可以做到，这样就达到了兼容。可以做到，这样就达到了兼容。 例如某一个例如某一个wrapper 如下定义：如下定义： .colwrapper overflow:hidden; zoom:1; margin:5px auto; 对于排版对于排版,我们用得最多的我们用得最多的 css 描述可能就是描述可能就是 float:left.有有的时候我们需要在的时候我们需要在 n 栏的栏
11、的 float div 后面做一个统一的背景后面做一个统一的背景,譬如譬如: 比比如我们要将如我们要将 page 的背景设置成蓝色的背景设置成蓝色,以达到所有三栏的背景以达到所有三栏的背景颜色是蓝色的目的颜色是蓝色的目的,但是我们会发现随着但是我们会发现随着 left center right 的的向下拉长向下拉长,而而 page 居然保存高度不变居然保存高度不变,问题来了问题来了,原因在于原因在于page 不是不是 float 属性属性,而我们的而我们的 page 由于要居中由于要居中,不能设置成不能设置成float,所以我们应该这样解决所以我们应该这样解决 再嵌入一个再嵌入一个 float
12、 left 而而宽度是宽度是 100%的的 DIV 解决之解决之 万能万能 float 闭合闭合(非常重要非常重要!) 关于关于 clear float 的原理的原理可参见可参见 How To Clear Floats Without Structural Markup,将以下代码加入将以下代码加入 Global CSS 中中,给需要闭合的给需要闭合的 div 加上加上 class=“clearfix“ 即可即可,屡试不爽屡试不爽. /* Clear Fix */ .clearfix:after content:“.“; display:block; height:0; clear:both;
13、 visibility:hidden; .clearfix display:inline-block; /* Hide from IE Mac */ .clearfix display:block; /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置：或者这样设置：.hackbox display:table; /将对象作为块元素级的表格显示将对象作为块元素级的表格显示 11.高度不适应高度不适应 高度不适应是当内层对象的高度发生变高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用化时外层高度不能自动
14、进行调节，特别是当内层对象使用margin 或或 paddign 时。时。 例：例： #box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; p 对象中的内对象中的内容容 解决方法：在解决方法：在 P 对象上下各加对象上下各加 2 个空的个空的 div对象对象 CSS 代码：代码：.1height:0px;overflow:hidden;或者为或者为DIV 加上加上 border 属性。属性。 12 .IE6 下为什么图片下有空隙产生解决这个下为什么图片下有空隙产生解
15、决这个 BUG 的的方法也有很多方法也有很多,可以是改变可以是改变 html 的排版的排版,或者设置或者设置 img 为为display:block 或者设置或者设置 vertical-align 属性为属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决都可以解决. 13.如何对齐文本与文本输入框如何对齐文本与文本输入框 加上加上 vertical-align:middle; 14.web 标准中定义标准中定义 id 与与 class 有什么区别吗有什么区别吗 一一.web 标准中是不容许重复标准中是不容许重复 ID 的的,比如
16、比如 div id=“aa“ 不容许重复不容许重复 2 次次,而而 class 定义的是类定义的是类,理论上可以无限重复理论上可以无限重复, 这样需要多次引用的定义便可以使用他这样需要多次引用的定义便可以使用他.二二.属性的优先级问题属性的优先级问题 ID 的优先级要高于的优先级要高于 class,看上看上面的例子面的例子三三.方便方便 JS 等客户端脚本等客户端脚本,如果在页面中要对某个对如果在页面中要对某个对象进行脚本操作象进行脚本操作,那么可以给他定义一个那么可以给他定义一个 ID,否则只能利用遍否则只能利用遍历页面元素加上指定特定属性来找到它历页面元素加上指定特定属性来找到它,这是相对浪费时间这是相对浪费时间资源资源远远不如一个远远不如一个 ID 来得简单来得简单. 15. LI 中内容超过长度后以省略号显示的方法中内容超过长度后以省略号显示的方法 此方法此方法适用
