WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--01
兼容问题目录
1、IE6下怪异盒模型
2、IE6下最小高度问题
3、IE6下不支持1px的点线
4、IE6下内容会把父级的高度撑开
5、IE6下只支持给a标签添加伪类
6、IE67下不支持给块标签加display:inline-block
7、IE8以及IE8以前的浏览器都不支持opacity
后续兼容性问题处理链接地址：
http://blog.csdn.net/baidu_37107022/article/details/71973570
http://blog.csdn.net/baidu_37107022/article/details/71977053
1、IE6下怪异盒模型
在标准模式下的盒模型，
盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型，
盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
解决办法
在css3中有一个属性box-sizing来处理是用何种模型进行解析。
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
目前使用此属性需要前缀如下:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
代码演示
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid #000;
padding: 10px;
background: red;
}
</style>
</head>
<body>
<!--
标准盒模型
总宽度=width+padding+border
怪异盒模型
总宽度=width
注意此时是没有<!DOCTYPE html>声明的
-->
<div>123</div>
</body>
</html>
什么是盒模型链接：http://blog.csdn.net/baidu_37107022/article/details/71272900
2、IE6下最小高度问题
解决办法
1、overflow:hidden 推荐
2、font-size: 0;
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 1px;
background: red;
/*font-size: 0;*/
}
</style>
</head>
<body>
<!--
IE6下块元素高度小于19px，会被当做19px来处理
解决办法
1、overflow:hidden 推荐
2、font-size: 0;
-->
<div></div>
</body>
</html>
3、IE6下不支持1px的点线
解决办法：
IE6不支持一像素的点划线，用背景图代替
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 500px;
height: 100px;
border: 1px dotted #f00;
}
</style>
</head>
<body>
<!--
IE6不支持一像素的点划线，用背景图代替
-->
<div></div>
</body>
</html>
4、IE6下内容会把父级的高度撑开
解决办法
overflow: hidden;
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden;
}
</style>
</head>
<body>
<!--
IE6下内容会把父级的高度撑开
解决办法
overflow: hidden;
-->
<div>
这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊这里是内容啊
</div>
</body>
</html>
5、IE6下只支持给a标签添加伪类
IE6不支持除了a标签以外标签的伪类—无法解决
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:hover{
color: #f00;
}
div{
width: 100px;
height: 100px;
background: red;
}
div:hover{
background: green;
}
</style>
</head>
<body>
<!--
IE6不支持除了a标签以外标签的伪类
-->
<a href="#">kaivon</a>
<div></div>
</body>
</html>
6、IE67下不支持给块标签加display:inline-block
无法解决
**根本原因：**IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span,div{
width: 100px;
height: 100px;
background: red;
display: inline-block;
}
</style>
</head>
<body>
<!--
IE67不支持块元素display:inline-block
-->
<div>kaivon1</div>
<div>kaivon2</div>
<span>kaivon1</span>
<span>kaivon2</span>
</body>
</html>
普通浏览器中效果
IE7中效果
7、IE8以及IE8以前的浏览器都不支持opacity
解决办法
用filter
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<!--
IE8以及IE8以前的浏览器都不支持opacity
解决办法
用filter
-->
<div>kaivon</div>
</body>
</html>
WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--01的更多相关文章
- 新手学习WEB前端流程以及学习中常见的误区
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 【转】Web前端浏览器兼容初探
原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
- Web前端浏览器兼容初探
浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
- [转]Web前端浏览器兼容
转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
- web前端~~浏览器兼容问题（百度）
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 浅谈Web前端浏览器兼容问题
对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...
- Web前端浏览器兼容问题
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- Web前端浏览器兼容性个人经验总结
前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- sql中常见日期获取
获取当前年月日 --获取当前月份 ,GETDATE())) --获取当前月份的下个月 ,GETDATE())) --获取当前月份的上个月 year()获取年 select year(GETDATE() ...
- 使用Maven构建SSH
本人自己进行的SSH整合,中间遇到不少问题,特此做些总结,仅供参考. 项目环境: struts-2.3.31 + spring-4.3.7 + hibernate-4.2.21 + maven-3.3 ...
- 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
- phpcms基础
CSM基础(做中小型企业网站) 做一个企业站,三个页面比较重要1.首页2.列表页3.内容页 做企业站的流程:1.由美工出一张,设计效果图2.将设计图静态化3.开始安装CMS4.强模板文件放到CSM里面 ...
- LeetCode 207. Course Schedule（拓扑排序）
题目 There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have p ...
- jquery easyui的datagrid在初始化的时候会请求两次URL？
我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...
- 通过 U 盘启动重装 macOS 系统
重装系统是工作和生活中经常需要做的事情,作为一名开发人员,学会该技能你才是一名合格的程序猿!以后再也不会遇到"程旭元你会装系统吗?"的尴尬了!本文主要介绍怎样通过U盘启动重新安装 ...
- eNSP自学入门（基础）
写了上篇博客之后,就立即投入到了eNSP的怀抱之中了,自己从零基础,入门到现在.也学了不少东西,在这里和大家分享一下. 说一下学习的过程吧,老师说做网络工程的课程设计用eNSP,关于这个软件什么都没有 ...
- 我拖拖拖--H5拖放API基础篇
不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...
- poj2653线段相交判断
Stan has n sticks of various length. He throws them one at a time on the floor in a random way. Afte ...