html5兼容性写法,css 兼容性书写记录

css 兼容性书写记录

发布时间：2011-11-02 11:36:13   作者：佚名   我要评论

很早开始就知道css hack并使用之，以前觉得css hack是个很神奇的东西能解决很多兼容性问题，渐渐地发现，其实不容hack的页面才是更好的选择

从页面开始布局设计初就考虑到各个浏览器的问题，留出充足的余量和给各个浏览器留出充足的发挥空间，这样的页面兼容性才是最好的。

下面就来几个问题：

1、div border不能显示

问题描述：用一个div A层中间放了几个div B来存放内容，因为内容是不固定的，于是就使用了对B层使用了float，让A层自适应高度，后面对A层加上边框，在ie中能显示，但是在firefox中就始终没法显示。

问题分析：B层使用了float，位置浮起，A层边框不能显示

解决方案：对A开始使用一个浮动清除

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出现闪烁

解决方案：解决方案：添加上则可以解决问题，但是本句话前不能有其他注释，开始未能解决时因为在页面的开始有了一个空注释(如问题5中)，当问题5解决了，后面反思，得出了这个方案。

其实前面在网上也查了相关资料，解决法案正是如此，但是由于前面有一个空注释，所以没有出现效果，后面把空注释解决了，才恍然醒悟。

5、静态页布局兼容大部分浏览器，加上动态数据后在ie6 和 ie7中居中的内容就偏左了

问题描述：做静态页布局时，很是仔细，因为知道不用css hack的布局做出来的兼容性才是最好的，于是很是仔细的做完，测试了各个浏览器，兼容性也很好，但加上数据后就出现偏移了。

问题分析：经过再三的坚持，发现，在输出数据时，页面的头部多了一个空注释，于是就偏移了。

解决方案：去除页面开始的

6、使用jquery slidetoggle是子元素出现快于父元素出现和消失，但下拉还未完成，子元素出现一闪出现，给人以突兀的感觉　　问题描述：使用了jquery slidetoggle 元素下刚开始下来是，子元素则一闪而现，即一点击则出现，很是突兀

问题分析：经过查找，发现是子元素使用了position:relative的原因造成

解决法案：去除子元素中position:relative 的属性

相关文章

每次设计一张网页或一个表单，都被各种浏览器的兼容问题伤透脑筋，尤其是IE家族。在做兼容性设计时，我们往往会使用各种浏览器能识别的独特语法进行hack，从而达到各种浏览2020-03-20

这篇文章主要介绍了css区分ie8/ie9/ie10/ie11 chrome firefox的代码,需要的朋友可以参考下2020-03-20

这篇文章主要介绍了解决CSS浏览器兼容性问题的4种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-28

这篇文章主要介绍了常见的浏览器兼容性问题(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学2020-02-20

这篇文章主要介绍了border-radius IE8兼容处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-02-12

这篇文章主要介绍了浅谈遇到的几个浏览器兼容性问题，详细的介绍了几种我遇到的问题和解决方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-26

这篇文章主要介绍了base64图片在各种浏览器的兼容性处理的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-14

这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-20

这篇文章主要介绍了针对IE浏览器的兼容问题小结,需要的朋友可以参考下2017-04-19

浏览器兼容性问题总是让人很头疼，这里介绍几个技巧来避免这个问题,需要的朋友可以参考下2017-04-08

最新评论