浏览器兼容性处理方法大全

最新推荐文章于 2023-11-28 19:51:01 发布

他化天域外

最新推荐文章于 2023-11-28 19:51:01 发布

阅读量306

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_35606790/article/details/90174288

版权


1、居中问题
 
div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 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”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding
 
8、列表类
 
1. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
 
9、显示类（display:block,inline）
 
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>，

最低0.47元/天解锁文章

他化天域外

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器兼容性处理方法大全

1、居中问题 div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto; 2、高度问题两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动...
复制链接

扫一扫