最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
浏览器兼容常见问题介绍(ff,ie,Chrome)总结
时间:2012-11-06 编辑:简简单单 来源:一聚教程网
突然间,在Chrome下看起来很整齐的布局,在IE下变成一团糟。为了找出原因,我改动了div的background-color属性。最后,发现同一个DIV的宽度在IE和Chrome下却不一样。这大晚上的,真是怪吓人滴!
之后,做了个测试。当:
Css代码
代码如下 | 复制代码 |
div1 { width:960px; margin:0px; padding:0px; } |
这时,在两个浏览器下是没有区别滴!总宽度均是960px。
但是,当:
Css代码
代码如下 | 复制代码 |
div1 { width:960px; margin:0px; padding:0px 10px 0px 10px; } |
这时,Chrome就不干了。她居然把padding的20px加在了外面,这样div1的总宽度就是960px+10px+10px=980px;而,在IE中div1的宽度仍是960px;
按照我的思维,感觉padding应该算在width里面滴,没想到Chrome这么倔。
经过测试,border和padding一样,margin的值均算在“width”的外面。
还有,在没有设置float的情况下,Chrome会把div1当成position:absolute,而IE会把其当成poisttion:relative;所以,尽量都这是块级元素的float为left!
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;font-size:0px;padding:0;margin:0;border:0;line-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 的傻瓜式解决技巧
注意是技巧,不是方法:
写好标准头
高尽量用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%,除非设定一个宽度
,
,
-
下一个: Discuz论坛怎么设置二级域名
相关文章
- 搜狗高速浏览器兼容模式在哪开启? 06-30
- Flexbox跨浏览器兼容Bug解决方法 01-26
- 什么是dom以及浏览器兼容说明 10-25
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码