简体   繁体   中英

I wrote a code in HTML. IE is not rendering it properly

I have been working on a piece of HTML code for some personal use.

The code works perfectly fine in Chrome(38.0.2125.111 m), Firefox(32.0.3) and Opera(24.0.1558.53) on my Windows 8.1 machine. Since it is on a local server, I managed to test it on other machine too. But my IE11(11.0.9600.17416) is not working well with the code.

Here is the code I have written:

<section class="gs">
    <input id="googleSearch" class="googleSearch" type="text" name="search" autocomplete="off" />
    <div id="resultGS" class="result"></div>
</section>

Here is the code IE has rendered:

<section class=gs></section>
    <input id=googleSearch class=googleSearch name=search autocomplete="off"></input>
    <div id=resultGS class=result></div>
</section><//section>

Can anyone please explain me what is going on here?Anyone has any ideas?

Here is the snapshot of the code:

在此处输入图片说明

As far as I can see IE is completing tags by itself as it has done with the input tag, am I correct?

As Claudix said, adding the HTML5 doctype should help. Because it will set the IE browser to the last compatibility mode. But for some reason (IE settings, intranet,...), it can be forced to use a specific mode. If this is the case, add a meta to force IE to execute your page with the most recent compatibility mode.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

What the question describes is not document rendering at all, but the way IE shows HTML code in it developer tools, in a particular state. You see the code that way when you press F12 and then select the “DOM Explorer” tab.

And this is not normal in IE 11. It only appears when the browser has been set to emulate IE 8 or lower, in the first dropdown in the “Emulation” tab in the dev tools. Simply select “Edge” there.

When you are using IE 11 in IE 8 or lower mode, or when someone is actually using IE 8 or lower, the browser does not actually support section at all . It behaves as if the tags were not there, simply rendering the content between them. (The code display in dev tools reflects this, in its odd way.) This normally affects only styling . The section element has no default effect beyond being rendered as a block, and normally its content is blocks anyway, so even this does not matter. But supports matter if you try to style section , of course.

If you really need to use IE 8, simulated or real, the following code before any CSS references fixes the issue by “introducing” the element to the browser:

<script>
document.createElement('section');
</script>

(This does not seem to work when emulating IE 7 or lower, but this is probably a bug in the emulation. It should work, in the sense of making the element styleable, on IE versions down to 6.)

The <section> tag is new in HTML5. Have you put the <!DOCTYPE html> declaration at the top of the HTML file (before the <html> tag)?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM