Frontend programming improvement journey (3) ---- Internet Explorer 6, Internet Explorer 6

Frontend programming improvement journey (3) ---- Internet Explorer 6, Internet Explorer 6

During his internship in iQiYi, ledi is mainly responsible for making mobile terminal activity pages. As mobile browsers emerge with the rise of smart phones, this determines that mobile terminals will not repeat the same mistakes in browser compatibility, in the beginning, web standards were well supported. Throughout the Internet industry, mobile web development is still in its infancy, and pc web will continue to serve as the main service form for a long time. As a front-end developer from an early age, browser compatibility is also a big joke. This article provides an overview of browser compatibility based on IE7web standards.

By 2014, few people will think that after the release of IE7, IE6 still occupies 7% of the market share after so many years. If a product is developed for the public, a 7% share of the product can still be ignored. Baidu provides a statistical interface for viewing browser shares. IE8 and chrome occupy the main market, and IE6 will still "exert its full play" in the future ". Let's take a look at IE6 compatibility issues.

1. There are not so many selectors

<Style type = "text/css"> a [target = "_ blank"] {padding-right: 16px; background: url ('HTTP: // images.cnblogs.com/cnblogs_com/justinyoung/common/outLink.gif ') no-repeat right ;}</style> 


This code shows whether the link will jump to the prompt style. A selector like this, such as the person who entered the line shortly, is more natural. It is wise to read history, I do not know how many primitive IE6 is because I do not read the historical history of the browser. IE6 does not support complicated css selectors. Therefore, when developing code for IE6, the css selector "simple and crude" is a good method.


<style type="text/css"> #txtName{ border:1px solid #eee; } #txtName:hover{ border:1px solid black; } </style> 

 
IE6 does not support any element to implement pseudo-classes. The modern css pseudo-class selector makes the web page more effective. For more information about which features cannot be used, see (this page ).

2. Reasons for layout disorder caused by IE6 to modern browsers
W3c simply says that the container is not cut out. But it does not say that the extra content can "open" the container. In the following example, the explanation and rendering of IE7 and FireFox are correct, while IE6 is incorrect (because it mistakenly believes that only the content in the container can be "opened" the container, so that the content in the container is not cut when it exceeds the limit ).


<Style type = "text/css"> # div1 {border: 1px solid red; width: 50px;/* word-wrap: break-word; * // * content cannot be supported by the parent container. Otherwise, the layout of IE6 is inconsistent with that of other browsers, resulting in confusion. overflow: hidden; will affect normal content display */} </style> 




When IEtest is used to simulate IE6, the display of the above Code is the display of modern browsers. It is not hard to see that IE6's understanding of the content will not be cut is indeed a problem.
Conditions for a bug:


   

 
    
Whether the content of "width" is too long or the content of "height" is too long, this bug will occur.
 
    
Whether it's text, images, or any "visible" element with width and height, their "too wide" and "too high" will cause this bug.
 
    
Any "Visible element" with the concept of width and height. The value of the "overflow" style in the default state is "Visible" (even if you have not set this style)

   
It is not difficult to see from the condition that the size of the image or text content exceeds the original size of the parent div, a bug is triggered.
Solution:

   

 
    
Set the css attribute "word-wrap: break-word" of the outer div to solve the problem.
 
    
Use "overflow: hidden.
 
    
It is to cut the text into multiple segments based on the width, and add a line break after each segment.

   
The preceding three methods have their own disadvantages. The first method causes secondary damage: the browser displays further inconsistencies. The second solution affects viewing the content. The third solution adds interaction. Functions of the following three schemes:

<Script type = "text/javascript"> // <! [CDATA [if (document. getElementById &&! Document. all) wordWarp4ff (6)/* value 6 varies according to width */function wordWarp4ff (intLen) {var obj = document. getElementById ("div1"); var strContent = obj. innerHTML; var strTemp = ""; while (strContent. length> intLen) {strTemp + = strContent. substr (0, intLen) + "; // separate each six characters with a space and add it to the temporary string strContent = strContent. substr (intLen, strContent. length);} strTemp + = "" + strContent; obj. innerHTML = strTemp;} //]> </script>

