http://blog.csdn.net/sunshine_love/article/details/8621495
1、对盒子模型的不同解释
这里IE6、IE8、IE9相同,火狐和谷歌、遨游等相同。先说盒子模型,CSS将所有的HTML块元素都看成是一个盒子(box),每个盒子有以下几个组成部分:Content(内容)、Padding(补白)、Border(边框)、Margin(边界)。火狐谷歌等较新的的浏览器实行加法运算,“向外扩张”。以高度为例,CSS中设置的高度为内容的高度,当增大padding或是border时,盒子变大,向外扩张,但内容的高度保持不变。盒子的实际高度=内容height+2*padding+2*border。在IE的各版本中则实行减法运算,“向内压缩”。还是以高度为例,CSS中设置的高度为盒子的高度,当增大Padding或是border时,盒子不变,内容被压缩。内容height=容器height-2*padding-2*border。
解决方法:a、在html文档的开头加上W3C制订的解析标准
b、hack方法(给不同的浏览器写一个不同的height)
例如:height:200px;
*height:300px;
火狐等浏览器只认第一个格式的height,IE版本的浏览器两个都能认,但优先选择第二种格式的height值。
3、w3c的盒子模型、、、、、、IE6的盒子模型
http://www.jb51.net/css/68168.html
1、
今天在做项目使用right时,老是碰到在IE6中显示总是比自己定义的right要小.晚上闲余时特意测试了一下,最后终于找到原因之所在了:IE6中如果使用absolute标签的父级DIV(此DIV使用了relative)不定义宽度,则该标签的right定位会出问题
http://blog.csdn.net/playboyanta123/article/details/8365381
1、
IE6-7图片下面有空隙的问题
问题:
块元素中含有图片时,ie6-7中会出现图片下有空隙
解决:
(1)、在源代码中让</div>和<img>在同一行
(2)、将图片转换为块级对象display:block;
(3)、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
(4)、改变父对象的属性,如果父对象的宽、高固定,图片大小随父对象而定,那么可以对父元素设置: overflow:hidden;
(5)、设置图片的浮动属性 float:left;
2、IE6 width为奇数,右边多出1px的问题
问题:
父级元素采用相对定位,且宽度设置为奇数时,子元素采用绝对定位,在ie6中会出现右侧多出1像素
解决:
将宽度的奇数值改成偶数
3. IE6两个层之间3px的问题
问题:
左边层采用浮动,右边没有采用浮动,这时在ie6中两层之间就会产生3像素的间距
解决:
(1)、右边层也采用浮动 float
(2)、左边层添加属性 margin-right:-3px;
4、 IE6-7 line-height失效的问题
问题:
在ie中img与文字放一起时, line-height不起作用
解决:
都设置成float
5、ul标签默认值的问题
问题:
ul标签在ff中默认是有padding值的,而在ie中只有margin有值
解决:
定义ul{margin:0;padding:0;}就能解决大部分问题
6、 list-style-position默认值的问题
问题:
ie下list-style-position默认为inside, firefox默认为outside
解决:
css中指定为outside即可解决兼容性问题
7、众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著
8、以下代码为实现页面下方的回到顶部按钮的兼容性解决方案
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
清除浮动的方法:http://lightcss.com/all-about-clear-float/
http://blog.csdn.net/playboyanta123/article/details/8365381
http://www.wuda-website.com/html/xwzx/changjiawenti/291.html
http://www.wuda-website.com/html/xwzx/changjiawenti/292.html
http://www.wuda-website.com/html/xwzx/changjiawenti/293.html
分享到:
相关推荐
自己遇见的一些常见的css兼容性问题。和css hack 自己总结出来后生产pdf文档带书签的。 CSS兼容性笔记 1 一 css hack 1 1.直接案例 1 2. hack写法列表 1 3.在IE7+浏览器中按照IE7文档模式 1 4. 注意 Html头部的声明...
解决div+css常见兼容性问题,是你做网页的必备。
CSS 兼容性问题解决方案 本文档旨在解决 CSS 中的兼容性问题,涵盖了多个方面的解决方案,包括 DOCTYPE 的影响、盒模型的解释不一致、ul 和 ol 列表缩进问题、CSS 透明问题、CSS 圆角问题、cursor 问题、字体大小...
关于css 对各个浏览器的兼容性 做出分析; 提供代码示例; 适合编程爱好者学习; 加深对网站布局css 的理解和应用
这是自己毕业从事WEB开发一年以来,自己在工作中遇到的CSS兼容问题及解决办法
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS ...
目前主流浏览器的兼容性做的都比较好了,本文主要针对IE6,7的不兼容问题进行解决。 1.有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。 解决方法:给对应的...
CSS浏览器兼容性问题.pdf
记录常见的移动版css兼容性问题,以及解决方案,供前端学习
css有关的兼容性问题大全,让你轻松快速的解决css兼容性问题。
css 兼容性问题this.style.cursor='hand'让我们来CSS HACK
CSS 放大镜 无兼容性问题
资源名称:CSS 属性兼容性对照表内容简介: CSS属性兼容性对照表 PDF,主要是列出一些CSS2.0/CSS2.1在各个版本的IE、火狐等主流浏览器下的兼容支持问题,此表有助于以后书写出全兼容的WEB标准化网页打下基础,前端...
用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题。在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整。
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
IE和火狐的CSS兼容性问题总结,很实用。
解决CSS3网页兼容性问题
CSS浏览器兼容性问题收集.pdf
CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE与Firefox的兼容性处理方法并整理了一下