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支持 */ *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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

942
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

1481
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

25110
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1144
来自专栏calmound

HTML

注释<!--这里是注释--> 页面内容<body>展示的页面内容</body> 段落 <p></p> 标题<hx></hx>     <body>     <h...

5637
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

2496
来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

4842
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

22710
来自专栏小白安全

HTML+CSS基础到精通系统学习

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

3555
来自专栏js编程在工科课程中的简单应用

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

1360

扫码关注云+社区

领取腾讯云代金券