div+css布局时常见bug总结

综述:虽然说被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作。

在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享。(只是页面布局的bug)

欢迎补充!!!!

1.怪异模式:没有书写<!doctype html>时会触发怪异解析现象。

2.不同浏览器中很多标签的默认样式不同。一般用reset.css文件将浏览器重置。

3.横向双倍外边距:产生的四个条件 浮动 块属性标签 有横向的margin值 在ie6下。解决方法:给标签加入display:inline,使其成为行标签。

4.默认行高:产生的条件 ie6 设置的文字高度超出盒模型内容区域 设置高度时会改变布局。解决办法:加入overfloat:hidden;

5.ie6不支持透明的png图。解决办法:用jpg gif代替或者后期用js解决

6.默认高度:块元素,没有写固定高度时。解决:设置固定高/height:0;overflow:hidden;

7.img外部的border。解决方法:border:none/0.

8.图片间的默认边距。解决方法:所有图片都浮动 写代码时不换行

9.经典3像素:条件 浮动块元素与未浮动元素处于同一行。解决:设置非浮动元素浮动。

10.hover在ie6中只能给a标签用。

11.ie678不支持透明opacity的属性。用独特的代码代替opacity:0.6;filter:alpha(opacity=60).不支持rgba的设置。

12.不支持最大最小宽高:标签的最低高度宽度设置。解决方法:为单独设置hack。

13.子选择器在ie6中不能使用。div>p这是子选择器。可以用来选择父级下的某个子级。 bug总结:常见的bug都出现在版本低的ie中。有可能bug产生于标签的不合理使用或者css样式使用不当。

14.ie不同版本个别颜色的差别。

background-color: #CC00FF;         /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9;       /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF;        /*IE6、IE7会变为蓝色*/            
_background-color: #009933;        /*IE6会变为绿色*/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

522
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

1441
来自专栏人云亦云

网页中内嵌字体

3996
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

42815
来自专栏编程

《小白HTML5成长之路35》再做一个顶部的提示信息

最近天气干燥,小白和老朱都感冒了,虽然状态不好,小白还是没有停止HTML5前进的脚步,他憋了一股劲一定要在2018年到来之前提高一个台阶。看到老朱来到办公室,小...

1999
来自专栏菜鸟前端工程师

html+css学习笔记011-表单

833
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 开发适配心得

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用...

3465
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

5728
来自专栏前端杂货铺

css截断长文本显示

实现 截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO。 而通过前端css的截断,则灵活多变,可统一运用与整个网站。 这项技术主要...

3617
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

943

扫码关注云+社区