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.