Home思洋影视事业部网站建设知识库
0 Comments

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

发布于：2013-11-04  |   作者：广州网站建设  |   已聚集：人围观

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

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

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

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

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

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

下面是一个典型的运用实例：
广州网站建设,网站建设,广州网页设计,广州网站设计

示例代码



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




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


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机