div+css浮动定位-google Chrome和ie/firefox的不同

作者 FarLee 2010年4月9日 0:02:30   ‖浏览(33,789)

非常感谢Ray Chow博友今天留言告知:博客里Google Adsense广告图片将评论的文本框给挡住了。其实根据《中华人民共和国感谢法》,应该先感谢伟大的country、gov和party的。恕我无知,下次一定好好学习、天天向上。

远方博客当初在增加这个Google Adsense广告模块的时候,在windows xp 和 linux ubuntu下用IEFirefox浏览器测试了一下,基本上div+css定位都没有什么问题。所以想想应该是Google Chrome浏览器对div之间css float的兼容性问题,后来向ray chow证实确实是Chrome+Win 7。

先看看博客的HTML代码结构:

<div class="container">

<!--文章div-->
<div class="posts-wrap">
</div>

<!--边栏div-->
<div id="sidebar">
</div>

<!--Google adsense div : ggad-->
<div id="gadsidebar">
</div>

</div>

在container中有3个div块级元素,分别是从远方博客页面上可以看到的右侧的文章div“posts-wrap”,位于左侧的边栏“sidebar”,以及div流中的第三个div:google广告图片。三个div的CSS样式如下:

.posts-wrap {
float:right;
clear:none;
width:625px;
padding: 0 15px;
}

#sidebar {
padding-top:10px;
padding-left:5px;
padding-right:10px;
margin:0 auto;
overflow:hidden;
float:left;
clear:none;
width:325px;
}

#gadsidebar {
margin:0 auto 0 4px;
overflow:hidden;
clear:none;
/* float:left;  */
width:340px;
}

在文档流中,将post-wrap放在边栏sidebar前面,同时post-warp设置CSS浮动float:right,sidebar CSS设置向左浮动。这样可以让网页先加载比较重要的post-wrap部分,边栏后面再加载,网速慢的时候访客不用等待边栏加载完毕即可以阅读文章内容。

另外,我没有把gg广告模块gadsibar嵌套到边栏的div里面。而是嵌套在母容器container里面,也就是在sidebar文档流之后。这样的Div+CSS在主流浏览器IE和Firefox中的效果就是,google adsense 广告模块会根据“post-wrap”和”sidebar”的高度自适应填充到空白的地方:如果sidebar高度大于post-wrap,则ggad填充到postwrap的下方,反之则在sidebar的下方。如下图所示:

div float 1google adsense div float css

div属于块级元素,原本一个div单独占一行,除非设置css float。比如,在文档流中,如果前一个块级元素div设置了CSS属性为float,则跟着它的下一个div会自动跟着流上来填充空白的地方,两个div占同一行,前提是两个div都设置了width,而且width总宽度不会超过母容器的大小。至少在IE和Firefox中是这样的。

但是在Goolge Chrome浏览器中却不是这样。在windows XP下测试Chrome,google 广告这个div块级元素ggad都会被挤到post-wrap和sidebar的下方,不会流上来填充空白;在Win7和linux ubuntu 下测试Chrome (beta),这时候,ggad 则会无视post-warp的存在,挤到它的前一个块级元素sidebar的下方,即出现了Ray Chow告知的那种情况:google 广告图片将post-wrap中输入评论的文本框挡住了。

找出了问题的原因,修正就很简单了,给gadsidebar也设置CSS浮动:float:left ;即可,再将CSS设置一下让google adsense图片在边栏中显示居中。最后在win 和linux 下测试ie,firefox,chrome就都不会出现挡住了不该挡住的地方的情况了。如果还有问题还请大家告知哦。

结尾再补充一个很遗憾的事情,Google Chrome 扩展IE tab和firefox的附件组件IE tab均不支持linux,linux下又不能安装IE浏览器,IE测试还真有点麻烦。不知道大家是怎么处理这种情况的?

4.10更新:weiking  提示ie6下”gadsidebar”这个div出现被撑到网页最底部去了,导致页面太长的情况。原来是忘记了存在IE6双边距的bug(符合div块级元素+float:left+margin-left条件时就会产生的bug),再增加dispaly:inline; 属性终于好了。


“div+css浮动定位-google Chrome和ie/firefox的不同”文章评论(7)

  1. 过来围观一下~~

  2. 我使用的DIV都比较标准,在各大浏览器还算正常!

  3. 呃,好多代码啊,头大了。

  4. 不懂,路过….

  5. 哈,也在学习层定位中!

  6. Blaine Mcmanis

    Hey! An individual in my Myspace group shared this website with us so I came to offer it a look. I??¥m certainly taking pleasure in the info. I??¥m book-marking and will probably be tweeting this to my followers! Great weblog and superb design and fashion.

Trackbacks/Pingbacks

  1. div+css浮动定位-google Chrome和ie/firefox的不同 | 75号工坊

来说兩句