目前比较全面的浏览器CSS BUG兼容汇总

2020-05-10 11:44:24易采站长站整理

原因在于page不是float属性,而我们的page由于要居中,不能设置成float,
所以我们应该这样解决:    
<div id=”page”>   
<div id=”bg” style=”float:left;width:100%”>  
<div id=”left”></div>   
<div id=”center”></div>   
<div id=”right”></div>   
</div>   
</div>   
再嵌入一个float left而宽度是100%的DIV解决之 
10.万能float 闭合(非常重要!)    
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.   
/* 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 */    
或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}  
11.高度不适应    
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。    
例:   
#box {background-color:#eee; }     
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }     
<div id="box">     
<p>p对象中的内容</p>     
</div>     
解决方法:
在P对象上下各加2个空的div对象CSS代码:
.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
12 .IE6下为什么图片下有空隙产生 
解决这个BUG的方法也有很多,
可以是改变html的排版,
或者设置img 为display:block 
或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
13.如何对齐文本与文本输入框 
加上 vertical-align:middle; 
<style type="text/css"> 
<!– 
input {width:200px; height:30px;border:1px solid red;vertical-align:middle; }
–>
</style>
14.web标准中定义id与class有什么区别吗?
一.web标准中是不容许重复ID的,比如 div id="aa"   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.