PHPCMS(V9) 文章内容导致页面错位的解决办法
2012-05-23 23:54:55   来源：我爱运维网   评论：0 点击：

将文章带格式复制到PHPCMS(V9)的内容编辑器时,经常出现网页在某些浏览器上显示错位.很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：

１、给父DIV也设上float(大家可能认为是废话,不是很推荐) 

2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙) 

比如： 

.parent{width:100px;}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;}  
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;} 

<div class="parent">  
<div class="son1"></div>  
<div class="son2"></div>  
<div class="clear"></div>  
</div> 

3、万能 float 闭合 

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.  
代码:  
<style>  
/* Clear Fix */  
.clearfix:after {  
content:".";  
display:block;  
height:0;  
clear:both;  
visibility:hidden;  
}  
.clearfix {  
display:inline-block;  
}  
/* Hide from IE Mac \*/  
.clearfix {display:block;}  
/* End hide from IE Mac */  
/* end of clearfix */  
</style> 

:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。 

4、overflow:auto（刚看到的，极力推荐） 

只要在父DIV的CSS中加上overflow:auto就搞定。 

举例： 

.parent{width:100px;overflow:auto}  
.son1{float:left;width:20px;}  
.son2{float:left;width:80px;} 

〈div class="parent"〉  
〈div class="son1"〉〈/div〉  
〈div class="son2"〉〈/div〉  
〈/div〉 

原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添 加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。 (试了一下，其实不加"_height:1%“在IE下也行，留着吧。)

    综上所述,在PHPCMS(V9)中一劳永逸的解决办法是修改statics/css/default_blue.css 文件,将:
#Article .content{ font-size:14px} 
修改为:
#Article .content{ font-size:14px;overflow:auto} 
即可.