• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css padding属性兼容ie6,ie8,firefox实例详解

css padding属性兼容ie6,ie8,firefox实例详解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含padding,兼容等相关知识,佚名 希望在学习及工作中可以帮助到您
本文章简单的介绍一下关于padding兼容ie6,ie8,firefox的做法,因为不同浏览器对padding理解不一样,所以在浏览时会有点差别。

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

例子 1
padding:10px 5px 15px 20px;上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

例子 2
padding:10px 5px 15px;上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px

例子 3
padding:10px 5px;上内边距和下内边距是 10px
右内边距和左内边距是 5px

例子 4
padding:10px;所有 4 个内边距都是 10px
设现在设置一个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

您可能想查找下面的文章:

  • 关于CSS Padding那些你意想不到的用法示例
  • select元素中设置padding效果的方法
  • padding ie 不兼容问题
  • 关于ol和ul的padding和margin默认值
  • ie6布局网页padding值加倍的解决方法
  • css行内元素padding,margin,width,height没有变化
  • padding盒子内部文字跟盒子之间的距离
  • cellpadding=0 cellspacing=0的css替代写法
  • 解决IE与火狐浏览器padding-top差2px问题
  • css中padding和margin的异同点介绍

相关文章

  • 2017-08-06纯CSS打造兼容各种浏览器的几何图形打包
  • 2017-08-06使用div+CSS将页脚始终控制在页面最下方的方法
  • 2017-08-06CSS实现Tab布局的简单实例(必看)
  • 2017-08-06对未知高度的图片设置垂直居中的方法详解
  • 2017-08-06举例详解CSS中的的优先级
  • 2017-08-06IE矩阵Matrix滤镜旋转与缩放及如何结合transform
  • 2017-08-06css语法结构
  • 2017-08-06一款基于css3的动画按钮代码教程
  • 2017-08-06CSS在固定宽高的div内实现垂直居中的实例详解
  • 2017-08-06解析width:100%;与width:auto;的区别

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3实现鼠标悬停显示扩展内容
    • css实现的漂亮的分页效果代码(橘黄色与蓝色)
    • CSS Hack 有关浏览器兼容方面
    • CSS下!important属性
    • gif可以当成css的背景图片与普通图片是一样的
    • css常用代码分享(css圆角代码、渐变、密码框)
    • 使用CSS去掉超链接的虚线边框的方法
    • 详解IE浏览器的haslayout属性及相关兼容性问题解决
    • CSS3制作文字半透明倒影效果的两种实现方式
    • css3.0新属性效果在ie下的解决方案

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有