Due to the lack of standard support for IE browsers, Web development often needs to handle browser compatibility issues. This is especially confusing, start with three methods to insert CSS:
External Style (External Style Sheet)
When a style needs to be applied to many pages, the external style sheet is ideal. When using an external style sheet, you can change the appearance of the entire site by changing a file. Use the <link> label to link to the style sheet on each page. <Link> tag in (document) header:
Internal Style (Internal Style Sheet)
When a document requires a special style, you should use an internal style sheet. You can use the <style> label to define an internal style sheet in the Document Header, as shown in the following figure:
Inline Styles)
Because we need to mix the performance and content together, inline styles will lose many of the advantages of style sheets. Use this method with caution. For example, when a style only needs to be applied once on one element. To use inline Styles, you must use the style attribute in the relevant labels. The Style attribute can contain any CSS attribute.
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>Multiple Styles)
If the external style, internal style, and inline style are applied to the same element at the same time, multiple styles are allowed. Generally, the priority is as follows:
(External style) External style sheet <(Internal style) Internal style sheet <(Inline style) Inline style
The general reason is that it can be used! Important to change this order. For example, if an external style item is used! Important to Improve the priority, the priority will be higher than the inline style. Another exception is that if the external style is placed behind the internal style, the external style will overwrite the internal style:
<Head> <! -- Internal style --> <style> h3 {color: green ;}</style> <! --External style style.css --> <! -- H3 {color: blue ;} --> <link rel = "stylesheet" type = "text/css" href = "style.css"/>The color of the text will be blue, because the blue color of the external style covers the green color of the internal style, which is consistent in mainstream browsers, including IE. However, in another way, IE shows an alternative. This method uses scripts to insert internal styles before external styles, that is, the internal styles above are created using scripts. The Code is as follows:
(function(){var agent = window.navigator.userAgent.toLowerCase();var is_op = (agent.indexOf("opera") != -1);var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;var is_ch = (agent.indexOf("chrome") != -1);var cssStr="h3 {color:green;}";var s=document.createElement("style");var head=document.getElementsByTagName("head").item(0);var link=document.getElementsByTagName("link");link=link.item(0);if(is_ie){if(link)head.insertBefore(s,link);elsehead.appendChild(s);document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;}else if(is_ch){var t=document.createTextNode();t.nodeValue=cssStr;s.appendChild(t);head.insertBefore(s,link);}else{s.innerHTML=cssStr;head.insertBefore(s,link);}})();In Firefox, Chrome, Safari, and Opera, the text is blue. If the internal style is inserted before the external style, the external style will overwrite the internal style, however, in IE, it is green. That is to say, after IE loads the page document and runs the script to insert the internal style, it sets the text color to green and ignores the subsequent external style. I wonder if you have encountered such a problem. Welcome to discuss it ......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
