div+css浏览器兼容问题解决方法.pdfVIP

div+css浏览器兼容问题解决方法 从网上收集了 IE7,6 与 Fireofx 的兼容性处理方法并整理了一下 .对于 web2.0 的过度 ,请尽量 用 xhtml 格 式写 代码 , 而且 DOCTYPE 影响 CSS 处理 , 作为 W3C 的标 准 , 一 定要加 DOCTYPE 声名 . CSS 技巧 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;/*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; // 实现同一行排列的效果 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 这 样 设 计 ： #container{ min-width: 600px; width:e-xpression(document.body .clientWidth 600? 600px: auto );} 第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE 才认得，这也会让你的 H