北京网站建设|北京网站优化|北京SEO|北京网页设计—逸诚科技http://www.56mp.cn

关于display:inline的具体应用

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

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

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

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

例如:

<style type="text/css">
html{ margin:0 auto; padding:0}
.body{margin:0 auto; width:366px; }
.box1{float:left; width:128px; height:128px; background:url(001.jpg); margin:0 0 0 50px;}
.box2{float:right; width:128px;  height:128px; background:url(002.jpg);margin:0 0 0 50px;}
</style>
<body>
<div class="body">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>

看看IE6中的效果:

IE6中的效果

IE6中的效果

IE7和其它浏览器的效果:

IE7和其它浏览器的效果

IE7和其它浏览器的效果:

如果有什么不明白的可以加首页上的QQ进行咨询。
转载时请注明出处。此信息出自逸诚科技:http://www.56mp.cn

标签:displayinlineIE6不兼容层顶部对齐
分类:网站建设| 发布:逸诚科技| 查看: | 发表时间:2010-3-3
原创文章如转载,请注明:转载自逸诚科技 http://www.56mp.cn/
本文链接:http://www.56mp.cn/post/91.html

相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

北京网站建设 | 北京SEO | 关于我们 | 广告合作
Copyright 2009-2010 Powered By 逸诚科技 京ICP备09011301号 
本站所有资料均为逸诚科技原创,转载时请注明版权,谢谢您的合作!