css 兼容性书写记录

ttx9n · 发表于 2011-11-2 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开始使用一个浮动清除<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 的属性

r8st9 · 发表于 2022-9-10 16:45:27

撒旦撒旦撒擦擦擦擦

nwk53kbd · 发表于 2022-10-29 19:04:48

很不错的源码论坛

额呵呵 · 发表于 2022-11-3 23:33:25

数据库了多久撒快乐的健身卡啦

gc4hg · 发表于 2022-12-29 05:37:10

这个源码还可以

cxst1h57 · 发表于 2023-4-20 19:01:23

下载来瞧瞧

白狐软件 · 发表于 2023-11-12 00:40:31

。。。。。。。。。。。。。。。

雪龙Ui79 · 发表于 2024-4-10 06:04:39

vcxvcxv

.l4 · 发表于 2024-5-22 20:04:49

看看看看

nwk53kbd · 发表于 2024-8-4 05:41:43

啪啪啪生怕PSP怕

账号		自动登录	找回密码
密码			立即注册

[CSS] css 兼容性书写记录

相关帖子