CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

简介: css ie6,ie7,ie8 兼容性写法,CSS hack写法  margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6/7/8的属性 */color:red\0;              /* IE8支持 */*...

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/

目录
相关文章
|
1月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
5月前
|
Web App开发 前端开发 开发者
|
5天前
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
8 0
|
4月前
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
18 0
|
5月前
|
前端开发 开发者
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的?
|
9月前
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
前端开发
【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型!🔥🔥
前言 大家好,我是HoMeTown,CSS是作为前端必有技术栈之一,但是有很多同学其实对CSS的盒模型都不是很了解,今天想聊一下Css盒子模型。
59 0
|
Web App开发 SQL iOS开发
html-day10css兼容问题及常见的bug&hack
html-day10css兼容问题及常见的bug&hack
|
Web App开发 前端开发 iOS开发
CSS hack | 学习笔记
快速学习CSS hack
59 0
CSS hack | 学习笔记
|
前端开发 JavaScript 安全
你知道渐进增强和优雅降级吗?[css3兼容性写法]
写在前面: 在前端开发的过程中,如果有注意的话,发现有些写css3属性时,兼容性的写法顺序不太一样,比如transition属性,有些把transition放在前面有些是放在后面,这就引出了两个概念:优雅降级和渐进增强。 写法栗子: .transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*优雅降级写法*/
160 0
你知道渐进增强和优雅降级吗?[css3兼容性写法]

相关产品

  • 云迁移中心