css padding在ie6,ie8,firefox中兼容性用法

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

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

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

 代码如下 复制代码

h1 {padding: 10px 0.25em 2ex 20%;}

假设现在设置一个padding值,这个值在FF、IE8、IE6中都不一样
首先考虑的是FF下的值

 代码如下 复制代码
.test{padding:10px}

接着考虑IE8下的值

 代码如下 复制代码
.test{padding:10px;*padding:9px}

最后考虑IE6下的值

 代码如下 复制代码
.test{padding:10px;*padding:9px;_padding:8px}

这样就可以了。
做兼容性时,最先考虑FF、opera这些浏览器,最后考虑IE6。
拿上例来说,IE8、IE6都可识别*,但FF不能识别。
所以拿*来做IE8的Hack,而_在FF和IE8中都不识别,只有IE6能识别,所以用_做IE6的Hack

上面我们讲了padding其实它还可以这样写

单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:

 代码如下 复制代码
padding-top
padding-right
padding-bottom
padding-left

您也许已经想到了,下面的规则实现的效果与上面的简写规则是完全相同的:

 代码如下 复制代码

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

浏览器支持
所有浏览器都支持 padding 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

时间: 2024-09-24 20:49:32

css padding在ie6,ie8,firefox中兼容性用法的相关文章

css padding兼容ie6,ie8,firefox办法

padding 简写属性在一个声明中设置所有内边距属性. 说明 这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠.元素的背景会延伸穿过内边距.不允许指定负边距值. 注释:不允许使用负值. 例子 1 padding:10px 5px 15px 20px;上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px 例子

css padding在ie7、ie6、firefox中的兼容问题

padding 简写属性在一个声明中设置所有内边距属性. 说明 这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠.元素的背景会延伸穿过内边距.不允许指定负边距值. 注释:不允许使用负值. 例子 1 padding:10px 5px 15px 20px;上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px 例子

padding标记 在ie7、ie6以及firefox中的兼容

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.所以要解决padding的兼容问题就要靠前面提到的标签. 以sccas-site为例,左侧导航栏在padding上产生了ie6.ie7以及ff浏览器不兼容,修改代码如下:  代码如下 复制代码 #menu7 li a { height:25px; /*border-right:1px solid #666666;*/ text-decoration: none; ?? margin:

css vertical-align在ie6,ie8不同用法分析

值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-height" 属性的百分比值来排列此元素.允许使用负值. in

CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决

1.区别IE和非IE浏览器 #tip { background:blue; /*非IE 背景藍色*/ background:red 9; /*IE6.IE7.IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF [区别符号]:「9」.「*」.「_」 [示例]: #tip { background:blue; /*Firefox 背景变蓝色*/ background:red 9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _backgro

区别不同浏览器CSS hack:区分IE6,IE7,IE8,firefox

 区别不同浏览器,CSS hack写法,从网上看到很多文章,现总结一下,尽量全面一点,备查. 注意下面介绍的这些hack写法仅适用于XHTML1.0.如果没有在HTML最前加上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&quo

javascript css在IE和Firefox中区别分析_javascript技巧

一.document.formName.item("itemName") 问题  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

js CSS的 float class宽高赋值不兼容处理方法(ie7,ie8,firefox)

css的"float"属性 [分析说明]网页特效访问一个给定css 值的最基本句法是:object.style.property,但部分css属性跟网页特效中的保留字命名相同,如"float","for","class"等,不同浏览器写法不同. 在ie中这样写: document.getelementbyid("header").style.stylefloat = "left"; 在f

针对IE6,IE7,Firefox的CSS

css 我们在用CSS进行构建网页的时候,IE6跟Firefox之间的差异问题可以用 !important 来解决(这种方法尽量少用),但是IE7似乎还是不认识 !important ,而且它跟IE6之间也存在一些差异.浏览器的不一致性总是让人很头疼! 下面分别给出IE6\IE7\Firefox的hack代码: #example { color: #333; }     /* Firefox */* html #example { color: #666; }     /* IE6 */*+ht