css 兼容性书写记录
(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )
从页面开始布局设计初就考虑到各个浏览器的问题，留出充足的余量和给各个浏览器留出充足的发挥空间，这样的页面兼容性才是最好的。
下面就来几个问题：
1、div border不能显示
问题描述：用一个div A层中间放了几个div B来存放内容，因为内容是不固定的，于是就使用了对B层使用了float，让A层自适应高度，后面对A层加上边框，在ie中能显示，但是在firefox中就始终没法显示。
问题分析：B层使用了float，位置浮起，A层边框不能显示
解决方案：对A开始使用一个浮动清除<div style="clear:both"></div>
2、cms ie6的内容页面不能全部显示
问题描述：cms内容页中ie6能显示部分的内容，在其他浏览器中显示能正常全部显示
问题分析：查看代码，其中有.content{height:auto !importan;height:500px;min-height:500px;}，应该是布局是为了好看，留下了500px的高度，其实内容页自适应就可以了，在ie6中的min-height是不兼容的于是就是固定高度500px，超出后也不能显示了。
解决法案：.content{height:auto;}高度自适应
3、关于margin和padding撑破外层div的问题
问题描述：使用div margin padding 布局，整体框架设定号，开始添加内容时使用了margin padding对内容定位，最终在ie6中将整个div撑破，排版打乱
问题分析：ie6中间margin+padding+border+height（width）=盒子的实际尺寸，于是开始设计的尺寸加上定位的margin和padding就导致了撑破div
解决方案：定位改为position定位，使用position="relative"相对于本身原位置定位，自身位置保留，相邻div依靠原位置，定位可以把原来margin和padding多撑出位置重叠在一起，多出重叠部分无内容对用户体验上无影响。
4、使用jquery slidetoggle 出现闪烁问题
问题描述：使用jquery slidetoggle ie6和ie7出现闪烁问题
问题分析：查找资料 对slidetoggle 的子元素使用了position:relative position:absolute 等出现闪烁，自查原因使用了float:left出现闪烁
解决方案：解决方案：添加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">则可以解决问题，但是本句话前不能有其他注释，开始未能解决时因为在页面的开始有了一个空注释（如问题5中），当问题5解决了，后面反思，得出了这个方案。
其实前面在网上也查了相关资料，解决法案正是如此，但是由于前面有一个空注释，所以没有出现效果，后面把空注释解决了，才恍然醒悟。
5、静态页布局兼容大部分浏览器，加上动态数据后在ie6 和 ie7中居中的内容就偏左了
问题描述：做静态页布局时，很是仔细，因为知道不用css hack的布局做出来的兼容性才是最好的，于是很是仔细的做完，测试了各个浏览器，兼容性也很好，但加上数据后就出现偏移了。
问题分析：经过再三的坚持，发现，在输出数据时，页面的头部多了一个<!---->空注释，于是就偏移了。
解决方案：去除页面开始的<!---->
6、使用jquery slidetoggle是子元素出现快于父元素出现和消失，但下拉还未完成，子元素出现一闪出现，给人以突兀的感觉
问题描述：使用了jquery slidetoggle 元素下刚开始下来是，子元素则一闪而现，即一点击则出现，很是突兀
问题分析：经过查找，发现是子元素使用了position:relative的原因造成
解决法案：去除子元素中position:relative 的属性
下面就来几个问题：
1、div border不能显示
问题描述：用一个div A层中间放了几个div B来存放内容，因为内容是不固定的，于是就使用了对B层使用了float，让A层自适应高度，后面对A层加上边框，在ie中能显示，但是在firefox中就始终没法显示。
问题分析：B层使用了float，位置浮起，A层边框不能显示
解决方案：对A开始使用一个浮动清除<div style="clear:both"></div>
2、cms ie6的内容页面不能全部显示
问题描述：cms内容页中ie6能显示部分的内容，在其他浏览器中显示能正常全部显示
问题分析：查看代码，其中有.content{height:auto !importan;height:500px;min-height:500px;}，应该是布局是为了好看，留下了500px的高度，其实内容页自适应就可以了，在ie6中的min-height是不兼容的于是就是固定高度500px，超出后也不能显示了。
解决法案：.content{height:auto;}高度自适应
3、关于margin和padding撑破外层div的问题
问题描述：使用div margin padding 布局，整体框架设定号，开始添加内容时使用了margin padding对内容定位，最终在ie6中将整个div撑破，排版打乱
问题分析：ie6中间margin+padding+border+height（width）=盒子的实际尺寸，于是开始设计的尺寸加上定位的margin和padding就导致了撑破div
解决方案：定位改为position定位，使用position="relative"相对于本身原位置定位，自身位置保留，相邻div依靠原位置，定位可以把原来margin和padding多撑出位置重叠在一起，多出重叠部分无内容对用户体验上无影响。
4、使用jquery slidetoggle 出现闪烁问题
问题描述：使用jquery slidetoggle ie6和ie7出现闪烁问题
问题分析：查找资料 对slidetoggle 的子元素使用了position:relative position:absolute 等出现闪烁，自查原因使用了float:left出现闪烁
解决方案：解决方案：添加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">则可以解决问题，但是本句话前不能有其他注释，开始未能解决时因为在页面的开始有了一个空注释（如问题5中），当问题5解决了，后面反思，得出了这个方案。
其实前面在网上也查了相关资料，解决法案正是如此，但是由于前面有一个空注释，所以没有出现效果，后面把空注释解决了，才恍然醒悟。
5、静态页布局兼容大部分浏览器，加上动态数据后在ie6 和 ie7中居中的内容就偏左了
问题描述：做静态页布局时，很是仔细，因为知道不用css hack的布局做出来的兼容性才是最好的，于是很是仔细的做完，测试了各个浏览器，兼容性也很好，但加上数据后就出现偏移了。
问题分析：经过再三的坚持，发现，在输出数据时，页面的头部多了一个<!---->空注释，于是就偏移了。
解决方案：去除页面开始的<!---->
6、使用jquery slidetoggle是子元素出现快于父元素出现和消失，但下拉还未完成，子元素出现一闪出现，给人以突兀的感觉
问题描述：使用了jquery slidetoggle 元素下刚开始下来是，子元素则一闪而现，即一点击则出现，很是突兀
问题分析：经过查找，发现是子元素使用了position:relative的原因造成
解决法案：去除子元素中position:relative 的属性
下一篇：css 垂直居中的几种实现方法