在浏览器之间统一字体大小，使用百分号

我发现，如果使用绝对的px来规定字体大小的话，在非ie的浏览器里面可以仅针对于文字进行缩放，但是可能会破坏布局，而将整个页面缩放的功能则比较常用简单。但是，在ie6下面，没有整体缩放这个功能，而如果仍然用px来定义大小，那么将导致调整文字大小这个功能失效。也就是说，用px，ie6下就没办法改变字体大小的。

 

而如果我们不用px定义大小而用百分号的话。ie6下的默认字体大小会比ff偏大一些，所以不能直接在body里面定义百分号。于是就想到了hack。

 

我单独开一个css文件，叫ie6.css讲关于ie6的hack全部都放在这里面，这样便于管理。

 

里面写道

Html代码

1. body{   
2.     font-size:70% !important;   
3. }  

源代码 复制 打印

1. body{  
2.     font-size:70% !important;  
3. }  

 有人说ie6不是不支持!important的吗？其实ie6是支持的，但是是有bug的，利用这个bug可以做hack。我们这里没有用这个bug。

 

再在正常的css文件里面写道

Html代码

1. body {   
2.     color: black;   
3.     font-family: Tahoma, Helvetica, Arial,"\5fae\8f6f\96c5\9ed1" ,"\5b8b\4f53",sans-serif;   
4.     font-size:85%;   
5. }  

源代码 复制 打印

1. body {  
2.     color: black;  
3.     font-family: Tahoma, Helvetica, Arial,"\5fae\8f6f\96c5\9ed1" ,"\5b8b\4f53",sans-serif;  
4.     font-size:85%;  
5. }  

 

可以看到font-size是有区别的。

 

那么怎么让ie6加载ie6.css呢？我们用条件注释来做。

 

Html代码

1. <!--[if IE 6]>  
2. <link rel="stylesheet" href="6.css}" />  
3. <![endif]-->    

源代码 复制 打印

1. <!--[if IE 6]>  
2. <link rel="stylesheet" href="6.css}" />  
3. <![endif]-->    

 

 

这样就ok了。

 

在body子元素的字体大小定义中，用em来代替px。这样整个页面都可以同步。

另外用em来当做line-height:padding、margin或者是border也可以达到同步的效果，很不错的哦！

转： http://www.javaeye.com/topic/953415