关于IE6的一些常见的CSS BUG处理

CSS BUG:样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS BUG;

CSS Hack:css hack是指一种兼容css 在不同浏览器中正确显示的技巧方法,因他们都属于个人对css代码的非官方的修改,或非官方的补丁。

使用Hack的一些副作用:降低了css代码的可读性,增加了代码的负担

今天跟大家分享下关于IE6一些常见的BUG处理:

(1)图片间隙:

  a)div中的图片间隙(该BUG出现在IE6及更低版本中)

    描述:在div中插入图片时,图片会将div下方撑大三像素;

    hack1:将<div>与<img>写在一行上;

    hack2:将<img>转为块状元素,给<img>添加声明:display:block;

  b)dt,li中图片间隙(IE6)

    hack:添加声明:display:block;overflow:hidden;

(2)默认高度(IE6)

  描述:在IE6及以下版本中,部分块元素拥有默认高度(低于18px-22px高度)

  hack1:给元素添加声明:font-size:0;

  hack2:给元素添加声明:overflow:hidden;

(3)双倍浮向(双倍边距)

  描述:当IE6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界加倍显示。

  hack:给浮动元素添加声明:display:inline;

(4)百分比BUG

  描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况;

  hack:给右面的浮动元素添加声明clear:right;(清除右浮动)

(5)鼠标指针

  描述:Cursor属性的hand属性值只有IE8以下浏览器识别,其他浏览器不识别该声明。Cursor属性的pointer属性值IE6及以上版本及其他内核浏览器都识别该声明。

  hack:如统一某元素鼠标指针为手型,应添加声明:Cursor:pointer;

(6)表单行高不一致

  描述:表单元素行高不一致;

  hack:给表单元素添加声明:float:left;

(7)按钮元素默认大小不一致

  描述:各浏览器中按钮元素大小不一致。

  hack1:统一大小/(用a标记模拟);

  hack2:input外套一个标签,在这个标签里写按钮的样式,把input的边框和背景色去掉;

  hack3:如果按钮是图片,直接把图片作为按钮背景;

(8)浏览器解析按钮边框时,会把边框解析在按钮内部,不会影响按钮的大小。

(9)浏览器解析margin属性值时,上下边界的属性值重合,左右相加;

时间: 2024-10-13 11:53:33

关于IE6的一些常见的CSS BUG处理的相关文章

ie6常见css bug

相信每个前端人都会有同感——ie6这东西真是万恶啊!就连ms也大力鼓励消费者淘汰ie6,不过很不幸,大概是因为xp绑定了ie6,因此在国内ie6的市场占有率仍高达42.43%,这是今年2月份的数据.也正因ie6的高占有率,因此在网站开发时也不得不考虑兼容ie6,就算不做到完美兼容,来个基本兼容也是必须的,起码不要让你的网站在ie6中乱套了.今天就跟大家分享一些平时积累的ie6 bug解决方法. IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧mar

【转载】IE浏览器常见的9个css Bug以及解决办法

IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已,有时候需要通过专为IE6或者IE8设计单独的定义.IE浏览器则因此被公认为Web程序员的毒药,虽然在微软官网上并没有提供相关的解决方案,但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的.本文总结了9个IE浏览器上最常见

E浏览器常见的9个css Bug以及解决办法

我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已,有时候需要通过专为IE6或者IE8设计单独的定义.IE浏览器则因此被公认为Web程序员的毒药,虽然在微软官网上并没有提供相关的解决方案,但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的.本文总结了9个IE浏览器上最常见的Bug,以及它们的解决方案. 在IE上开发时间

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

http://www.jb51.net/css/85640.html 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加  任何事情都是有原因的,li边距也不例外.  先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的paddi

【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置

HTML/CSS IE6、7兼容性问题、bug总汇

IE6,7下li.img的间隙------------------- 在IE6,7下li本身没浮动,但是li内容有浮动的时候,li下边就会产生几px的间隙 解决办法: 1.给li加浮动,给其父级清浮动 2.给li加vertical-align:top; 当IE6下最小高度问题,和 li的间隙问题共存的时候 给li加浮动 img元素在本身没有浮动也没有宽高的时候,会距离父级底部有几px间隙 解决办法: 1.给img加浮动,给其父级清浮动 2.给img加vertical-align:top; IE6

ie6,ie7,ie8 css bug兼容解决记录

ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着

认识hasLayout——IE6.7浏览器css bug的一大罪恶根源

hasLayout是什么? hasLayout是IE6.7下特有的一个属性(IE8已淘汰)很多的ie下的css bug都与其息息相关.在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位.虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作. 一个元素拥有layout”或“得到layout什么意思? 我们的意思是指它

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形