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-left和float:left）

3.   解决办法

将div的display设置为inline

Margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;    
例如：
<div id=”imfloat”>    
相应的css为    
#IamFloat
{
float:left; margin:5px;/*IE6下理解为10px*/ 
display:inline;/*IE6下再理解为5px*/
}  

IE6中DIV高度小于10px时高度无效。

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

IE6下div图片下边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 }

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

! important

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

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

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

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

 

包含float的box的高度自动适应

当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的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 可以

IE对list-style-type、border-style支持不全

给元素设置background-color背景色时，IE为content+padding而firefox则content+padding+border

IE与Firefox处理margin处理区别

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

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

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

IE6及IE7及火狐不支持position的fixed

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,IE8，FF识别,利用以上这些属性，我们可以这样定义最小高度

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 "