有关css的兼容问题
时间:2019-08-22
本文章向大家介绍有关css的兼容问题,主要包括有关css的兼容问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
兼容性 1
页面在不同浏览器中可能显示不同
在IE6下 子级的宽度会撑开父级设置好的宽度
温馨提示:和模型的计算一定要精确,IE浏览器可能显示不同
兼容性 2
在IE6中,元素浮动,如果宽度需要内容撑开,
需要给里面的快元素 添加浮动 才可以
兼容性 3
在IE6,7下,元素要通过浮动{float:left;}排在同一排,就 需要
解决:给这个元素都加浮动
兼容性 4
注意标签的嵌套规则
兼容性 5
在IE6 下,元素的高度如果小于19px的时候,就会
当成19px来处理
解决方法:overflow:hidden;
兼容性 6
在IE6 下不支持1px的dotted边框样式
解决:切背景平铺
兼容性 7
在IE下大部分兼容性都是因为 haslayout 属性
的触发问题,尽量触发 haslayaout 属性 可以
减少很多IE下兼容性问题
在IE下父级有边框的时候,子元素的margin会失效
解决:触发父级 haslayout 属性
兼容性 8
在IE6下双边距bug
在ie6 块元素 ,有浮动, 有横向 margin的值
的时候,横向的margin的值会夸大两倍
解决:转换为内敛 display:inline;
margin-left 一行中左侧的第一个元素有双边距
margin-right 以行中右侧 的第一个
兼容性 9
在IE 6 7 下 li 本身没有浮动,li里面的内容有浮动,
li下会产生一个间隙
解决:
1.给li加浮动
2. 给li加 vertical-align:top:
3.在IE 6 最小高度,li的间隙问题共存情况
加float:left;
兼容性 11
当 一行子集的宽度之和父级的宽度相差超过3px,
或者子级元素不满行的情况的时候,最后一行子级
的margin-bottom会失效。
兼容性 12
在IE6 下 文字容溢出bug
子元素的宽度和父级的宽度如果相差小于3px的时候,两个浮动元素中间有注释或者内敛元素,就会出现文字溢出,
内敛元素越多,溢出越多
解决:用div吧注释的或内联元素抱起来
兼容性 13
在IE下,当浮动元元素素和绝对定位是兄弟关系的时候,
绝对定位会失效
解决:
不让浮动元素和绝对元素是兄弟关系,用div或者其他标签吧
a边检抱起来
兼容性 14
在IE 6 7下 ,子元素有相对定位,父级overflow抱不住子元素
解决:
给父级也加相对定位
兼容性 15
在IE6 下,如果决定定位的父级宽高是奇数的时候,
子级元素的right和bottom的值会有1px的偏差
兼容性 16
在IE67下,输入型的表单标签控件上下会有1px的间隙
解决:
给input加浮动
兼容性 17
css hack:
\9 IE10Z之前的ie浏览器解析代码
+或者* 表示ie7包括7之前的ie浏览器
-表示 ie6包括6之前的ie浏览器
原文地址:https://www.cnblogs.com/lzhsus/p/11396247.html
- Android逆向分析(2) APK的打包与安装背后的故事
- Activity之间传递大数据问题
- React Native入门(二)Atom+Nuclide安装、配置与调试
- React Native入门(一)环境搭建与Hello World
- android 自定义Viewpager实现无限循环
- Android内存优化(二)DVM和ART的GC日志分析
- Android Material Design之Toolbar与Palette实践
- android-async-http框架源码分析
- 使用Buck构建Android工程
- android 实现淘宝收益图的折线
- React Native入门(三)组件的Props(属性)和State(状态)
- Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)【Dalston版】
- PNG图片压缩对比分析
- 关于M4A文件的随机访问
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- javaScript代码飘红报错看不懂?读完这篇文章再试试!
- Synchronized简述
- PythonforResearch | 2_数据处理
- 程序员过关斩将--Http请求中如何保持状态?
- 如何有效恢复误删的HDFS文件
- 别再用OFFSET和LIMIT分页了
- 别再用大小比较时间了
- Redis快速入门
- 捉虫记:Unexpected end of JSON input while parsing
- 重新思考日志:业务系统竟然是一个大数据库?
- 测试面试题集-Linux常用命令
- 「真香警告」鱼头手摸手教你在小程序里用composition-api
- 【技术文】SSL握手中的几个密码
- 分布式监控系统SkyWalking
- 文献笔记二十九:银合欢(Leucaena trichandra)线粒体基因组