div css兼容笔记.docVIP

css+div浏览器兼容 我们做一个页面，以前可能会以为最要看起来的效果能达到预先的效果就可以了。但事实上不是那么一回事，现在，你必须关注代码，你必须让你写的代码有自己的意义，而不是纯粹为了外观。我们应该在标题里使用h1,h2，在列表里使用ul,li，有时候也会用dl,dt,dd。需要用一个盒子把内容装起来，方便布局的时候，我们用div。虽然我们有时候会为了页面效果写一些与内容无关的代码进去，但这并不影响我们的概念是用让代码本身变得有意义。有些初学者会通篇都用div来写，那样子太傻了。如果你养成这个习惯时，就不会犯一些错误，导致维护起来困难了。比如说一个新闻列表，你可以先不考虑样式，先定义一个div id=newsbox/div把它装起来。这样以后我们只需要调整#newsbox的样式就可以调整这个新闻列表的位置。而不是单纯为了外表看起来像一个新闻列表而去写代码。所以我建议大家都用记事本或者用稍高级一点的记事本代替本来练习。养成尽量节省代码的习惯，有些不需要重复写的地方，就用更省代码的方法去实现。接下来的问题，主要就是明白css里的float的用法就可以了。你一定要完全明白float是什么意思，确定你真的明白了，然后你才不会犯很多错误，导致页面变形。float往往会和clear:both联系在一起。因为有了浮动，有时候我们就需要清除浮动，以免在那个破fox里变形。一般导致在不同浏览器兼容出问题的，一个是float没有清除。一个是margin和padding各有一套计算方法一个是忘了dl,ul这些东东是有自带的margin属性的。还有一个，在ie6里有个float后的双倍margin的bug。避免这个问题的出现，切记不需要用到float的时候，就不要用。以免出现这个情况。一个最容易变形的情况，是在body里定义了页面居中时，没有定义margin:auto;这些都是初学者容易忽视的问题，我把问题指出来，但不要问我这些问题如何解决，原理是什么。学会自学，自己去查资料，这才是我能够教给你们的唯一真正有用的东西。我们不需要买书，不需要老师，我们只是需要打开记事本，开始练习。然后不断的发现问题，解决问题，并在这个过程中学习到经验和心得。 目前比较全面的浏览器CSS BUG兼容汇总 1.div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如：#div id=”imfloat” 相应的css为 #IamFloat{float:left; margin:5px;display:inline;} 3.浮动ie产生的双倍距离 #box{float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的效果diplay:table;}4 IE与宽度和高度的问题IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}htmlbody #box{width: auto; height: auto; min-width: 80px; min-height: 35px;}5.页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个div 放到 body 标签下，然后为div指定一个类, 然后CSS这样设