导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 标准下各种浏览器的差异解决背景不能延伸的问题 »

解决浏览器显示差异

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

1、The IE Doubled Float-margin Bug

在IE/win中显示如下代码其结果是让人愤恨的:

xhtml代码:
<div class="floatholder">
<div class="floatbox">
<div>Float</div>
</div><div style="clear:both;"></div >
</div>
css代码:
.floatholder{
weith:400px;
height:200px;
}
.floatbox {
background-color:#f00;
float:left;
width:150px;
heith:150px;
margin:5px 0px 5px 50px;
}
解决方法:

在CSS代码.floatbox中加入

display:inline;

2、The IE Escaping Floats Bug

在IE/win中显示如下代码其结果是大部分的浮动物都溢出父层:

xhtml代码:
<div class="floatholder"> 
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div class="floatbox"> </div>
<div style="clear:both;"> </div>
</div>
css代码:
.floatholder {
border:2px solid #000;
margin:0 20% 20px 0;
}
.floatbox {
float:left;
width:50px;
height:50px;
margin:2px;
background-color:#bb7;
color:#ffd;
text-align:center;
}
解决方法:

为父层的DIV再加一个Class hollyback

<div class="floatholder hollyback">

在CSS中加入如下代码:

/* hide from IE/win \*/
* html .hollyback {
height:1%;}
/*end hide */

我们可以把所有的IE5.x 集中起来放在一个补丁文件中再用调入这样的话我们就可以集中解决IE5.x 的BUG,而不用一边设计一边修正BUG,也不用把所有的修正内容放在一个文件中,可以加大模块化建设进程。

/* IE5/Win Only Styles
----------------------------------------------- */
@media tty {
i{content:"\";/*" "*/}} @import url('ie5win.css'); /*";}
}/* */
作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295

发表评论:

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

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Jonmax.com. All Rights Reserved.

Search

最新评论及回复

最近发表

资助者链接