博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
兼容性总结
阅读量:6240 次
发布时间:2019-06-22

本文共 1112 字,大约阅读时间需要 3 分钟。

写在前面的话,也不知道还要不要管ie6、7,晕晕乎乎的

1、h5兼容性

引用html5shiv.js

2、

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动

例:

左侧

右侧

给它设置css

.box{ width:200px;}.left{background:red;float:left;}.right{float:right; background:blue;}h3{margin:0;height:30px;}

显示如下:图片描述

解决办法:

h3{margin:0;height:30px; float:left;}


-2 在IE6下元素要通过浮动并在同一行,就给这行元素都加浮动

例:

样式

.left{width:100px;height:100px;background:red; float:left;}.right{width:200px;height:100px;background:blue;margin-left:100px;}

结果:

图片描述

解决:都浮动


3- 注意标签嵌套规范

样式

结果

图片描述

- IE6下最小高度问题

在IE6下元素的高度的小于19px的时候,会被当做19px来处理解决办法:`overflow:hidden;`

- 4在IE6下父级有边框的时候,子元素的margin值消失

样式

结果

图片描述

解决

在IE6下解决margin传递要触发haslayout

.box{background:blue;border:1px solid #000;zoom:1;}

5、css hack

针对不同的浏览器写不同的CSS 样式的过程,就叫CSS hack!

\9 ’ 所有的IE9及之前

+ ’ 和 ‘ * ’ IE7及ie7的ie浏览器认识

_IE6 ’及ie6的ie浏览器认识

例:

.box{ width:100px;height:100px;background:red;background:blue\9;            +background:yellow;_background:green;}@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}

6、html条件注释语句

无标题文档

转载地址:http://bgdia.baihongyu.com/

你可能感兴趣的文章
extjs中form.reset(true)出现的bug修复
查看>>
Some Android functions
查看>>
ORB-SLAM2学习4 initializer.h
查看>>
正向代理和反向代理
查看>>
1092 回文字符串(LCSL_DP)
查看>>
day01-Python介绍,安装,idea
查看>>
AX函数,将EXCEL列号转为列名
查看>>
UNDO -- Concept
查看>>
养生《一》
查看>>
es6的模块化--AMD/CMD/commonJS/ES6
查看>>
DevStack部署Openstack环境
查看>>
新年最新的100句超牛的语言(转)
查看>>
Chromium Graphics: Graphics and Skia
查看>>
asp.net core mvc上传大文件解决方案
查看>>
二叉树
查看>>
十分简单的抛物线运动
查看>>
乘法逆元(转)
查看>>
android repo库的创建及代码管理
查看>>
tomcat 配置
查看>>
Cloudera Certified Associate Administrator案例之Configure篇
查看>>