div+css兼容各种浏览器的方法

特别说明的是，此法不支持IE5.5，IE6下也有点问题。测试使用的浏览器均为谷歌chromium浏览器9.0，没有特别说明的情况下，只要chromium兼容，其他浏览器都是兼容的。

最近看JJ做那个什么系统做得很蛋疼，盟主和猪哥的毕业设计也是做网站，样式一会儿一个问题。其实这些问题我以前也有遇到，只是现在一般不会有了，我自有我的一套方法去解决。至于大家是不是这个方法，我就不清楚了。

在开始废话之前，我建议在做网页的时候，首先把头、身、脚分出来，然后输入一些东西作为占位符。例如所示

 

首先就是居中问题，说到居中问题，我是严重反对使用text-align:center;的方式居中，因为这样很有可能把其他内容的样式也给居中了。建议的居中方式是使用margin: 0 auto;同时配合宽度属性，这样就可以实现居中了。具体效果可以看看下图。

 

padding和margin的区别，这两个属性我一直就分不清楚，一直到最近才弄明白。padding是内边距，margin是外边距，其实明不明白都不要紧，在使用的时候分别测试就知道了。

和margin相关的属性一共有5个，分别是margin，margin-top，margin-right，margin-bottom，margin-left，margin=margin-top + margin-right + margin-bottom + margin-left，请注意顺序是上右下左。margin使用时有3种方法：1、margin : 10px; 表示四个方向都是10px外边距；2、margin:10px 30px;表示上/下10px外边距，右/左30px边距；3、margin:10px 20px 30px 40px;表示上10px外边距，右20px外边距，下30px外边距，左40px外边距。这些都是很基础的了，padding用法完全一样。效果图如下所示

 

关于float，不得不说这个东西是造成布局错位的元凶。IE对float的解析一直就不同于其他非IE内核的浏览器，直到IE8才恢复。

首先解释下这个float，就是浮动。要知道网页中div不可能永远都是占一行，很多情况下都是一行中显示了多个div，要实现这个效果就需要使用到float属性。在具体说这个东西之前先来看看IE7 IE8 和谷歌对这个属性的解析，通过这个图，大家就会明白为什么自己做的网页在不同浏览器下就是要乱。

 

以前我一直认为，只要同级的上一个div浮动了，那么这个div就会自动与上一个div变成同一个高度（在宽度允许的情况下），但是实际上这个是错误的。要实现这个效果呢，需要配合margin属性，就如图IE7显示的例子，正确的写法应该是酱紫的。

 

float的使用规则，假设同一行需要显示N个div，那么第至第N-1个div都需要设置float属性，第N个div的margin-X（X=float的方向）的大小=前面第1至第N-1个div的宽度总和，需要注意的是，这些div的父级div的宽度，不能小于N个子div的宽度和。当吧这个问题弄清楚以后，布局就不是问题了。

至于div之间的距离，那么只需要增加margin-X的值即可，例如

 

这样的写法完全兼容各种浏览器，同样包括IE6和IE7。

 可能你会感到奇怪，在IE7没有margin-X的值的时候，显示也是正常的，如果我兼容了高版本的浏览器，IE7会不会乱呢？答案就是不会乱，不信可以自己尝试一下。

高度属性。高度属性最好不要设置，其默认属性为自动适应，可以参考各个新闻网站的新闻页面，不同新闻的内容各不相同，但是新闻页面的框架都是一样的，显示新闻的部分都是自动增长的，为了避免内容跑到框外面去，所以高度属性都是默认的自动适应。

绝对定位与相对定位。其实这个东西我也不明白，一般来说我都是用的相对定位，这样逻辑比较清晰。

div与ul/table。我本人是一般都不用ul，哪怕是菜单栏，能不用table就不用table，除非是100%肯定是列表。因为我觉得这两者很容易牵一发而动全身，div则感觉灵活一些。当然这个就是全看自己了。当你把浮动的相关问题解决了的时候，那么布局的大问题也就没什么了

关于网页开发的建议：尽量不要使用IE，因为IE的解析和其他浏览器解析有差异的，一般来说其他浏览器没问题，那么IE就没问题，但是IE没问题不见得其他浏览器没问题。推荐分别下载谷歌浏览器、火狐浏览器、opera浏览器和苹果浏览器。