CSS兼容性(IE和Firefox)技巧大全（2）

mseed

④万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

1. /* Clear Fix */
   
2. .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
   
3. .clearfix { display:inline-block; }
   
4. /* Hide from IE Mac */
   
5. .clearfix {display:block;}
   
6. /* End hide from IE Mac */
   
7. /* end of clearfix */

复制代码

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
９．高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：

1. #box {background-color:#eee; }
   
2. #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
   
3. <div id="box">
   
4. <p>p对象中的内容＜/p>
   
5. </div>

复制代码

解决技巧：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
10 .IE6下为什么图片下有空隙产生
解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top 　
bottom 　middle 　text-bottom 都可以解决.
11.如何对齐文本与文本输入框
加上 vertical-align:middle;

1. <style type="text/css">
   
2. <!--
   
3. input {
   
4. width:200px;
   
5. height:30px;
   
6. border:1px solid red;
   
7. vertical-align:middle;
   
8. }
   
9. -->
   
10. </style>

复制代码

12.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.