Use filters to set the resolution of the 6/7/8/9 parsing exception for IE _javascript tips

Source: Internet
Author: User
As follows
Copy Code code as follows:

<div style= "Width:100px;height:100px;background:gold" ></div>

Use IE developer tools, or IE8 with your own developer tools. Structure as shown in Figure 1:

Where the red is circled you can see the inline style Width,height,background added to the div in order. Normal!

But after adding Filter:alpha (opacity=20) to the Div,

Copy Code code as follows:

<div style= "Filter:alpha (opacity=20); Width:100px;height:100px;background:gold" >
</div>

The situation has changed, as shown in Figure 2:

The red circle saw that width and filter were squeezed on one line. Normal condition width should be on a different line.
One might say that this is just a developer tool that doesn't display correctly, as long as it doesn't affect the proper rendering of page elements.
Indeed, the width, height, background color, and transparency of the element in IE6/7/8/9 can be displayed as expected by the setting. As shown in figure:

In addition, the above behavior can occur when you write a style within a styles label or in a CSS file.

Then look at JS settings filter, the situation is slightly different. The code is as follows:

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ie 6/7/8/9 in JS settings filter</title>
<body>
<div id= "D1" style= "Width:100px;height:100px;background:gold" ></div>
<script type= "Text/javascript" >
var D1 = document.getElementById (' D1 ');
D1.style.filter = ' alpha (opacity=20) ';
</script>
</body>

IE view the structure, the effect is shown in Figure 2, that is, filter and width on one line.

Note the last line of JS code in HTML above
Copy Code code as follows:

D1.style.filter = ' alpha (opacity=20) ';

There is no semicolon after the right parenthesis. Now the sentence is slightly changed (indeed a little change, only a semicolon)
Copy Code code as follows:

D1.style.filter = ' alpha (opacity=20); ';

That is, by adding a semicolon after the parenthesis ";". View IE developer tools as shown in Figure 3:

Where the red circles see four CSS properties background, filter, height, and width appear on one line alone. Instead of the filter and width shown on one line like Figure 2.

PS: Many popular JS Library settings transparent method without alpha (OPACITY=20) after the semicolon.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.