html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表
IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版本之间的兼容情况。
IE6,IE7,IE8 CSS兼容速查表
现代Web设计与开发越来越看重浏览器兼容问题,IE每个新版本的推出,都在CSS的标准化方面前进一大步,同时,也就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版本之间的兼容情况。
1.居中问题
div里的内容,IE默认为居中,而Firefox默认为左对齐
可以尝试增加代码margin:auto
2.高度问题
两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在Firefox中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间
所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是height:100%;
但当这个div里面一级的元素都float了的时候,则需要在div块的***,闭和前加一个沉底的空div,对应CSS是:
.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3.clear:both
不想受到float浮动的,就在div中写入clear:both;
4.IE浮动margin产生的双倍距离#box{
float:left;
width:100px;
margin:000100px;//这种情况之下IE会产生200px的距离
display:inline;//使浮动忽略
}
5.padding问题
Firefox设置padding后,div会增加height和width,但IE不会(*标准的XHTML1.0定义dtd好像一致了)
高度控制恰当,或尝试使用height:100%;
宽度减少使用padding
但根据实际经验,一般Firefox和IE的padding不会有太大区别,div的实际宽=width+padding,所以div写全width和padding,width用实际想要的宽减去padding定义
6.div嵌套时y轴上padding和marign的问题
Firefox里y轴上子div到父div的距离为父padding+子marign
IE里y轴上子div到父div的距离为父padding和子marign里大的一个
Firefox里y轴上父padding=0且border=0时,子div到父div的距离为0,子marign作用到父div外面
7.padding,marign,height,width的傻瓜式解决技巧
注意是技巧,不是方法:
写好标准头"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
高尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div
宽尽量用margin,慎用padding,width算准实际要的减去padding。
列表类
1.ul标签在Firefox中默认是有padding值的,而在IE中只有margin有值
先定义ul{margin:0;padding:0;}
2.ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:{list-style:none;margin:0px;padding:0px;}
显示类
1.display:block,inline两个元素display:block;//可以为内嵌元素模拟为块元素
display:inline;//实现同一行排列的的效果
display:table;//forFirefox,模拟table的效果
◆display:block块元素,元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
,
,
,
- 和
- 是块元素的例子
◆isplay:inline就是将元素显示为行内元素,元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
,,,,,和是inline元素的例子
2.鼠标手指状显示
全部用标准的写法cursor:pointer;
背景、图片类
1.background显示问题
全部注意补齐width,height属性
2.背景透明问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE:filter:alpha(opacity=10);
Firefox:opacity:0.6;
Firefox:-moz-opacity:0.10;
***两个都写,并将opacity属性放在下面【编辑推荐】
点赞 0
html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表相关推荐
- 针对IE6\7\8\9\10浏览器的CSS hack大全详解
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题.在很多情况下,我们需要专门针对IE写c ...
- IE6.0,ie7.0与Firefox的CSS兼容性问题
现在我大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important 可以正确解释,会导致页面没按要求显示!搜索了一下,找到一个针对IE7不错 ...
- 关于video标签的视频格式在各个浏览器中的兼容问题
video为H5新标签,支持三种视频格式:MP4.WebM.Ogg 首先放上成品: 接下来看一下兼容性: 视频格式兼容性: 浏览器video标签兼容性: 可以看出,基本上mp4格式浏览器都兼容,其他两 ...
- vue cli3 兼容ie8以上浏览器,前端兼容;解决ie浏览器下白屏问题
1下载 babel-polyfill 模块 npm install babel-polyfill -s 2入口文件(main.js)第一行引入 import "babel-polyfill& ...
- css hacks (ie6,ie7,ie8,firefox,Chrome)
IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_", IE8能识别" ...
- div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法
简单方法: IE6,IE7,IE8,FF的兼容方法(2) 浏览器兼容代码: 浏览器 符号 IE6 IE7 IE8 FF * !important _ \9 *html *+html 说明:代表能识别: ...
- min-height最小高度的实现(兼容IE6、IE7、FF)
当容器的内容较少时,能保持一个最小的高度,以免破坏了布局或UI设计效果.而当容器内的内容增加的时候,容器能够自动的伸展以适应内容的变化. 声明:52CSS.com原创,转载请注意出处并加上链接. mi ...
- HTML基本语法之表单标签:表单的组成 ,表单域,表单控件元素(表单元素) ,input表单元素, label标签, 表单控件(表单元素), select表单元素, textarea表单元素
文章目录 表单标签 表单的组成 表单域 常用属性: 表单控件元素(表单元素) input表单元素 label标签 表单控件(表单元素) select表单元素 textarea表单元素 表单元素几个总结 ...
- html中icon标签作用,label标签的作用是什么?
label标签主要目的是为了提高用户体验. 为用户提高最优秀的服务. 标签为 input 元素定义标注(标记).[相关推荐:html文档] label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用 ...
最新文章
- 高额奖金+实习机会+官方证书 丨微众银行第二届金融科技高校技术大赛正式启动...
- 系统页面升级系统中_中交出行通勤班线系统全新升级!页面亮点功能说明
- Visual.Assist.X 菜单汉化
- eclipse maven配置_Gradle学习记录015 声明仓库,检查依赖,管理依赖的配置
- javascript 定时跳转页面
- python猜数字游戏
- c语言从入门到精通的几个阶段
- Linux shell脚本编写
- 喜马拉雅音频解析插件
- 转速环PI参数整定详解(三)——转速环开环传函特性及其整定策略(有最终推导结果公式)
- python大作业数据_python 爬虫初探和简单数据分析及可视化,帮学妹写个大作业...
- 数学家是如何做量化交易的
- java拼音汉字转换
- android 开发笔记 (黎活明)
- 实例011:养兔子 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?
- (PTA)数据结构(作业)7、栈和队列应用,字符串矩阵,树
- 朋也社区 v5.2.0 更新,新增手机号,微信登录外加主题一套
- 解决 Xshell6|Xftp6 强制升级问题
- (附源码)springboot 在线考试系统 毕业设计461317
- linux中grep命令详解及使用示例