科技创新div的垂直居中问题vertical-alignmiddle；将行距增加到和整.docVIP

div 的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV 一样高line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin 加倍的问题设置为float 的div 在ie 下设置的margin 会加倍。这是一个ie6都存在的bug 。解决方案是在这个div 里面加上display:inline; 例如： #divid=”imfloat” 相应的css 为#IamFloat{ float:left; margin:5px;/*IE 下理解为10px*/ display:inline;/*IE 下再理解为5px*/} 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; //实现同一行排列的效果 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;} 页面的最小宽度min -width 是个非常方便的CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE 不认得这个，而它实际上把width 当做最小宽度来使。为了让这一命令在IE 上也能用，可以把一个div 放到body 标签下，然后为div 指定一个类, 然后CSS 这样设计： #container{ min-width: 600px;width:e-xpression(document.body.clientWidth 600? 600px: auto );} 第一个min-width是正常的；但第2 行的width 使用了Javascript，这只有IE 才认得，这也会让你的HTML 文档不太正规。它实际上通过Javascript 的判断来实现最小宽度。 6.DIV 浮动IE 文本产生3 象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px 的间距. #box{ float:left; width:800px;}#left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} div id=box div id=left/div div id=right/div /div 7.IE 捉迷藏的问题当div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout 使用line-height 属性或者给#layout 使用固定高和宽。页面结构尽量简单。 8.float 的div 闭合;清除浮动;自适应高度;① 例如：#div id=”floatA” #div id=”floatB” #div id=” NOTfloatC” 这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB 的属性已经设置为float:left;) 这段代码在IE 中毫无问题，问题出在FF。原因是NOTfloatC 并非float 标签，必须将float 标签闭合。在#div class=”floatB” #div class=”NOTfloatC”之间加上 #div class=”clear”这个div 一定要注意位置，而且必须与两个具有float 属性的div 同级，之间不能存在嵌套关系，否则会产生异常。并且将clear 这种样式定义为为如下即可： .clear{