|
虽然IE浏览器占有很大的市场份额，但是由于IE浏览器对标准的支持不够好，导致Web开发中经常需要去处理浏览器兼容性问题，本文和你一起分析一下IE中应用CSS可能出现的一些BUG，今天要说这个问题就是这样的，先从插入CSS的三种方法说起： 外部样式（External Style Sheet） 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部： view sourceprint? 2 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 3 </head> 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样: view sourceprint? 2 <style type="text/css"> 3 hr {color: sienna;} 4 p {margin-left: 20px;} 5 body {background-image: url("images/back40.gif");} 6 </style> 7 </head> 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 view sourceprint? 如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况，一般情况下优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
之所以说是一般情况是因为可以使用!important来改变这种顺序，比如外部样式如果某个样式项使用了!important来提高优先级，其优先级将比内联样式高。还有个例外的情况就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式： view sourceprint? 02 <!--内部样式--> 03 <style> 04 h3{color:green;} 05 </style> 06 07 <!--外部样式style.css--> 08 <!--h3{color:blue;}--> 09 <link rel="stylesheet" type="text/css" href="style.css"/> 10 </head> 11 <body> 12 <h3>测试！</h3> 13 </body> view sourceprint? 02 var agent = window.navigator.userAgent.toLowerCase(); 03 var is_op = (agent.indexOf("opera") != -1); 04 var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op; 05 var is_ch = (agent.indexOf("chrome") != -1); 06 07 var cssStr="h3 {color:green;}"; 08 var s=document.createElement("style"); 09 var head=document.getElementsByTagName("head").item(0); 10 var link=document.getElementsByTagName("link"); 11 link=link.item(0); 12 13 if(is_ie) 14 { 15 if(link) 16 head.insertBefore(s,link); 17 else 18 head.appendChild(s); 19 document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr; 20 } 21 else if(is_ch) 22 { 23 var t=document.createTextNode(); 24 t.nodeValue=cssStr; 25 s.appendChild(t); 26 head.insertBefore(s,link); 27 } 28 else 29 { 30 s.innerHTML=cssStr; 31 head.insertBefore(s,link); 32 } 33 })(); |