biggates的心得
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  19 随笔 :: 1 文章 :: 11 评论 :: 0 Trackbacks
CSS Hacks : 修复 IE 的 Padding 错误
由于众所周知的原因，IE在处理 padding 样式的时候总是让我们不那么顺心，如下图（图片来自苏沈小雨的CSS2中文手册）：
padding 属性示意图

在 padding 数值很大的地方（比如标题栏的背景 div 和标题之间），浏览器的差别就显示的很明显。
通过查询，找到了一种Hack方法。比如 CSS 原来是这样的：
.titleblock {
padding:2em; margin:0; text-align:left;
background-image:url('../image/titlebg.jpg'); height:140px;
background-repeat:no-repeat; background-position:right center;
}
其中的 height 属性为140px，在FF中整个 div 的高度是 140 + 2* (2em) 约为 190px ，而在IE6和IE7中均为 140px ，这样就导致有大概 50px 的差别。
只要这样写：
.titleblock {
padding:2em; margin:0; text-align:left;
background-image:url('../image/titlebg.jpg'); height:140px;
background-repeat:no-repeat; background-position:right center;
}

*html .titleblock {
height:190px;
}
也就是在下面添加一个 *html 块(这个块只有IE 6+ 支持，FF不支持)，在里面把实际的数量写进去就行了。

PS：来自 http://webdesign.about.com/od/css/a/aaboxmodelhack.htm 的方法是：
div {
    width: 100px;
    padding: 10px;
    border: 10px solid #000;
}
* html div {
    \width: 140px; /* for IE5 and IE6 in quirks mode */
    w\idth: 100px; /* for IE6 in standards mode */
} 
不过根据实验，并不能得到合适的数值。

参考来源：http://www.cnblogs.com/Randy0528/archive/2007/09/29/910760.html
posted on 2008-04-01 23:27 biggates 阅读(168) 评论(0)  编辑 收藏 所属分类: HTML/CSS

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-04-01 23:30 编辑过
 
另存  打印
最新IT新闻:
· 金山:360的免费杀毒只能是短期行为
· 江民科技回应杀毒软件免费说 没病不能乱吃药
· WCG2008中国区总决赛打响
· 新型的编程语言:eC
· 免费的BitDefender能复制卡巴斯基的成功吗?
博客园新闻频道  博客园首页  社区