`

CSS浏览器差异、BUG总结

 
阅读更多

DOCTYPE 影响 CSS 处理

IE6经典Bug之双倍边距

1.   现象:

这个bug非常常见,如果发现IE6里的某个距离变大,首先考虑是否是双倍边距问题。IE6双倍边距即IE6下的margin值翻倍,即:假如设置的属性是margin-left:20px,那么在ie6中的效果就是margin-left:40px

注意:padding也是同样,也是同样处理

2.   出现条件:

1、存在于父元素与子元素之间

2、子元素同时设置了浮动和外边距属性

3、并且浮动方向与外边距方向一致(如:同时设置了margin-leftfloat:left

3.   解决办法

divdisplay设置为inline

Margin加倍的问题

设置为floatdivie下设置的margin会加倍。这是一个ie6都存在的bug
解决方案是在这个div里面加上
display:inline;    
例如:

<div id=”imfloat”>    
相应的css
    
#IamFloat
{
float:left; margin:5px;/*IE6
下理解为
10px*/ 
display:inline;/*IE6
下再理解为
5px*/
}  

IE6DIV高度小于10px时高度无效。

我们只要把字体设为0就可以解决。
例如:.mm{height:3px; font-size:0}

IE6div图片下边4px空隙bug的解决办法

<div><img/></div><a><img/></a>这种情况经常见:IE6点击图片时虚框会多出个尾巴来

1、设置父对象的文字大小为0px

#bannerPic{

    font-size: 0px;

}

即,在#sub中添加一行:font-size:0;可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

  2.或者

#bannerPic img{

  display: block;

}

移除超链接的虚线

 FireFox,当你点击一个超链接时会在外围出现一个虚线轮廓这很容易解决只需要在标签样式中加入:

a{ 
outline: none; 
}

并且为了去掉IE6,IE7中的虚线,同时应加以下代码:IE6下常见哦!!

<a id="test" href="#" hidefocus="true">去掉虚线框</a>

(jquery)

    $(function(){

        $("a").attr("hideFocus",true);

    });

行内、外元素

 行内元素包括: <span>, <a>, <strong>  <em>. 块元素包括<div>, <p>, <h1>, <form><li> . 如果你给一个行内元素定义宽度、pading,那么它只是在IE6下有效所有的HTML元素要么是行内元素要么就好是块元素你不能定义行内元素的宽度为了解决这个问题你可以将行内元素转变为块元素.

span { width: 150px; display: block }

blockinline两个元素:
block
元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素
);
Inline
元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    

! important

div{margin:30px!important;margin:28px;}

注重这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE6不能识别,但别的浏览器可以识别。所以在IE6下其实解释成这样:

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

 

包含floatbox的高度自动适应

当包含floatbox的时候,高度自动适应在IE下无效,这时候应该触发IElayout私有属性(万恶的IE啊!)zoom:1;可以做到,这样就达到了兼容。

例如某一个wrapper如下定义:

以下为引用的内容:

.colwrapper{

overflow:hidden;

zoom:1;IE6必须使用这句话)

margin:5px auto;

}

让固定宽度的页面居中

为了让页面在浏览器居中显示需要相对定位外层div, 然后把margin设置为auto.

#wrapper { 
margin: auto; 
position: relative; 
}

只要外层有一个DIV居中就可以了,DIV里面的其它DIV宽度写死就可以

不定长度的浮动元素居中

我的做法是把他们放在一个固定宽度的DIV中,让固定宽度的DIV居中就可以了

css的优先级,

一个标签选择器1分,一个类选择器10分,一个id选择器100,一个行内样式1000,!important就当无限分吧,呵呵。分值相同时按后出现优先的原则算

CSS优先级【特例:背景】

外部文件background:url(图片1)

文件内部:background:url(图片2)

最终显示是:图片1

鼠标样式:cursor: pointer

可以同时在 IE FF 中显示游标手指状, hand IE 可以

IElist-style-typeborder-style支持不全

给元素设置background-color背景色时,IEcontent+paddingfirefoxcontent+padding+border

IEFirefox处理margin处理区别

倘若设定了父元素的高度,如果此时子元素的高度超过了父元素设定的高度,二者显示不同。

IE:父DIV的高度值小于子块的高度加上margin的值,此时IE会自动扩大,保持子元素的margin-bottom及父元素的padding-bottom

Firefox:它会保证父元素的高度值完全吻合,而这时子元素将超过父元素的范围。10-12.html

IE6IE7及火狐不支持positionfixed

IE6无法触发a:hover【情况一】

<a>test</a>像这种无法触发hover,必须<a href>即必须加上href才行

IE6无法触发a:hover【情况二】

a:hover{color:#F00;}

<a href="?">鼠标经过时改变我的颜色</a>

以上是正确的。

a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

以上IE6无法识别。

解决方案:只需要再添加一个a:hover{}样式就可以解决这个问题了,里面可以是zoom, padding, margin等属性。如下:

a:hover{zoom:1;}

a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

其实:不论你在a:hover{}写入任何属性,color啊,font-size啊,overflow啊(甚至是不存在的属性,如xx:yyy),都可以

DIV垂直居中问题

vertical-align:middle; 
将行距增加到和整个DIV一样高 line-height:200px; 
然后插入文字,就垂直居中了。缺点是要控制内容不要换行。

也可以放span,即行内元素不能块

DIV水平居中问题

div设置 margin-left, margin-right auto 时已经居中。

如果还不行,就给加个边框,有可能边框已经居中,只是边框太宽了。

各浏览器的BUG列表网址

http://developer.51cto.com/art/200908/143733.htm

min-height

IE6不认min-height,IE7,IE8FF识别,利用以上这些属性,我们可以这样定义最小高度

Html代码

  1. <style rel="stylesheet" type="text/css">  
  2. <!--
  3. .content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
  4. -->  
  5. </style>  

<style rel="stylesheet" type="text/css">

<!--

.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}

-->

</style>

我是这样理解这段代码的:

因为在IE里(包括IE6,IE7)认为height就是最小高度,当content中的内容超出设置的高度时,在FF中可以用min-height设置最小高度××,这时即使超出content的高度,背景颜色也会自动延伸下去。但IE不识别min-height,所以要加hack(对程序所作的修改,在尚未被开发者接受并集成到正式版本中之前被称为hack)。

这个常用于:          

框架:<iframe id="queryDetailFrame"

                                        name="queryDetailFrame_Name"

                                        allowtransparency="true"

                                        height="450"

                                        >

</iframe>

子页面:<body style= "width: 100%;background-color: #FFF;height:auto!important;height:450px;min-height: 450px;">

而子页面的高度小于500,则多出的颜色就会被其它颜色填充如外部的html{background颜色},这时要利用min-height使得子页面有个最小高度,即450px

表格样式

Border样式只能用在td,而不能tr

 

Iframe嵌套间隙过大之间的间隔调整为大概5-6px

设置iframe的属性   marginheight= "0 "   marginwidth= "0 "

 

 

分享到:
评论

相关推荐

    css浏览器兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,不同的浏览器对于CSS的支持程度也有所不同,这导致了在开发过程中经常会遇到浏览器之间的兼容性问题。本文旨在总结和分享一系列关于CSS兼容性的技巧...

    DIV+CSS浏览器兼容方法的总结

    ### DIV+CSS浏览器兼容方法的总结 在网页开发过程中,我们经常会遇到不同浏览器对CSS的支持程度不一的问题,特别是对于一些老旧的浏览器如IE6、IE7等,它们与现代浏览器(如Firefox、Chrome)之间的差异更为显著。...

    CSS浏览器兼容和IE中bug问题

    ### CSS浏览器兼容性与IE中的Bug处理 #### CSS兼容性问题概述 在Web开发中,浏览器的兼容性问题一直是开发者需要面对的重要挑战之一。不同浏览器(如IE、Chrome、Firefox等)对CSS的支持程度和解释方式存在差异,...

    css 多浏览器兼容解决方案 下载

    CSS 多浏览器兼容性是Web开发中的重要环节,因为不同的浏览器对CSS的解析方式可能存在差异,这可能导致在不同浏览器中页面展示效果不一致。以下是一些关键知识点和解决方案: 1. **DOCTYPE影响CSS处理**: DOCTYPE...

    CSS BUG浏览器兼容知识汇总

    然而,由于不同的浏览器在解析和实现CSS规范时可能存在差异,导致开发者经常遇到“CSS BUG”问题,尤其是在不同浏览器间的兼容性问题。这篇综合性的知识汇总将探讨CSS在浏览器中的常见问题、解决方案以及优化策略。 ...

    css浏览器兼容问题大全

    【CSS浏览器兼容问题详解】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术,但它在不同浏览器之间的兼容性问题一直是开发者面临的挑战。尤其是针对老版本的Internet Explorer(如IE7、IE6)和...

    CSS浏览器的兼容问题

    ### CSS浏览器兼容问题详解 #### 一、引言 随着Web技术的发展,前端开发变得越来越复杂,特别是CSS的跨浏览器兼容性问题一直是开发者们头疼的问题之一。不同的浏览器对CSS的支持程度不同,导致同样的一段CSS代码在...

    css浏览器兼容整理

    ### CSS浏览器兼容性整理 #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容一览表 为了确保网站能在不同的浏览器中呈现出一致的效果,了解和掌握各种CSS hack技巧是非常重要的。以下是一些常用且有效的...

    最全的CSS浏览器兼容问题

    ### 最全的CSS浏览器兼容问题解析 #### 一、引言 随着Web技术的发展,不同浏览器及其版本间的差异成为前端开发者面临的一大挑战。本文旨在全面介绍CSS在不同浏览器中的兼容性问题及相应的解决方案,帮助开发者更好...

    css浏览器兼容大全

    ### CSS浏览器兼容大全 在网页开发过程中,不同的浏览器对CSS的支持程度存在差异,这往往会导致页面在不同浏览器下的显示效果不一致。为了确保网站能够跨浏览器兼容,开发者需要掌握一系列CSS浏览器兼容技巧与方法...

    最全的CSS浏览器的兼容问题

    本文针对CSS浏览器兼容性问题进行了较为详细的介绍,包括去除a链接虚线框、实现背景透明、垂直居中、解决IE6的margin加倍问题、浮动元素间的间距问题、解决IE的宽度和高度问题以及解决DIV浮动文本3像素的bug等。...

    关于调试CSS跨浏览器样式bug的问题

    使用CSSlint等工具可以帮助检查代码中的错误(Errors)和警告(Warnings),及时发现可能引起浏览器差异的问题。 3. CSS重置与默认样式:不要完全依赖浏览器默认的CSS样式,应该使用CSS重置样式表来确保跨浏览器的...

    css浏览器兼容帮助文档

    ### CSS浏览器兼容性解决方案及技巧 #### 一、引言 在前端开发过程中,不同浏览器对CSS的支持程度和解析方式存在差异,导致同一份代码在不同浏览器中的显示效果不尽相同。这种现象被称为“浏览器兼容性问题”。...

    最全的CSS浏览器兼容问题.txt )

    标题:最全的CSS浏览器兼容问题 描述:本文旨在探讨并解决在开发过程中遇到的CSS浏览器兼容性问题,尤其关注IE7、6以及Firefox等浏览器的特性与限制,结合Web2.0技术背景下的XHTML编写规范,以及文档类型声明...

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    总之,CSS浏览器兼容性问题需要Web开发者具备深入的理解和精细的调试技巧。通过采用正确的布局策略、使用跨浏览器兼容的CSS属性、以及在必要时引入针对性的解决方案,可以有效减轻这些兼容性问题带来的困扰,确保...

    目前比较全面的浏览器CSS BUG兼容汇总

    在网页开发中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理不同浏览器之间的差异时。本文将详细讨论一些常见的浏览器CSS Bug及其解决方案,主要针对IE(尤其是IE6和IE7)以及Firefox等其他浏览器...

Global site tag (gtag.js) - Google Analytics