常用的样式兼容写法.doc

常用的样式兼容写法margin-bottom:40px; /*ff的属性*/ margin-bottom:140px9; /* IE6/7/8的属性 */ color:red0; /* IE8支持 */ *margin-bottom:450px; /*IE6/7的属性*/ +margin-bottom:450px; _color:#ff0000; /* 只ie6支持 */ #1 color: #333; /* FF环境 */ * html #1 color: #666; /* IE6环境 */ *+html #1 color: #999; /* IE7环境 */ = = 三、CSS hack写法 书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。 color:red;/所有浏览器 color:blue9;/所有IE +color:orange;/IE7 _color:green;/IE6 若浏览器为FireFox，那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。 IE6识别 * 、_ IE7识别 * 、+ IE8识别 * 、9,0 FF什么都不识别 在Firefox中，div的完整宽度是padding+width，因此width: 300px; padding: 10px;的实际宽度是320px;而在IE6中，div的完整宽度是width，所以 这个div和下面的div宽度一致。 宽度为300px的div 通过借助!important标记，可以设置Firefox中的width值为IE6中的width值减去padding值，这样就实现了Firefox与IE6的padding效果尺寸兼容。 = = DOCTYPE标准firfox与ie6 padding的问题 首先我们说说firefox和IE对CSS的宽度显示有什么不同： 其实CSS width 指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。它只包含容器中内容的宽度。而Internet Explorer width 则是指整个容器的宽度，包括内容，padding ，border。 Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度 IE中：内容宽度=您定义的容器宽度(Internet Explorer width)-padding宽度-border宽度 所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px. 即padding:5px是在width里面。 而Firefox中，上面这个定义，显示宽度就是 125 px; 所以，我们就必须这样定义 width:115px !important;width:120px;padding:5px; 必须注意的是， !important; 一定要在前面。 除了在不同的浏览器上会有这个问题，还有可能是在编码时引用了 这个头，他在ie浏览器下要支持w3标准，w3的padding和firfox标准相同，所以也会出现上面的情况 = = 网站如何同时兼容IE6、IE7、IE8 第一招：给常用CSS规定属性值。 body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input, p,th,tdmargin:0;padding:0; imgborder:0px; ul margin:0px;padding:0px;/ ul li list-style:none; 上面的建站常用代码就相是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页 第二招：IE和FF下对象居中问题 IE下大家应该知道只要设置bodytext-align:center;这样就可以居中显示。 但是这样的方法在FF不行的。这里就需要给修改成body:text-align:center;margin:0px auto;Margin的意思就是上下距离为0像素，左右为自动。所以FF就会居 中显示。 第三招：垂直居中（仅只用于一行） 比如说一个高30px的div，问题默认是会显示在左上角，如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则在修改line-height:30px; 数值越大越局下，为了防止撑破层，还需要再给一个样式overflow:hidden;(超出的部分不显示) 第四招：给每一个块对象设置三个样式 width:*px;height:*px;overflow:hidden;即便高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题。 第五招：针对IE6、IE7、FF的css样式(这一招在特殊情况下经常用到) 原来建设网站经常使用!important来设置优先权，但有了IE7之后就不行了。下面给大家个可以解决IE6、IE7、FF各个CSS优先权的方法 #1 color: #333; /* FF环境 */ * html #1 co