解决浏览器兼容问题的CSS语法技巧大全.doc
需积分: 9 76 浏览量
2011-06-10
23:39:45
上传
评论
收藏 385KB DOC 举报
让 CSS 兼容 IE 和 Firefox 的技巧集合
标签: Firefox CSS 技巧 兼容 2009-05-15 11:54
来源：http://mcnasty.blogbus.com/logs/37425275.html
让 CSS 兼容 IE 和 Firefox 的技巧集合
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; （margin-left:加倍，个人见解）
例如：
＜#div id=”imfloat”>
相应的 css 为
#imfloat{
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 的情况来使。
剩余63页未读，继续阅读
资源评论
