技术分享 使用不同CSS样式兼容多种浏览器

开发 前端
由于存在有IE,firefox还有其他几个主流的web浏览器,因此我们在设置CSS时需要兼容这几种常用的浏览器才能有好的用户体验,这里和大家介绍一下如何使用不同的CSS样式兼容多种浏览器。

浏览器兼容问题一直是大家比较关注的,这里和大家分享一下如何使用不同的CSS样式兼容多种浏览器,我们在设置CSS时需要兼容这几种常用的浏览器才能有好的用户体验。我们可以通过html的条件注释来实现这种兼容,原理如下文详细介绍。

如何使用不同的CSS样式兼容多种浏览器

由于存在有IE,firefox还有其他几个主流的web浏览器,因此我们在设置CSS时需要兼容这几种常用的浏览器才能有好的用户体验。我们可以通过html的条件注释来实现这种兼容,原理如下:

◆条件注释的基本结构和HTML的注释(<!––>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

◆IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

◆条件注释使用的是HTML的注释结构,因此他们只能使用在HTML文件里,而不能在CSS文件中使用。

下面是一个典型的运用实例:

示例代码

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <html> 
  4. <head> 
  5. <title>CSS在线-示例</title> 
  6. <!–默认先调用CSS.CSS样式表–> 
  7. <linkrellinkrel=”stylesheet”type=”text/CSS”href=”CSS.CSS”/> 
  8. <styletypestyletype="text/CSS"> 
  9. h1{color:black}  
  10. </style> 
  11. <!–[ifIE7]> 
  12. <!–如果IE浏览器版是7,调用ie7.CSS样式表–> 
  13. <linkrellinkrel=”stylesheet”type=”text/CSS”href=”ie7.CSS”/> 
  14. <styletypestyletype="text/CSS"> 
  15. h1{color:red}  
  16. </style> 
  17. <![endif]–> 
  18. <!–[iflteIE6]> 
  19. <!–如果IE浏览器版本小于等于6,调用ie.CSS样式表–> 
  20. <linkrellinkrel=”stylesheet”type=”text/CSS”href=”ie.CSS”/> 
  21. <styletypestyletype="text/CSS"> 
  22. h1{color:blue}  
  23. </style> 
  24. <![endif]–> 
  25. </head> 
  26. <body> 
  27. <h1>如何兼容多种浏览器</h1> 
  28. </body> 
  29. </html> 
  30.  

 本文来自CSS在线:http://www.CSSCSS.org/CSSarticle/2010315810.shtml

【编辑推荐】

  1. 实例解析CSS中padding、margin属性用法
  2. CSS Sprites图片切割术与图片优化
  3. CSS盒子模式组成及用法解析
  4. CSS中link和@import的区别
  5. CSS分栏布局的两种方法:绝对定位和浮动
责任编辑:佚名 来源: CSSCSS.org
相关推荐

2010-08-31 16:49:58

2010-09-16 13:48:15

CSS Hack

2010-09-15 15:39:03

CSS hack

2010-08-20 13:46:10

IEFirefoxCSS

2010-04-01 13:03:10

2010-09-15 16:19:17

IECSS hack

2010-09-14 13:32:33

CSS编码准则

2016-09-18 20:48:21

苹果safari浏览器

2012-06-27 14:12:45

CSS

2021-07-07 07:47:10

浏览器CSS兼容

2013-08-27 12:42:42

浏览器

2010-09-15 09:12:03

JavaScript浏览器兼容

2013-01-14 10:58:51

傲游云浏览器

2010-08-17 15:15:40

CSSIE8

2010-08-30 15:40:31

CSS浏览器兼容

2010-08-24 13:05:23

CSS超链接

2010-09-08 09:19:49

DIVCSS

2011-06-16 11:15:04

2012-08-02 10:21:49

DOM浏览器

2010-09-15 09:43:24

Javascript浏览器兼容
点赞
收藏

51CTO技术栈公众号