WEB前端中CSS浏览器兼容总结-爱前端网

div类

1. 居中问题

div里的内容，IE默认为居中，而FF默认为左对齐

可以尝试增加代码margin:auto

2. 高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间

所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;

但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：

.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;

不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离

#box {

float:left;

width:100px;

margin:0 0 0 100px; //这种情况之下IE会产生200px的距离

display:inline; //使浮动忽略

}

5. padding 问题

FF设置 padding 后，div会增加 height 和 width，但IE不会（* 标准的 XHTML1.0 定义 dtd 好像一致了）

高度控制恰当，或尝试使用 height:100%;

宽度减少使用 padding

但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题

FF里 y 轴上子div 到父div 的距离为父padding + 子marign

IE里 y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个

FF里 y 轴上父padding=0 且 border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧

注意是技巧，不是方法：

写好标准头

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div

宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值

先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子

display:inline 就是将元素显示为行内元素，元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

2. 鼠标手指状显示

全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题

全部注意补齐 width，height 属性

2. 背景透明问题

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

最好两个都写，并将opacity属性放在下面

未经允许不得转载：爱前端网 » WEB前端中CSS浏览器兼容总结

WEB前端中CSS浏览器兼容总结

作者：Yang

相关推荐

热门推荐

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