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;}

html+css中常见的浏览器兼容性处理的更多相关文章

  1. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  2. CSS中常见的布局

    一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qin ...

  3. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  4. css中常见几种float方式以及倒计时（刷新页面不清）

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  5. 常见的浏览器兼容性问题与解决方案——CSS篇

    1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...

  6. js+css:43种常见的浏览器兼容性问题大汇总

    javascript 1.HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getE ...

  7. html标签和css基础语法与浏览器兼容性等相关基础学习

    <!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...

  8. javascript中new Date浏览器兼容性处理

    看下面的代码 <script type="text/javascript"> var dt1 = new Date('2016-3-4 11:06:12'); aler ...

  9. CSS中常见的长度单位

    原文地址:https://segmentfault.com/a/1190000008934791?utm_source=tuicool&utm_medium=referral px - 像素 ...

随机推荐

  1. JavaScript DOM编程艺术 笔记（一）

    探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...

  2. 前端之JS的线程(最易懂)

    1. 前言 很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象.还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解. 我们都知道J ...

  3. Codeforces - tag::flows 大合集 [完坑 x14]

    589F 题意:给出n个时间区间,每个区间挑定长的非连续区间,求不同个区间不存在时间冲突的最大定长,输出乘上n 二分图模型+二分长度,左顶点集为区间编号,右顶点集为时间编号(1...10000),汇点 ...

  4. python定义的一个简单的shell函数的代码

    把写代码过程中经常用到的一些代码段做个记录,如下代码段是关于python定义的一个简单的shell函数的代码. pipe = subprocess.Popen(cmd, stdout=subproce ...

  5. C运算符和表达式

    C语言入门(5)——运算符与表达式   版权声明:本文为博主尹成联系QQ77025077,微信18510341407原创文章,欢迎转载侵权不究. https://blog.csdn.net/yinch ...

  6. iview 怎样屏蔽掉账户框自动显示账户名和密码（root，***）

    用iview框架做出的登录页面,账户名和密码显示框,会自动有占位信息(root,****) 后来解决问题发现,只要在真正的输入框下面添加这样的一行隐藏的代码,占位信息会自动填充到隐藏的input框内, ...

  7. prim和kruskal算法

    //邻接矩阵 int n,G[MAXV][MAXN]; int d[MAXV];//表示到树的距离 bool vis[MAXV]={false}; int prim(){ fill(d,d+MAXV, ...

  8. Post、Get请求

    post.get请求方法 /// <summary> /// Post.Get请求 /// </summary> /// <param name="url&qu ...

  9. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred. Please contact your administrator

    问题原因:mysql参数设置问题 检查mysql参数: mysql> SHOW VARIABLES LIKE 'max_allowed_packet'; 修改/etc/my.cnf文件: [my ...

  10. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...