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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- 数据库Schema两种含义~~
1.数据库Schema有两种含义,一种是概念上的Schema,指的是一组DDL语句集,该语句集完整地描述了数据库的结构.还有一种是物理上的 Schema,指的是数据库中的一个名字空间,它包含一组表.视 ...
- Google Chrome 默认非安全端口列表
1, // tcpmux7, // echo 9, // discard 11, // systat 13, // daytime 15, // netstat 17, // qotd 19, // ...
- python——杂货铺
三目运算: >>> 1 if 5>3 else 0 1 >>> 1 if 5<3 else 0 0 深浅拷贝: 一.数字和字符串 对于 数字 和 字符串 ...
- 表单提交音乐文件（php）
利用点空闲时间来写个博客,最近做的项目中需要表单提交音频的,图片的,各种类型,把它存到数据库里,这里先来说一下音乐文件的表单提交吧,后几天再来更新输入数据库的,先看一下效果 点击浏览 就会出来预览,点 ...
- [ext4]磁盘布局 - group分析
ext4文件系统的磁盘布局是先把磁盘分成一个个相同大小的block块(每个block块的大小默认是4K),然后把这些block块合成一个个group. group大小最大为256M(默认为256M), ...
- IOS中的JSON数据的解析
解析Json数据 //加载.json文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"product.json" ...
- 百度地图API，定位您的当前位置
1.介绍 利用百度地图的API来定位您的所属位置,这个位置返回的是经纬度,而不是具体的汉字位置.利用经纬度,再显示在百度地图上的位置. 2.代码 <html> <head> & ...
- Spring框架入门
技术分析之什么是Spring框架 1. Spring框架的概述 * Spring是一个开源框架 * Spring是于2003 年兴起的一个轻量级的Java开发 ...
- innobackup增量备份与恢复
一.全备: innobackupex --user=root --password=123 /backup/all 全备之后,去数据库操作,创建新的对象或插入数据 二.完整备份目 ...
- 新手上路---Java学习知识梳理
我随笔 我相信也有那么一些人跟我一样,脱下军装后对未来感到迷茫,不知所措甚至怀疑起自己的能力,自身体会的经历过才能明白其中的辛酸!归咎一切:心态,信心,自信!再穷不过乞讨,不死终将出头.好了,闲言碎语 ...