`

CSS兼容浏览器(1)

浏览器CSSIEFirefoxHTML 
阅读更多

1、浏览器兼容的前提是养成好的网页开发习惯：

     本人在做了几个月的前端浏览器兼容问题上，经常出现的不兼容是标记写法错误或简略导致的。例如Div的写法，一定要遵循好的习惯。

推荐写法：
<div></div>
不推荐的写法：
<div/>

2、Div中的文字在不同浏览器下换行问题

    

 设置 style="white-space:normal;word- break : break -all;overflow:hidden; "
 

 

3、!important不同浏览器属性宽度不一样.

     IE7本身支持!important,针对不同浏览器高度、宽度、内外边距问题可采用如下方法解决 

.button-gap{   
     margin-right: 0px!imprtant;  /*ie7及firefox支持*/ 
     margin-right: 4px;/*ie6支持*/ 
}

4、*html和*+html问题

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. 
代码: 
<style> 
#wrapper { width: 120px; } /* FireFox */ 
*html #wrapper { width: 80px;} /* ie6 fixed */ 
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ 
</style> 
注意: 
*+html 对IE7的兼容 必须保证HTML顶部有如下声明： 
代码: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

 5、height属性问题

第一个兼容，IE FF 所有浏览器 公用（其实也不算是兼容） 
height:100px; 
第二个兼容 IE6专用 
_height:100px; 
第三个兼容 IE6 IE7公用 
*height:100px; 

height:100px; 
*height:120px; 
_height:150px; 
在FF下，第2、3个属性FF不认识，所以它读的是 height:100px; 
在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px; 
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

6、Div设置padding问题

IE在解析padding的时候认为padding是在宽度里面缩进，而firefox则认为是在宽度外边缩进，所以下面是两个等价的css设置。
IE下：
.i-div{width:800px;padding-left:12px;padding-right:12px;height:500px}
等同于火狐下的：
Div中不包含其他元素作为站位符使用的时候,如果该DIV只是空的占位符,且高度小于12px时,ie解析错位,因为IE默认认为是12px,解决方法是加入lineheight属性高度等于height,同时font-size:0px;这样在IE下才不会解析错位。
.i-div{ height:6px;width:20px;}
要在ie下兼容，应该为
.i-div{height:6px;line-height:6px;font-size:0px}

 .i-div{width:776px;padding-left:12px;padding-right:12px;height:500px}

为了兼容两个浏览器，可采用如下方法：
.i-div{width:776px!important;width:800px;padding-left:12px;padding-right:12px;height:500px}
注意：顺序一定不能变。火狐会取前者，而IE7两者都识别，最终取后者，其他IE识别后者。

7、关于空的DIV站位问题

如果DIV只是空的占位符,且高度小于12px时,ie在解析时,它默认是12px,解决方法是加入lineheight属性高度等于height,同时font-size:0px;这样在ie下才不会解析错位.
.i-div{ height:6px;width:20px;}
要在ie下兼容，应该为
.i-div{height:6px;line-height:6px;font-size:0px}

8、作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.防止页面内容超过Div高度而是div撑开，同时，注意Div内部Div要自适应高度则需要设置overflow: auto

 

9、对齐问题

（1）DIV中文字的垂直居中问题
设置vertical-align:middle;同时设置 line-height属性等于DIV的高度（不能换行）
（2）DIV水平居中问题
设置DIV的父容器style为text-align:center，然后将DIV的属性设置如下即可：
margin-left:auto; margin-right:auto;

10、图片的背景的平铺控制

1、只平铺一次
background-repeat:no-repeat;
2、水平平铺一次
background-repeat:repeat-x;
1、垂直平铺一次
background-repeat:repeat-y;

11、段首缩进设置

Text-indent:2em; //em 字体的高度

12、字间距的调整

letter-spacing属性用于设置字体间的距离，负值表示缩小，正值表示增大。
对于英文，通过word-spacing属性可以设置单词间的距离。

13、伪类的顺序：LVHA（link，visited、hover、active）顺序，违反该顺序，浏览器有些效果不支持。

14、文字和图片对齐

1、设置文字的外部属性valign为middle，或设置css样式中的text-align属性为middle（两个是等价的）
2、设置img元素的align属性值为absmiddle即可。

15.float属性带来的一些列问题

(1)、margin加倍的问题
 设置为float的div在ie下设置的margin会加倍。解决方案是在这个div里面加上 display:inline;样式如下：
#IamFloat{ 
float:left;
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/
}
(2)、
<#div id=”floatA” >
<#div id=”floatB” >
<#div id=” NOTfloatC” >
已知floatA、floatB设置了float：left属性，要求NOTfloatC不是水平排列，而是向下排列时，需要在<#div id=”floatB” >和<#div id=” NOTfloatC” >添加一个div，设置其class属性为：clear:both;即可。
(3)、作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 
当包含float的 
box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 
   例如某一个wrapper如下定义：    .colwrapper{ overflow:hidden; zoom:1; margin:5px
 auto;}  

(4)、对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
   <div id=”page”>   <div id=”left”></div>   <div 
id=”center”></div>   <div id=”right”></div>    
</div>   比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left 
center right的向下拉长,而 
page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 
   <div id=”page”>   <div id=”bg” 
style=”float:left;width:100%;background-color: #99CCCC”>   <div id=”left”></div>   
<div id=”center”></div>   <div id=”right”></div>
   </div>   </div>   再嵌入一个float left而宽度是100%的DIV解决之
分享到：
| treeview 局部刷新问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics