1. lines of text are highly incompatible.
It is also the font-size: 14px text. The space occupied by different browsers is different. The actual space occupied by ie is 16px, and the space reserved by ie is 3px. The actual height occupied by ff is 17px, and the white space is 1px, leave the value below 3px, and it will be different in opera. In addition, when you set the font, there are usually several alternative types. For example, if you set the "" text font, you must set other fonts such as "" for backup, because many people may not have the font "" on their computers. In fact, the ling-height of different fonts is also different, so some people use Windows 7 and xp computers to see different pages (different fonts ).
Solution: Set line-height for text. Make sure that all text has the default line-height value.
2. Container deformation. Some browser containers are not easy to deform. For example, after the container in ff browser defines the height, the shape of the container border is determined and won't be enlarged by the content, in ie, the content will be extended, and the height limit will be invalid. If the float container has no defined width, the content in ff will be as wide as possible, and the content in ie will be folded first. Therefore, the width of a floating container with broken content needs to be defined. Generally, when padding, margin, and border are added to the original width and height, a slight carelessness will also lead to container deformation. Therefore, when writing a webpage, you cannot increase or decrease the length, width, and margin of each container. Instead, you must consider making modifications to each other.
3. double margin (double-margin bug ). In ie6, the actual effect of defining margin-left or margin-right for floating containers is twice that of the value. Solution: Define the display: inline for the floating container.
5. mirror margin bug. When a float element exists in the outer element, if the outer element defines margin-top: 14px, margin-bottom: 14px is automatically generated. Padding also has similar problems, all of which are special products under ie6. the appearance of such bugs is more complicated, far from being a condition of this kind of appearance, and it has not been systematically organized yet. Solution: Set border or float for the outer element.
Extended: ff and ie have different interpretations of the margin-bottom and padding-bottom of the container, which seems to be related to this.
6. swallowing. In ie6, there are two divs up and down, and the div above sets the background, but it is also found that the div with no background is set below also has the background, which is swallowed up. Corresponding to the above background swallowing phenomenon, there is also the phenomenon of scrolling down the border is missing. Solution: Use zoom: 1. This zoom is designed to solve the ie6 bug.
7. comment out the bug. Annotations can also generate bugs ~~~ "An extra pig ." This is the document used by our predecessors to summarize this bug. in ie6's bug, you will see two pig characters on the page, and the repeated internal capacity varies depending on the number of comments. Solution: Use "<! -[If! IE]> picRotate start <! [Endif]-> "method to write comments.
Sometimes js Code or code comments in css will also affect the content of the page. Solution: do not add comments or code externally, or add the browser comments to the comments.
<Script type = "text/javascript">
<--
Js Code
-->
</Script>
8. Check the img code:
<Div>
</Div>
Open the border of the div, and you will find that the bottom of the image is not close to the bottom of the container. It is caused by the blank characters (such as "Press ENTER" and "space") after img, these characters are considered as text nodes and parsed by the browser. To eliminate these characters, you must write them like this.
<Div>
</div>
The next two labels are important. This bug still exists in ie7.
Solution: Set display: block for img.
9. line-height loss
<Div style = "line-height: 20px"> text </div>: The line text line-height in ie6 disappears.
The reason is that the inline-block element is written together with the inline element. Solution: float the img and text.
Extended: You know that align of img has text-top, middle, and absmiddle. You can try to adjust img and text so that they can be consistent in ie and ff, you will not be satisfied with the call. Simply float the img and text, and adjust it with margin.
10. The clear layer should be used independently. You may put the clear attribute directly in the following content layer to save the code. The problem is that not only ff and op lose the margin effect, but some margin values in ie will also become invalid.
<Div style = "background: red; float: left;"> dd </div>
<Div style = "clear: both; margin-top: 18px; background: green"> ff </div>
11. overflow: hidden under ie is invalid for absolute layer position: absolute or relative layer position: relative. Solution: Add position: relative or position: absolute to overflow: hidden. In addition, ie6 supports the features of overflow-x or overflow-y, whereas ie7 and ff do not.
12. serious bug in ie6. If the float element does not define the width, if the div defines the height or zoom: 1, The div will fill the whole line, even if you give the width. If a float element is used as a layout or a complex container, it must be given a width.
13. for a bug in ie6, an absolutely positioned div contains a relatively positioned div. If a specific value is given to the height of the div relative to the inner layer, the inner layer will have a width value of 100%, the outer Absolute layer will be extended. The solution gives the internal layer the float attribute.
14. width: 100% this is very convenient to use in ie. It will search for the width value layer up, ignoring the influence of the floating layer. ff searches until the floating layer ends, you can only add width: 100% to all floating layers in the middle. Tired. Opera is a good tool for ie.
Bytes -----------------------------------------------------------------------------------------------------------------
The float bug of ie (ie6, ie7) bothers front-end engineers. The most common phenomenon is that the border is missing when the parent element of the floating element is dragging the scroll bar, the solution to this problem is to make the floating element layout.
In many cases, the width of the page needs to be scaled freely, but the width cannot be declared as a fixed value. However, we can set * height: 1%;, * which is important here, because * can only be parsed by ie7 and earlier versions, ie8 does not recognize such writing, so you can use this writing method to distinguish ie8 from other version versions of IE browsers. it is also a supplement to internet Internet Explorer.
Some common hack tests
* Html p {color: red;} supports IE6 and does not support FF IE7 IE8b.
* + Html p {color: red;} supports IE7 IE8b and does not support FF IE6
P {* color: red;} supports IE7 IE6 and does not support FF IE8b.
In IE8, the substring matching attribute selector (substring matching attribute selectors) is added in CSS3. The matching rules are similar to those in Regular Expressions:
E [att ^ = 'val'] // The substring starts with 'val'
E [att $ = 'val'] // The substring ends with 'val'
E [att * = 'val'] // The substring contains 'val'
IE8 supports the vast majority of basic CSS2.1 selectors, including but not limited to [: first-line] and [: first-letter].
For the generated content section in CSS2.1, that is, adding text content by using pseudo elements: before AND: after, IE8 does not support completely.
For opacity and RGBA supported in almost other browsers, IE8 still does not.
HACK originally used to distinguish IE is basically invalid in IE8 (for example, * property: value, * property: value, etc ).
The original list-item whitespace bug of IE still exists in IE8.
The original IE z-index bug still exists in IE8.
New bug in IE8: When line-heigth is smaller than normal, the excess parts will be dropped.
Display: table is still not supported in IE8.
In IE8, the border's transparent value is still not supported.
In IE8, @ import only supports layer-3 nesting.
Border's transparent in IE8 is not supported
New BUG in IE8: line-heigth BUG
/*/P {color: # 1e90ff}/*/Only hack for IE8, which can be an attribute or a class
Bytes ------------------------------------------------------------------------------------------
BUG description:
A DIV in the page uses position: relative, which is located with top =-25px and other elements. It works normally in FF and IE7, but in IE6, The DIV will scroll with the mouse.
Analysis:
This is a known BUG in IE6: when a position: relative element is contained by a block-level element with the overflow: auto/scroll attribute, it will show the behavior of postion: absolute.
Solution:
1. Add attributes for contained block elementsPosition: relative.
2. Remove the position: relative attribute of the element, use the default static location, and implement similar results through attributes such as margin-top.
----------------------------------------------------------------
The end of ie6 is approaching, which is undoubtedly a comforting news for our front-end developers. however, this last day is not approaching, so we are still striving for the final victory. We use various hack and methods to avoid a bunch of bugs such as bilateral distance, transparent background, and repeated texts under ie6. the following is reprinted from the front-end observation (translated from the http://www.sitepoint.com/) in the 10 bug fixing ie6 skills:
1. Use DOCTYPE
You should always use DOCTYPE for the header of each HTML file, and we recommend using the strict version, for example:
Or, for XHTML:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">The most tricky thing you need to deal with is that IE6 enters the quirks mode-it is strange enough.
2. Set position: relative
Setting an element as "position: relative" can solve many problems, especially when you encounter hidden or strange alignment boxes. Obviously, you need to be very careful, because the subnode that is absolutely located may be located again.
3. Set the floating element to display: inline.
Floating elements with the margin attribute may cause the famous IE6 double margin problem. For example, you specify the margin-left as 5px for an element, but IE6 actually shows 10 PX ." Display: inline will solve this problem, although this is not necessary, your CSS is still valid.
4. Set an element to hasLayout.
Many rendering problems of IE6 (and IE7) can be solved by setting hasLayout of elements. This is an internal IE attribute (IE hidden. For more information about haslayout, see here) to determine how the content is laid out and located relative to other elements. If you need to set an inline element (such as a link) as a block element or apply transparent effects, setting hasLayout may also be required.
The simplest way to set hasLayout is to set a height or width for CSS (zoom can also be used, but zoom is not part of the CSS standard ). We recommend setting the actual size, but the problem is that this is unrealistic. You may need to use "height: 1% ". If no height is set for the parent element, the actual height of the element is not affected, and hasLayout is enabled at this time.
5. Fixed the duplicate text bug.
Complex la s can trigger the final characters of floating elements, which may occur in the bug of clearing elements. There are several solutions, some of which are perfect, but it is also necessary to do some repeated tests:
. Make sure that all elements use "display: inline ;"
. Use a "margin-right:-3px;" on the last element ;"
. Use a condition annotation for the last entry of the floating element, for example:
. Use an empty div in the last element of the container (it is also necessary to set the width to 90% or similar width.
>>>>>> You can also access positioniseverything.net to view the complete introduction to this problem.
6. Only the <a> label is used on the clickable and hover elements.
IE6 only recognizes the CSS hover effect on the a tag.
You can also use JavaScript-based components to control them so that they can maintain the operability of the keyboard. There are some alternative options, but <a> labels are more reliable than other solutions.
7. Use! Important or advanced selector to distinguish IE6
Writing feasible code especially for IE6 is still possible without the traditional Hack or conditional CSS in extra files. For example, the minimum height can be defined using this Code:
IE6 does not understand min-height and uses 20em to overwrite the "auto" height. However, if the content requires more space, it will automatically increase the height.
Another optional method is to use an advanced selector, such as e.g.
8. Avoid percentage units
The percentage will confuse IE. Unless you can precisely control the size of each parent element, it is possible to achieve the best prevention. You can go through! Important continues to use the percentage in other browsers, for example:
9. Early testing and continuous testing
Do not test IE6 until your website or application is complete. In this case, the problem may be worse and it will take more time to fix it. If your website can run normally in Firefox and IE6, there will be no problem in other browsers.
10. refactor your code
It often takes longer to fix bugs than to consider a new layout issue. Small changes to HTML and some simple CSS are often more effective. This may mean you have to discard the perfect code, but there will be fewer long-term problems and you will be very clear about how to deal with these problems in the future.
1. lines of text are highly incompatible.
It is also the font-size: 14px text. The space occupied by different browsers is different. The actual space occupied by ie is 16px, and the space reserved by ie is 3px. The actual height occupied by ff is 17px, and the white space is 1px, leave the value below 3px, and it will be different in opera. In addition, when you set the font, there are usually several alternative types. For example, if you set the "" text font, you must set other fonts such as "" for backup, because many people may not have the font "" on their computers. In fact, the ling-height of different fonts is also different, so some people use Windows 7 and xp computers to see different pages (different fonts ).
Solution: Set line-height for text. Make sure that all text has the default line-height value.
2. Container deformation. Some browser containers are not easy to deform. For example, after the container in ff browser defines the height, the shape of the container border is determined and won't be enlarged by the content, in ie, the content will be extended, and the height limit will be invalid. If the float container has no defined width, the content in ff will be as wide as possible, and the content in ie will be folded first. Therefore, the width of a floating container with broken content needs to be defined. Generally, when padding, margin, and border are added to the original width and height, a slight carelessness will also lead to container deformation. Therefore, when writing a webpage, you cannot increase or decrease the length, width, and margin of each container. Instead, you must consider making modifications to each other.
3. double margin (double-margin bug ). In ie6, the actual effect of defining margin-left or margin-right for floating containers is twice that of the value. Solution: Define the display: inline for the floating container.
5. mirror margin bug. When a float element exists in the outer element, if the outer element defines margin-top: 14px, margin-bottom: 14px is automatically generated. Padding also has similar problems, all of which are special products under ie6. the appearance of such bugs is more complicated, far from being a condition of this kind of appearance, and it has not been systematically organized yet. Solution: Set border or float for the outer element.
Extended: ff and ie have different interpretations of the margin-bottom and padding-bottom of the container, which seems to be related to this.
6. swallowing. In ie6, there are two divs up and down, and the div above sets the background, but it is also found that the div with no background is set below also has the background, which is swallowed up. Corresponding to the above background swallowing phenomenon, there is also the phenomenon of scrolling down the border is missing. Solution: Use zoom: 1. This zoom is designed to solve the ie6 bug.
7. comment out the bug. Annotations can also generate bugs ~~~ "An extra pig ." This is the document used by our predecessors to summarize this bug. in ie6's bug, you will see two pig characters on the page, and the repeated internal capacity varies depending on the number of comments. Solution: Use "<! -[If! IE]> picRotate start <! [Endif]-> "method to write comments.
Sometimes js Code or code comments in css will also affect the content of the page. Solution: do not add comments or code externally, or add the browser comments to the comments.
<Script type = "text/javascript">
<--
Js Code
-->
</Script>
8. Check the img code:
<Div>
</Div>
Open the border of the div, and you will find that the bottom of the image is not close to the bottom of the container. It is caused by the blank characters (such as "Press ENTER" and "space") after img, these characters are considered as text nodes and parsed by the browser. To eliminate these characters, you must write them like this.
<Div>
</div>
The next two labels are important. This bug still exists in ie7.
Solution: Set display: block for img.
9. line-height loss
<Div style = "line-height: 20px"> text </div>: The line text line-height in ie6 disappears.
The reason is that the inline-block element is written together with the inline element. Solution: float the img and text.
Extended: You know that align of img has text-top, middle, and absmiddle. You can try to adjust img and text so that they can be consistent in ie and ff, you will not be satisfied with the call. Simply float the img and text, and adjust it with margin.
10. The clear layer should be used independently. You may put the clear attribute directly in the following content layer to save the code. The problem is that not only ff and op lose the margin effect, but some margin values in ie will also become invalid.
<Div style = "background: red; float: left;"> dd </div>
<Div style = "clear: both; margin-top: 18px; background: green"> ff </div>
11. overflow: hidden under ie is invalid for absolute layer position: absolute or relative layer position: relative. Solution: Add position: relative or position: absolute to overflow: hidden. In addition, ie6 supports the features of overflow-x or overflow-y, whereas ie7 and ff do not.
12. serious bug in ie6. If the float element does not define the width, if the div defines the height or zoom: 1, The div will fill the whole line, even if you give the width. If a float element is used as a layout or a complex container, it must be given a width.
13. for a bug in ie6, an absolutely positioned div contains a relatively positioned div. If a specific value is given to the height of the div relative to the inner layer, the inner layer will have a width value of 100%, the outer Absolute layer will be extended. The solution gives the internal layer the float attribute.
14. width: 100% this is very convenient to use in ie. It will search for the width value layer up, ignoring the influence of the floating layer. ff searches until the floating layer ends, you can only add width: 100% to all floating layers in the middle. Tired. Opera is a good tool for ie.
Bytes -----------------------------------------------------------------------------------------------------------------
The float bug of ie (ie6, ie7) bothers front-end engineers. The most common phenomenon is that the border is missing when the parent element of the floating element is dragging the scroll bar, the solution to this problem is to make the floating element layout.
In many cases, the width of the page needs to be scaled freely, but the width cannot be declared as a fixed value. However, we can set * height: 1%;, * which is important here, because * can only be parsed by ie7 and earlier versions, ie8 does not recognize such writing, so you can use this writing method to distinguish ie8 from other version versions of IE browsers. it is also a supplement to internet Internet Explorer.
Some common hack tests
* Html p {color: red;} supports IE6 and does not support FF IE7 IE8b.
* + Html p {color: red;} supports IE7 IE8b and does not support FF IE6
P {* color: red;} supports IE7 IE6 and does not support FF IE8b.
In IE8, the substring matching attribute selector (substring matching attribute selectors) is added in CSS3. The matching rules are similar to those in Regular Expressions:
E [att ^ = 'val'] // The substring starts with 'val'
E [att $ = 'val'] // The substring ends with 'val'
E [att * = 'val'] // The substring contains 'val'
IE8 supports the vast majority of basic CSS2.1 selectors, including but not limited to [: first-line] and [: first-letter].
For the generated content section in CSS2.1, that is, adding text content by using pseudo elements: before AND: after, IE8 does not support completely.
For opacity and RGBA supported in almost other browsers, IE8 still does not.
HACK originally used to distinguish IE is basically invalid in IE8 (for example, * property: value, * property: value, etc ).
The original list-item whitespace bug of IE still exists in IE8.
The original IE z-index bug still exists in IE8.
New bug in IE8: When line-heigth is smaller than normal, the excess parts will be dropped.
Display: table is still not supported in IE8.
In IE8, the border's transparent value is still not supported.
In IE8, @ import only supports layer-3 nesting.
Border's transparent in IE8 is not supported
New BUG in IE8: line-heigth BUG
/*/P {color: # 1e90ff}/*/Only hack for IE8, which can be an attribute or a class
Bytes ------------------------------------------------------------------------------------------
BUG description:
A DIV in the page uses position: relative, which is located with top =-25px and other elements. It works normally in FF and IE7, but in IE6, The DIV will scroll with the mouse.
Analysis:
This is a known BUG in IE6: when a position: relative element is contained by a block-level element with the overflow: auto/scroll attribute, it will show the behavior of postion: absolute.
Solution:
1. Add attributes for contained block elementsPosition: relative.
2. Remove the position: relative attribute of the element, use the default static location, and implement similar results through attributes such as margin-top.
----------------------------------------------------------------
The end of ie6 is approaching, which is undoubtedly a comforting news for our front-end developers. however, this last day is not approaching, so we are still striving for the final victory. We use various hack and methods to avoid a bunch of bugs such as bilateral distance, transparent background, and repeated texts under ie6. the following is reprinted from the front-end observation (translated from the http://www.sitepoint.com/) in the 10 bug fixing ie6 skills:
1. Use DOCTYPE
You should always use DOCTYPE for the header of each HTML file, and we recommend using the strict version, for example:
Or, for XHTML:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">The most tricky thing you need to deal with is that IE6 enters the quirks mode-it is strange enough.
2. Set position: relative
Setting an element as "position: relative" can solve many problems, especially when you encounter hidden or strange alignment boxes. Obviously, you need to be very careful, because the subnode that is absolutely located may be located again.
3. Set the floating element to display: inline.
Floating elements with the margin attribute may cause the famous IE6 double margin problem. For example, you specify the margin-left as 5px for an element, but IE6 actually shows 10 PX ." Display: inline will solve this problem, although this is not necessary, your CSS is still valid.
4. Set an element to hasLayout.
Many rendering problems of IE6 (and IE7) can be solved by setting hasLayout of elements. This is an internal IE attribute (IE hidden. For more information about haslayout, see here) to determine how the content is laid out and located relative to other elements. If you need to set an inline element (such as a link) as a block element or apply transparent effects, setting hasLayout may also be required.
The simplest way to set hasLayout is to set a height or width for CSS (zoom can also be used, but zoom is not part of the CSS standard ). We recommend setting the actual size, but the problem is that this is unrealistic. You may need to use "height: 1% ". If no height is set for the parent element, the actual height of the element is not affected, and hasLayout is enabled at this time.
5. Fixed the duplicate text bug.
Complex la s can trigger the final characters of floating elements, which may occur in the bug of clearing elements. There are several solutions, some of which are perfect, but it is also necessary to do some repeated tests:
. Make sure that all elements use "display: inline ;"
. Use a "margin-right:-3px;" on the last element ;"
. Use a condition annotation for the last entry of the floating element, for example:
. Use an empty div in the last element of the container (it is also necessary to set the width to 90% or similar width.
>>>>>> You can also access positioniseverything.net to view the complete introduction to this problem.
6. Only the <a> label is used on the clickable and hover elements.
IE6 only recognizes the CSS hover effect on the a tag.
You can also use JavaScript-based components to control them so that they can maintain the operability of the keyboard. There are some alternative options, but <a> labels are more reliable than other solutions.
7. Use! Important or advanced selector to distinguish IE6
Writing feasible code especially for IE6 is still possible without the traditional Hack or conditional CSS in extra files. For example, the minimum height can be defined using this Code:
IE6 does not understand min-height and uses 20em to overwrite the "auto" height. However, if the content requires more space, it will automatically increase the height.
Another optional method is to use an advanced selector, such as e.g.
8. Avoid percentage units
The percentage will confuse IE. Unless you can precisely control the size of each parent element, it is possible to achieve the best prevention. You can go through! Important continues to use the percentage in other browsers, for example:
9. Early testing and continuous testing
Do not test IE6 until your website or application is complete. In this case, the problem may be worse and it will take more time to fix it. If your website can run normally in Firefox and IE6, there will be no problem in other browsers.
10. refactor your code
It often takes longer to fix bugs than to consider a new layout issue. Small changes to HTML and some simple CSS are often more effective. This may mean you have to discard the perfect code, but there will be fewer long-term problems and you will be very clear about how to deal with these problems in the future.
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
