浅谈网站兼容性
上次已经分享过网站兼容性需要注意的一些问题并如何解决,这次就继续这个话题分享下。
1、当在网页上插入一张图片,会经常遇到在其他浏览器中显示正常,唯独在ie6中图片下方会多出一点空隙。
解决方法:设置img的显示方式为 display:block
2、表单输入框中,鼠标点击后,光标上下移动,或 出现半截情况。
解决方法:.input{line-height:16px;padding:2px 3px;height:16px;}
3、ie6.0下面经常会出现border边框断断续续的问题,在浏览器下一刷新边框是全的,再一刷新边框就会有断开。原因就是你的外层有边框,边框层里面嵌套的层里面有浮动,由于这个原因会引起ie6下面边框断裂
解决方法:在外层加zoom:1;或者height:100%;
4、在ie6.0下浮动双倍显示的问题,比如你设置了左边距5px,但实际上左边距10px
解决方法:在样式里面加入display:inline就可以解决
5、float的div闭合,清除浮动,自适应高度
举个例子:<div id="float1"></div> <div id="float2"></div> <div id="not"></div>
这里的not并不希望继续平移,而是希望往下排。(其中float1、float2已经设置为float:left),这段代码在ie里是没有问题的,但是FF就有问题了。
原因是not并非float标签,必须将flost标签闭合,在<div id="float2"></div> <div id="not"></div>之间加上 <div id="clear"></div>(clear样式为#clear{clear:both;})
这个div一定要主要位置,而且要于2个float:left标签同级,之间不能存在嵌套关系。
6、高度不适应
高度不适应是当内层对象的高度发送变化时外层的高度不能自适应,特别是当内层对象使用padding或margin时
例子:<div><p style="margin-top:20px;margin-bottom:20px;text-align:center;">内容</p></div>
解决方法:在p标签的上下各加2个空的div对象(.a{height:0px;overflow:hidden;}),或者为div加上border属性。
7、在ie6.0下怎么定义1px左右高度的容器
解决方法:这个问题是ie6.0下默认行高造成的,下面有3个解决方法,overflow:hidden | zoom:0.08 | line-height:1px;
好了,今天就先分享到这吧
分享按钮
1、当在网页上插入一张图片,会经常遇到在其他浏览器中显示正常,唯独在ie6中图片下方会多出一点空隙。
解决方法:设置img的显示方式为 display:block
2、表单输入框中,鼠标点击后,光标上下移动,或 出现半截情况。
解决方法:.input{line-height:16px;padding:2px 3px;height:16px;}
3、ie6.0下面经常会出现border边框断断续续的问题,在浏览器下一刷新边框是全的,再一刷新边框就会有断开。原因就是你的外层有边框,边框层里面嵌套的层里面有浮动,由于这个原因会引起ie6下面边框断裂
解决方法:在外层加zoom:1;或者height:100%;
4、在ie6.0下浮动双倍显示的问题,比如你设置了左边距5px,但实际上左边距10px
解决方法:在样式里面加入display:inline就可以解决
5、float的div闭合,清除浮动,自适应高度
举个例子:<div id="float1"></div> <div id="float2"></div> <div id="not"></div>
这里的not并不希望继续平移,而是希望往下排。(其中float1、float2已经设置为float:left),这段代码在ie里是没有问题的,但是FF就有问题了。
原因是not并非float标签,必须将flost标签闭合,在<div id="float2"></div> <div id="not"></div>之间加上 <div id="clear"></div>(clear样式为#clear{clear:both;})
这个div一定要主要位置,而且要于2个float:left标签同级,之间不能存在嵌套关系。
6、高度不适应
高度不适应是当内层对象的高度发送变化时外层的高度不能自适应,特别是当内层对象使用padding或margin时
例子:<div><p style="margin-top:20px;margin-bottom:20px;text-align:center;">内容</p></div>
解决方法:在p标签的上下各加2个空的div对象(.a{height:0px;overflow:hidden;}),或者为div加上border属性。
7、在ie6.0下怎么定义1px左右高度的容器
解决方法:这个问题是ie6.0下默认行高造成的,下面有3个解决方法,overflow:hidden | zoom:0.08 | line-height:1px;
好了,今天就先分享到这吧