FF与IE下CSS Padding效果不同解决方案

开发 前端
由于Firefox与IE不兼容CSS网页布局,所以在Firefox与IE下CSS一些属性的效果也就不尽相同,这里和大家分享一下 在Firefox与IE下CSS Padding效果不同的解决方法。

本文向大家描述一下在Firefox与IE下CSS Padding效果不同的解决方法,首先看一下CSS padding属性的定义,CSS padding属性用来定义元素的内边距,它接受长度值或百分比值,但不允许使用负值。

在Firefox与IE下CSS Padding效果不同的解决方法

CSS padding属性

CSS padding属性定义元素的内边距。padding属性接受长度值或百分比值,但不允许使用负值。

例如,如果您希望所有h1元素的各边都有10像素的内边距,只需要这样:

h1{padding:10px;}您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

  1. h1{padding:10px0.25em2ex20%;}  
  2.  

问题:

  1. <div style="padding-top:5px;width:200px;height:15px;  
  2. background-color:#ffeeee"> 
  3.  test   
  4. </div> 
  5.  

以上代码在IE中和Firefox会有不同的效果。最主要原因是Firefox解释padding-top与IE的效果不同

Firefox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,要解决这一个矛盾,可以利用!important

  1. padding-top:5px;  
  2. height:10px !important;  
  3. height:15px;  
  4.  

以上定义了两个height, 其中一个后面加了!important , IE将会忽略这个属性,而使用后面的height:15px; 而Firefox却不会忽略这个属性, 直接使用height:10px,这样就可以很巧妙的解决这个问题。

【编辑推荐】

  1. DIV CSS网站布局八个小技巧
  2. JavaScript动态创建div属性和样式
  3. 14大CSS工具提高网页设计效率
  4. 五大CSS3新技术用法指导
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-24 10:53:49

CSSpaddingIE

2010-09-09 15:44:21

IEFFCSS

2010-08-23 16:09:31

IEfirefoxPadding

2010-09-15 10:25:18

IE7IE8CSS兼容性

2010-08-18 14:14:41

IE6IE7FF

2010-06-02 10:21:56

Windows 7虚拟化

2010-09-01 14:51:12

CSSIEFirefox

2022-04-07 07:31:30

CSSCSS Reset前端

2010-10-08 16:31:08

AjaxIE6

2010-08-20 11:01:10

IE7IE8CSS

2010-08-17 15:26:38

IE7IE8CSS兼容性

2009-08-03 18:06:28

JS性能问题

2010-09-16 10:50:55

CSS兼容IE6

2010-10-08 13:27:51

IE6pngJavaScript

2010-09-10 11:15:34

DIV嵌套

2011-06-03 15:41:27

CSS HACK

2022-04-19 06:27:13

CSS数学函数calc

2010-08-18 14:32:07

IE6IE7IE8

2023-09-11 07:11:04

CSSNesting

2013-09-23 10:22:20

点赞
收藏

51CTO技术栈公众号