Comments: The browser does not set any styles for unknown elements (different browsers have different default styles for elements). In versions earlier than IE9, the browser cannot set styles for unknown elements, there is a solution to solve this problem. If you are interested, please refer
Each browser has a list to list the HTML elements that it supports. All elements not in the list are considered unknown elements. The browser does not set any styles for unknown elements (different browsers have different default styles for elements ). In versions earlier than IE9, you cannot set styles for unknown elements. The DOM of unknown elements is also displayed incorrectly. IE inserts an empty node without child elements in the DOM. All the elements that you thought would become child elements of this unknown element will become brother nodes.
There is a solution to solve this problem. before using the article label, for example, create a false article element with js, and IE will recognize this element, and supports setting styles with css. This fake element does not even need to be inserted into the DOM.
See the following example.:
The Code is as follows:
<! Doctype html>
<Html lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> unknown elements </title>
<Style>
Article {display: block; border: 1px solid red}
</Style>
</Meta> <Body>
<Article>
<H1> welcome to feimos's blog <P> This is your <span> first time to visit this webSite. </span> </p>
</Article>
</Body>
</Html>
IE6 does not recognize article, so it does not have a red border.
However, if we add a js statement to the head, the situation will be different immediately.
The Code is as follows:
<Script type = "text/javascript">
Document. createElement ("article ");
</Script>
IE6 pretended that it knew this element and correctly showed the effect.
We can create a fake copy for all the new HTML5 elements at a time, so we don't have to worry about browsers that do not support HTML5 well. Remy Sharp's HTML5 enabling script helps us do these things. The basic idea of this script is as follows:
The Code is as follows:
<! -- [If lt IE 9]>
<Script type = "text/javascript">
Var e = ("abbr, article, aside, audio, canvas, datalist, details," +
"Figure, footer, header, hgroup, mark, menu, meter, nav, output," +
"Progress, section, time, video"). split (',');
For (var I = 0; I <e. length; I ++ ){
Document. createElement (e [I]);
}
</Script>
<! [Endif] -->
First, use conditional annotations to determine whether the version is earlier than IE9. if the version is earlier than IE9, execute js. Write all new tags to the e array, traverse the entire array, and create a copy.
The script has been hosted on the Google Project Hosting. You can directly link the script to the external link:
The Code is as follows:
<! -- [If lt IE 9]>
<Script src = "// html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<! [Endif] -->
In addition, this script should be placed at the beginning of the page, preferably in the head instead of at the bottom. In this way, IE runs the code before parsing the page tag.
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