Vertical Scaling bug
Vertical Scaling bug solution: as long as we allow IE7 and FireFox to adapt to the height of content as in IE6. How can we make the container adaptive height in IE7 and FireFox? In fact, it is very simple. It is also an important improvement of IE7, using the "min-height" style. Although IE7 supports the "min-height/min-width" and "max-height/max-width" styles. However, IE6 does not know the styles starting with "min-" or "max-". Therefore, we also need to use a css hack to set a "height" for IE6 ", I only know IE6, And neither IE7 nor FireFox.


<Style> * {margin: 0; padding: 0 ;}# header {width: 600px;/* height: 50px; comment out the following two sentences and release this sentence, the bug */min-height: 50px is displayed in FireFox and IE7;/* sets only the minimum height to make IE7 and FireFox adaptive height */_ height: 50px; /* Only IE6 is used to recognize css hack, so that IE6 without min-height has good compatibility. */Background-color: red; margin: 0 auto;/* center display */} # body {width: 600px; margin: 0 auto; /* center display */background-color: blue;} # footer {width: 600px; margin: 0 auto; background-color: #666; clear: both;/* clear: both, let footer display in the new line. Many friends do not have a thorough understanding of clear. I will write an article to introduce this style in the future, if you are interested, you can follow my blog http://justinyoung.cnblogs.com */} </style> 


3. duplicate text bug in IE6


<! DOCTYPE html public "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 



The above code shows the situation in IE6 in IEtest. The following shows the situation in modern browsers. It is not difficult to see a duplicate word bug.
Bug conditions:


     

 
      
