css浏览器兼容.docx

CSS浏览器兼容性问题解决方案 CSS浏览器兼容性问题是Web开发中常见的问题。不同的浏览器对CSS的解析方式不同，这就导致了浏览器之间的兼容性问题。了解浏览器的兼容性问题是非常重要的，为此，我们总结了一些常见的浏览器兼容性问题的解决方案。 1. 垂直居中问题 垂直居中是CSS布局中常见的问题。解决方案是使用`vertical-align:middle;`将行距增加到和整个DIV一样高，然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题 在IE6下，设置为float的div的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上`display:inline;`。 3. 浮动 IE 产生的双倍距离 在IE下，浮动元素会产生双倍距离的问题。解决方案是使用`display:inline;`使浮动忽略。 4. IE 与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。解决方案是使用`width:auto; height:auto; min-width:80px; min-height:35px;`。 5. 页面的最小宽度 min-width是非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度。但IE不认得这个命令。解决方案是使用`#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}`。 6. DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。解决方案是使用`#left{ margin-right:-3px; }`。 7. IE 捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。解决办法是对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 8. float 的 div 闭合;清除浮动;自适应高度; 解决方案是使用`<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >`来闭合浮动的div。使用`clear:both;`来清除浮动。使用`height:auto;`来实现自适应高度。 了解浏览器的兼容性问题是非常重要的。使用正确的CSS技巧和hack可以解决浏览器的兼容性问题，提高Web开发的效率和质量。