那些年我们追过的男孩或者女孩,你还记得吗?他或者她也许再也不会出现在你的生命中了,但是,我们每天还是会遇到熟悉的再也不能熟悉的那些浏览器兼容性 Bug。
在总结浏览器问题之前,我觉得我们应该掌握目录中的 1~7 标题的内容,对后面的问题,我想应该会更明白一些,并且可以避免许多 Bug。
web 标准是由万维网联盟(W3C)制订的,WEB 标准的产生,网页内容能被更多的用户所访问到,文件下载和页面显示速度更快,所有页面都能提供适合打印的版本,网页开发人员开发更快捷,代码更易于维护,提高了搜索引擎的精确性,提高了网站的易用性。
我们需要注意的代码标准有:
浏览器内核主要指的是浏览器的渲染引擎,渲染引擎决定了浏览器如何加载和显示网页的内容以及信息。我们主要用于测试的浏览器都有:IE、Chrome、Firefox、Safari、Opera、360 浏览器。
在 Netscape Navigator 和 Microsoft Internet Explorer 为数不多的浏览器盛行时,他们对网页有不同的实现方式,那个时候的网页都是针对这两个浏览器写的。随着各种浏览器的兴起,加上 Web 标准的制定,现在的浏览器不能继续使用以前的页面了,所以浏览器引入了标准模式和怪异模式来解决这一问题。
标准模式就是浏览器按照 Web 标准来渲染页面;为了解决浏览器还是能使用以前写的页面,所以怪异模式就产生了。怪异模式在不同的浏览器显示都是不一样的,因为他们都是按照自己的方式来渲染页面。
我们知道了标准模式和怪异模式,可是浏览器是怎么选择模式来渲染页面的呢?我们经常在页面的开头看到 <!DOCTYPE> 声明,这是告诉浏览器选择哪个版本的 html,对于渲染模式的选择,浏览器是根据 DTD 的声明。如果网页中有 DTD 标准文档的声明,那浏览器会按照标准模式来渲染网页;如果网页没有 DTD 声明或者 HTML4 以下的 DTD 声明,那浏览器就按照自己的方式渲染页面,页面进入怪异模式。
如果想要了解详细解说,请移至:
盒模型指定元素如何显示,理解它,对我们的布局有很大的帮助。盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
盒模型有两种:IE 盒模型(图 1)、标准的 W3C 盒模型(图 2)。从图 1 和图 2 就可以看出,IE 盒模型的 width 包括了 border、padding、content,而 W3C 盒模型的 width 仅限于 content。
在 CSS3 的属性中,box-sizing 可以设置盒模型类型,默认值为 content-box,content-box 表示 W3C 盒模型,border-box 表示 IE 盒模型。
图 1. IE 盒模型
图 2. W3C 盒模型
还有一种标准化方法,跟重置方法有点不一样,它会使浏览器中不一致的地方标准化,而不是重新修改这些地方。
HTML 语义化的好处有:有利于 SEO 优化,利于被搜索引擎收录,更便于搜索引擎的爬虫程序来识别;便于项目的开发及维护,使 HTML 代码更具有可读性,便于其他设备解析。
掌握选择器优先级,再也不用! important 来到处打补丁。
CSS 的基本选择器:
我们可以通过百度统计:,查看近两年来,浏览器的市场份额,IE 的占比还是很大的,其中 IE6 占了 3.45%,在以后 IE6 的份额会越来越小,如果不是强烈要求兼容 IE6,我认为关于 IE6 的兼容性问题,只做了解就好。
问题出现的浏览器:IE6 及其更低的版本
问题描述:任何浮动的元素上的外边距加倍,例如:如果元素设置的外边距为 margin-left: 15px,在浏览器里会显示为 margin-left: 30px。
解决方法:将元素的 display 属性设置为 inline,因为元素为浮动的,所以这么设置不会影响元素在浏览器的显示。
问题出现的浏览器:IE6 及其更低的版本
问题描述:两个相邻的 div 之间有 3 个像素的空隙,一个 div 使用了 float,而另一个没有使用产生的。
解决方法:A. 对另一个 div 也使用 float;
B. 给浮动的 div 添加属性 margin-right: –3px,但是这样写,在其他浏览器又会不正常,所以我们需要添加 IE6 的 hack,在属性 margin-right 前添加下划线_margin-right: –3px。(IE6 以及更低版本的 hack,是在属性前面添加下划线_)
问题出现的浏览器:IE6 及其更低的版本
问题描述:IE6 不支持 min-height 该属性。即使定义了元素高度,如果内容超过元素的高度,IE6 在解析时,会自动延长元素的高度。
解决方法:利用 IE6 不识别!important,给元素设置固定高度,并且设置元素高度自动。
- height: auto ! important;
- height: 300px;
- min - height: 300px;
因为 IE6 不识别!important,它值识别到 height: 300px,当内容超过 300px 时,它会自动延长高度。
IE7 及其其他浏览器都识别!important,虽然定义了 height: 300px,但是!important 的优先级最高。所以内容超过 300px 时,还是会自动延长。
问题出现的浏览器:IE6 及其更低的版本
问题描述:在 IE6 中,使用 png-24 透明图片,不透明。
解决方法:图片使用 gif 格式或者 png-8 格式图片。
问题出现的浏览器:IE6
问题描述:创建一个高度为 1px 的容器,在 IE6 中没效果。
解决方法:因为行高 line-height 在 IE6 下有默认值,设置 ling-height: 1px | overflow: hidden | zoom: 0.08。
问题出现的浏览器:IE8 及其更低的版本
问题描述:IE5~8 不支持 CSS 属性 opacity
解决方法:这时可以另外添加 ie 滤镜 alpha,如下:
- opacity: 0.8;
- filter: alpha(opacity = 80);
- /*for IE5~7*/
- - ms - filter: "progid:DXImageTransform.Microsoft.Alpha(opacity = 80)";
- /*for IE8*/
问题出现的浏览器:Firefox 浏览器
问题描述:Firefox 浏览器在点击链接时,会自动在元素周围添加一个虚线边框。
- a {
- outline: none;
- }
- a: focus {
- outline: none;
- }
问题出现的浏览器:所有浏览器
问题描述:当两个或者更多垂直外边距相遇时,它们将形成一个外边距,这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
解决方法:这并不是一个浏览器 Bug,这是 CSS 的一个特性,如果想要防止这种情况发生,和 padding 搭配使用。(要根据实际情况来解决,这里只是简要说明哈~~~)
问题出现的浏览器:主流浏览器都有此问题
如果容器中有浮动的元素,容器的高度不能自动延长适应内容的高度,使得内容溢出到容器外而影响页面布局,为了避免这种情况的发生,我们需要用 CSS 来清除元素的浮动。
一般常用的方法有三种:
A. 在浮动元素后面添加带有 clear 属性的空元素
- <div>
- <div style="float: left;">
- left
- </div>
- <div style="float: right;">
- right
- </div>
- <div style="clear: both;">
- </div>
- </div>
B. 给容器添加属性 overflow: hidden 或者 overflow: auto,在 IE6 中还需触发 haslayout,所以还需添加 zoom: 1。
- <div style="overflow: auto;*zoom: 1;">
- <div style="float: left;">
- left
- </div>
- <div style="float: right;">
- right
- </div>
- </div>
C. 使用: after 伪元素
- <style>
- .clearfix {*zoom: 1;} .clearfix:after {content: ".";display: block;height:
- 0;visibility: hidden;clear: both;}
- </style>
- <div class="clearfix">
- <div style="float: left;">
- left
- </div>
- <div style="float: right;">
- right
- </div>
- </div>
相关链接:
来源: http://www.cnblogs.com/ylliap/p/6133487.html