A container contains two sub-containers with the "float" style.
 
      
The width of the second container is greater than the width of the parent container, or the width of the parent container minus the width of the second container is less than 3. (Speaking of 3, here I would like to say a little more-IE7 also fixed a bug in IE6. The bug name is "3 pixel bug ")
 
      
There is a comment in front of the second container (this is why this bug is also called "IE6 comment bug ).

     
Ledi checked that the annotation bug cannot reproduce such a problem in ietest, and it remains to be verified.
Solution:


     

 
      
To change the structure, the [A container contains two sub-containers with the "float" style] structure does not appear.

 
      
Reduce the width of the second container and make the parent container width less than 3. For example, change the width of the second sub-container to 197px in this example.

 
      
Remove all comments.
-- Comment on this solution: the most direct practice, but "code without comments" is indeed not a good code writing habit.
 
      
Revise the comment writing method. Set <! -- Here is the comment content --> written as <! -- [If! IE]> here is the comment content <! [Endif] -->
-- Comment on this solution: a good solution, but not everyone is right <! -- [If! IE]> here is the comment content [endif] --> This annotation is very appreciated.
 
      
Add one or more <div style = "clear"> </div> behind the second container.
-- Comment on this solution: a solution that someone else feels uncomfortable. But it does. Affects webpage Efficiency

     
All of the above solutions are targeted changes to the conditions for the emergence of bugs. I personally think the last solution is better.
4. The IE6 div element is Always overwritten by the select element.
The article references another author's article, which provides a case of this situation.
<style type="text/css">#divUp{    z-index:99;    position:absolute;    background-color:red;    width:100;    height:18;    overflow:hidden;    height:60px;}#ddlTest{    width:200;    z-index:1;}</style><body><div id="divUp">aaaaaaa<br>bbbbbbb<br>ccccccc</div><br/><select id="ddlTest"><option>test0<option>test1<option>test2<option>test3</select>


In IE6 and modern browsers, select and div are different from upper and lower layers. We can see that in IE6, the select element will not be hidden under the div along with the z-index.
Solution:
Add an iframe to the top of the drop-down list, then let the div layer float above the iframe, and set the z-index value (the largest div), so that the div can "Overwrite" the drop-down list.



<Style type = "text/css"> body {font-size: small;} # zindexDiv {position: absolute; z-index: 50; width: expression (this. nextSibling. offsetWidth); height: expression (this. nextSibling. offsetHeight); top: expression (this. nextSibling. offsetTop); left: expression (this. nextSibling. offsetLeft);/* background-color: green; put this sentence out in ff, and you will understand the metaphor of Jingyi, Langu, and owner. */} # divUp {z-index: 99; position: absolute; background-color: red; width: 100; height: 18; overflow: hidden; height: 60px ;}# ddlTest {width: 200; z-index: 1 ;} </style> <body> <iframe id = "zindexDiv" frameborder = "0"> </iframe> <div id = "divUp"> aaaaaaa <br> bbbbbbb <br> ccccccc </div> <br/> <select id = "ddlTest"> <option> test0 <option> test1 <option> test2 <option> test3 </select> 

5. bug of replacing element and line spacing
This article first defines the replacement element. See the sample code:
<Style type = "text/css"> # lineheight_bug {line-height: 39px; font-size: 14px; background: url ('HTTP: // callback) no-repeat; padding: 0; padding-left: 20px; height: 435px; width: 530px; border: 1px solid red ;} </style> 
As you can see, an icon is added to the text, which causes the upward movement of all the text below, causing serious consequences. Cause of the bug: this bug occurs because IE6 mistakenly splits the upper and lower half spacing of the line of text with a replacement element, and the upper-half spacing of the adjacent upper and lower rows are merged. As a result, the text line spacing of the line with the replacement element is reduced by half, so the page is messy.

Solution:
Set margin-top and margin-bottom for those replacement elements. In order to "open" the row spacing that is "COMPRESSED ".
#lineheight_bug img{_margin:17px 0;_vertical-align: middle;}


6. float double margin bugThe condition caused by this bug is extremely simple, as long as float and margin values in the same direction as float are set for the block container elements.


<! DOCTYPE html public "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


It is not difficult to see the problem of the IE6 bilateral distance bug from the grid dial in the above page.
Solution:
1. You only need to set a "display: inline;" style for the container that generates the bug. The author analyzes in detail that using this method will not cause additional problems.

. Floatbox {float: left; width: 100px; height: 100px; background-color: deeppink; margin-top: 20px; margin-left: 100px; display: inline; /* set this style to eliminate the bug! */}
2.
Fix bugs with CSS hack
Write the margin-left statement again using the hack statement for IE6 only.
. Floatbox {float: left; width: 100px; height: 100px; background-color: deeppink; margin-top: 20px; margin-left: 100px; _ margin-left: 50px; /* CSS hack that applies only to IE6 and halved the value */}
7. For articles with hidden content, the IEtest of ledi has not been reproduced and will not be discussed here.


8. Edge chaos

<! DOCTYPE html public "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
Bug conditions:

          

 
           
Two block elements (# testDiv1 and # testDiv2)
 
           
The second block element (# testDiv2) has a negative value of margin-top.
 
           
Then place the two block elements in a large block element (# divInner)
 
           
Of course, to ensure that they all have visible border lines (otherwise you will not be able to see them)

          
Solution:

          

 
           
Set a position: relative for # divInner;
 
           
Set a position: relative for # testDiv2;
 
           
Set a negative top value for # testDiv2, for example, top:-1px;

          
The solution here is to adopt relative positioning instead of margin-top for positioning. Bypassing the problem is also a solution.






I want to know which browser and browser versions are compatible with the frontend.
Mainstream browsers in China: IE, sogou, and 360 (ranking by Baidu's domestic browsers)
IE must be compatible with IE6, 7, and 8, mainly due to IE6 problems.
Sogou is similar to 360, mainly in the fast mode.

Frontend compatibility with ie6
It must be considered .. It must be considered .. Some people use it ..