IE6双倍margin间距三大解决方案——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
IE6双倍margin间距三大解决方案

发布作者:萧强   发布时间:2013-05-06   阅读次数:11209

大家都碰到过一个很头疼的问题就是margin在IE6的情况下是双倍的margin值,这样的bug怎么解决呢,w3cdream给大家总结了三种方案,有兴趣的试一下,你对IE6双倍margin间距解决方法是否比较熟悉,这里和大家简单分享一下,希望通过本文的学习你对此解决方法有深刻的认识。

IE6双倍margin间距解决方法

方法1:

假设:一个div代码为

1 <divstyledivstyle="float:left;margin-left:10px;"> </div>

当一个css样式同时设置了float和margin的属性的时候,在ie7+及火狐上,该元素显示正常。但是在ie6下,将会出现双倍的margin-left属性值,也就是上面那段代码中的div在ie6下的实际margin-left的值是20px;

解决此办法的最简单的方法是,在style中添加:display:inline;

如上面的代码将改为

1 <divstyledivstyle="float:left;display:inline;margin-left:10px;">  </div>

方法2:

可以使用以下办法来书写兼容浏览器的css代码:

第一种

:.div{  background:orange;/*ff*/  
      *background:green!important;/*ie7*/  *background:blue;/*ie6*/  
     }


第二种

:.div{  margin:10px;/*ff*/  
        *margin:15px;/*ie7*/  _margin:15px;/*ie6*/  
       }


第三种

:#div{color:#333;}/*ff*/  *html#div{color:#666;}/*IE6*/ 

*+html#div{color:#999;}/*IE7*/  

九步轻松解决IE6的各种疑难杂症 让IE6支持fixed的捷径 IE6 IE7 IE8三个版本的CSS兼容速查手册 IE6下使用CSS定义DIV高度行之有效的办法 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题

方法三

display:inline定义和用法

display 属性:设置元素如何显示。
inline :此元素会被显示为内联元素,元素前后没有换行符。

今天就和大家讲讲display:inline在编写CSS中的具体应用,我相信很多朋友都碰到过用DIV+CSS来编写网页代码的时候,明明Macromedia Dreamweaver里显示是正常的,但上传到FTP上用IE6来查看网站的时候却出现了div错位或是下移,这是什么原因呢?

我们平常用DIV+CSS编写网页的时候经常会用到float来定义元素在哪个方向浮动,当margin在设置float属性的情况下出现时,margin的值会加倍。这是一个在ie6中都存在的bug

<style type=text/css>

.c_d_main{width:641px; margin-left:27px;}

</style>

看看ie6显示效果:


display:inline的用法

IE7和其它浏览器的效果:


display:inline的用法
解决方案是在这个div里面加上 display:inline;

<style type=text/css>

.c_d_main{width:641px; margin-left:27px;display:inline;}

</style>

我们在去看看,这下就好了,是不是很简单啊!

如需转载,请注明出处:w3cdream梦想站

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

css hack解决方案

热点文章

新闻资讯

标签云

友情赞助