大连网站制作客服
主营业务
  • 网站制作
  • 网站维护
  • 网站推广
  • 域名空间
联系电话
联系人:尹先生
QQ:1050706570
E-mail:biz@noonenet.cn
地址:大连市甘井子区哲林北园29号
·首页 >> 设计表现 >> CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)---续

CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)---续

  更新时间:2009-6-24 12:03:29    编辑:小苗儿

哈哈。。续上一篇文章。这是本人在网上查找的相关资料,希望对同道中人有一些帮助,同时也谢谢大家对我的关注。。

CSS技巧

1.div的垂直居中问题

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

2. margin加倍的问题
   
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;   
例如:   
<#div id=”imfloat”>   
相应的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; //使浮动忽略}   
这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);   
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;   

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.DIV浮动IE文本产生3象素的bug   

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.   
#box{ float:left; width:800px;}  
#left{ float:left; width:50%;}  
#right{ width:50%;}  
*html #left{ margin-right:-3px; //这句是关键}   
<div id="box">  
<div id="left"></div>  
<div id="right"></div>  
</div>

 

原载: No.1网络工作室 http://www.noonenet.cn/
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。


Tags:CSS浏览器兼容,IE7,IE,FireFox
同类文章:
· CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
返回新闻列表
top
本站关键字:大连网站制作 - 大连网站建设 - 大连网页制作
CopyRight © 2009-2012 No.1网络工作室 All Rights Reserved  sitemap
地址:大连市甘井子区哲林北园29号 电话:13889684613 E-mail:biz@noonenet.cn QQ:1050706570
logo