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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- Linux 基础（2）
Linux 基础(二) 用户 组 及权限的相关操作 一.useradd命令选项:–u:指定用户的UID useradd –u 100 mu #指定mu的UID为100–g:指定用户所属的群组 user ...
- sass学习入门篇（三）
这章我们讲“嵌套”,嵌套包括两种:一,选择器嵌套.二是属性的嵌套.一般用选择器嵌套居多 一,选择器嵌套:指的是在一个选择器中嵌套另一个选择器来实现继承.使用&表示父元素选择器 li{ floa ...
- 安卓和iOS移动APP开发设计应该考虑哪些问题
应该考虑哪些问题 现在用移动设备上网的用户越来越多,企业也可以从移动APP端挖掘潜在用户,想要设计好一款移动APP,我们需要考虑哪几个问题呢? 首先 我们应该先确认清楚企业的移动互联网战略目标是什么? ...
- [KISSY5系列]KISSY5安装使用(一)
本文将从零开始安装KISSY环境 一.安装nodejs 从nodejs网站下载nodejs安装 地址: https://nodejs.org/en/download/ 二.下载KISSY 下载地址: ...
- Laravel 5.2 教程 - 邮件
一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...
- Markdown - 语法简介
标题 在文字里书写不同数量的“#”可以完成不同的标题,如下: # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 列表 无序列表的使用,在 ...
- js中面向对象编程
一.理解对象: 第一种:基于Object对象 var person = new Object(); person.name = 'My Name'; person.age = 18; person.g ...
- 微信公众号开发笔记1(nodejs开发的)
本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...
- OC中的私有变量和私有方法
在类的实现即.m文件中也可以声明成员变量,但是因为在其他文件中通常都只是包含头文件而不会包含实现文件,所以在.m文件中声明的成员变量是@private得.在 .m中定义的成员变量不能和它的头文件.h中 ...
- JavaScript异步编程
前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...