bjcstinc吧 关注:13贴子:107
  • 0回复贴,共1

ie6 css hack css ie6,ie7,ie8 兼容性写法,CSS hack...

只看楼主收藏回复

margin-bottom:40px; /*ff的属性*/
  margin-bottom:140px\9; /* IE6/7/8的属性 */
  color:red\0; /* 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:blue\9;//所有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什么都不识别
  <html>
  <body>
  <div style="border: 1px solid red; width: 300px; padding: 10px;">
  在Firefox中,div的完整宽度是padding+width,因此width: 300px; padding: 10px;的实际宽度是320px;而在IE6中,div的完整宽度是width,所以
  这个div和下面的div宽度一致。
  </div>
  <div style="border: 1px solid red; width: 300px;">
  宽度为300px的div
  </div>
  <div style="border: 1px solid red; width: 280px !important; width: 300px; padding: 10px;">
  通过借助!important标记,可以设置Firefox中的width值为IE6中的width值减去padding值,这样就实现了Firefox与IE6的padding效果尺寸兼容。
  </div>
  </body>
  </html>
  ================================================== ================================
  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; 一定要在前面。
  除了在不同的浏览器上会有这个问题,还有可能是在编码时引用了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  这个头,他在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,td{margin:0;padding:0;}
  img{border:0px;}
  ul {margin:0px;padding:0px;}/
  ul li {list-style:none;}
  上面的建站常用代码就相是格式化CSS样式,让各浏览器按照我们设置的属性值渲染网页
  第二招:IE和FF下对象居中问题
  IE下大家应该知道只要设置body{text-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 { color: #666; } /* IE6环境 */
  *+html #1 { color: #999; } /* IE7环境 */
  上面的书写顺序一定不能去改变。



IP属地:北京1楼2012-06-11 06:13回复