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

只有IE8识别  \0/

ie9只识别：\9

FF什么都不识别

  1. .test{
  2. color:#09F\0; /* IE8/9 */
  3. color:#09F\0/; /* IE8 only */
  4. }
  5. :root .test { color:#963\9; } /* IE9 only */
  6. /*或者下面的，但是下面的优先级小于上面的。Ps:老外的方法都是\0，根本没考虑Opera*/
  7. @media all and (min-width:0){
  8. .test{color:red\9; }/* IE9 only */
  9. }

<html>
    <body>
        <div >
            在Firefox中，div的完整宽度是padding+width，因此width: 300px; padding: 10px;的实际宽度是320px;而在IE6中，div的完整宽度是width，所以

这个div和下面的div宽度一致。
        </div>
        <div >
            宽度为300px的div
        </div>
        <div >
            通过借助!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环境 */ 
上面的书写顺序一定不能去改变。
这样子网页在FF下显示#333，IE6下显示#666，IE7下显示#999;

转自博客，原链接地址：http://xinyizhijing.blog.163.com/blog/static/1336077132012311115815656/

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法的更多相关文章

  1. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  2. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  3. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

  4. 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

    HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

  5. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

  6. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  7. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

  8. 针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法

    首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!importan ...

  9. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. kubernetes deployment

    deployment是k8s中部署应用最常见的一种方式.如果不需要被访问,那么只需要定义deployment即可.如果需要被其他服务访问,那么可以创建一个service与其绑定,通过访问service ...

  2. JavaScrip——练习(做悬浮框)

    通过HTML.CSS.JSP来实现 1.首先确定通过div嵌套来实现: 大的div里放默认显示的一层,限制其总层次高,设置超出部分隐藏 小的div里放鼠标移过去时显示的一层:3行1列的表格 1.1.什 ...

  3. mkyaffs2image编译

    http://blog.chinaunix.net/uid-26009923-id-3760474.htmlhttp://blog.csdn.net/xingtian19880101/article/ ...

  4. 【高可用HA】Apache (4) —— Mac下配置Apache Httpd负载均衡(Load Balancer)之mod_jk

    Mac下配置Apache Httpd负载均衡(Load Balancer)之mod_jk httpd版本: httpd-2.4.17 jk版本: tomcat-connectors-1.2.41 参考 ...

  5. 7-zip 压缩算法及C SDK使用

    pdf版本下载:http://files.cnblogs.com/davad/7-zip_and_SDK.pdf 1. 介绍 官方网址:中文:http://sparanoid.com/lab/7z/ ...

  6. win7、vs2013编译webkit总结

    在windows7.vs2013环境下编译webkit,本人测试成功 1.解压cygwin到C盘下(建议放在C盘更目录下,否则编译期间会有部分文件找不到) 启动命令:C:\cygwin\bin\min ...

  7. R语言学习笔记之<在Linux上遇到的问题集锦>

    Standalone模式:Standalone模式运行的Spark集群对不同的应用程序采用先进先出(FIFO)的顺序进行调度.默认情况下每个应用程序会独占所有可用节点的资源. 现在版本的SparkR只 ...

  8. Hibernate查询_HQL_EJBQL_QBC_QBE

    查询按功能强弱可以分为以下几种:Native SQL > HQL > EJBQL > QBC > QBE 1.Native SQLNative SQL为数据库系统本身的SQL, ...

  9. javaEE mvc样例具体解释

    一个不错的样例值得细细品味: 以下依照包顺序将代码贴出来供大家參考: IEmpDAO package org.lzch.dao; import java.util.List; import org.l ...

  10. 一、JSON解析与字符串化

    JSON.stringify() 序列化对象.数组或原始值 语法:JSON.stringify(o,filter,indent) o,要转换成JSON的对象.数组或原始值 filter,指定要序列化的 ...