Browser compatibility problems and solutions, browser compatibility Solutions

Browser compatibility problems and solutions, browser compatibility Solutions

Browser compatibility problems refer to the situations where browsers developed by different vendors resolve different codes of the same paragraph, resulting in different page display effects. Many times, in order to pursue the display effect, front-end developers must apply corresponding methods to different compatibility issues to achieve consistent results.

The following are common problems encountered during the development process. Make a summary for easy reference.

1. <! Doctype html> statement of the Document Type: IE6 browser, when we do not write this document declaration, it will trigger the strange parsing phenomenon of IE6 browser; solution: Write the Document declaration. 2. horizontal double margin conditions: After the block elements in IE6 are floating (left floating left margin, right floating right margin), there will be a horizontal double margin phenomenon. Solution: Add "display: inline" to the style control of the float label, or add "right margin" to the left margin and "right margin" to the left margin. 3. The default line height is IE6 \ IE7 browser. The layout is affected when the text height exceeds the height set in the content area of the box model. Solution: Set overflow: hidden for the label that exceeds the height; or set the line-height of the text line to smaller than the height of the block. 4. In different browsers, many labels have different default styles, such as the default patch. Generation Condition: different browsers solution: Use the CSS reset file to clear the style, and then set it as needed. 5. img external border Generation Condition: img external has a label, that is, when the img label has a link, solution: Set the img border: 0; 6. Typical 3 pixel bug generation condition: in IE 6, the floating block element and the unfloating block element are in the same row, with the default 3px spacing. Solution: Set non-floating element floating. 7. png format: the IE 6 browser does not support transparency; solution: use JavaScript for processing; or use GIF or JPG images to replace png images. 8. Condition for generating the Row Height by default: When the row height is clear and floating, some people will adopt a clear and Floating Method, use an empty div, and then set {clear: both }. In most browsers, this is not a problem, but in IE6 browsers, div will have a default line height even if it is empty. Solution: set its height to 0 and overflow: hidden. {Height: 0; overflow: hidden; clear: both;} 9. Image spacing by default. Generation Condition: img Tag (Press enter after each tag) solution: set float layout for img. 10. label a hover is not applicable to all tags. in IE 6, hover only supports label a and does not support all other tags. solution: reasonably use the tag to nest other intra-Row labels or use JavaScript to simulate the hover effect of a. 11. The border-color attribute in the table tag is set to an invalid condition: the border-color attribute set by table in IE6 is invalid. Solution: Use CSS styles for control, instead of using attributes for style processing. 12. Transparent rgba and opacity conditions: IE6 does not support these two special settings. Solution: Use the filter in IE6 to replace the filter, for example, opacity: 0.6; filter: alpha (opacity = 60) 13. The sub-Selector cannot use the Generation Condition in IE6. in IE6 browser, use E> F sub-selector. solution: use another selector or descendant selector for control, such as div p {margin: 10px;} div p {margin: 0;} to replace div> p {margin: 10px ;} 14. The maximum and minimum width conditions are not supported: in IE 6, the minimum height and width of the label (min/max-height). Solution: Set hack separately for IE6, that is, _ height: minimum height value; _ width: Minimum width value (for IE6, when the actual width and height exceed the defined width, the element will automatically adjust the width and height ). No compatibility is required for the maximum height and maximum width. Currently, developers only need to ensure that IE6 is properly displayed. You don't have to spend too much effort on it.

. Target {min-height: 100px; height: auto! Important; height: 100px; // The content height in IE6 exceeds the automatically extended height}

15. Vertical center. IE6 does not support display: table-cell. In the IE 6 browser, set an element to center and align vertically in the other element, elements cannot be displayed in cells. Solution: for a single line of text, use line-height and height to center the text vertically, if there are other elements or multiple lines of text in the middle, other methods are used for center processing. 16. The color of the input focus box is different from that of the style. Different browsers have different performance. Solution: Use outline: none, after the default style is cleared, you can set 17 in a unified manner. The following conditions are available: IE6, cursor: hand: IE. But it is not supported in Firefox and does not work. Cursor: pointer: the annotation of CSS2.0. So Firefox is supported, but IE5.0 is not supported in earlier versions. IE6 is supported. Solution: set two cursor: pointer; cursor: hand.18. The height of the parent label cannot be extended. The parent label contains one or more child labels, parent tags are not set to float, but child tags are floating: solution: Method 1: add the settings for clearing the float at the end of the Child tag <div> 19. Conditions for generating li spacing issues: in IE 6, the li label is set to wide and high, and the elements in li are floating. Solution: Method 1: li does not set the width and height; Method 2: li internal labels are not floating. olInternal liThe serial number is 1, not increasing. Solution: Set the style for li display: list-item;20. The layout of element in the row is mixed with the production conditions: When an element in the row is a contained box, if the absolute positioning element contained in the box is located in percentages, the processing method is as follows: add {zoom: 1} to the element in the row to start haslayout of IE. 21. Multiple display of one word Generation Condition: Multiple floating elements are mixed with HTML comment statements, and the floating element width is set to 100%. The next line displays the last character of the previous line; solution: Delete the comment! 22. CSS priority! Important Generation Condition: IE6, in the same group of CSS attributes ,! Important does not work; processing method: set 23, img image bottom height excess 5px production conditions: IE6 browser; processing method: Convert the image into a block-level object, that is, display: block. There are four other methods. For details, see the log: the height of the img Image Element in IE6BUG exceeds, leading to extra space.

• Convert an image to a block-level object

That is, set img to "display: block ;".

• Set the vertical alignment of the image

That is, you can set the vertical-align attribute of the image to "top, text-top, bottom, text-bottom.

• Set the text size of the parent object to 0 PX.

That is, adding a line in the Code: "font-size: 0;" can solve the problem. But this also raises a new problem, and the text in the parent object cannot be displayed. Even if the text is enclosed in some quilt objects, the text size of the sub-object can still be displayed. However, when CSS verification is performed, an error is displayed, indicating that the text is too small.

• Changing the attributes of a parent object

If the width and height of the parent object are fixed and the image size varies with the parent object, you can set "overflow: hidden.

• Set floating attributes of images

In this example, add a line of CSS code: img {float: left ;}". This method is a good choice to achieve text-and-text mixing. 24. hack technology: hack is mainly used for IE browsers. If you want to adjust the styles of one or more browsers, we can use hack technology _ IE6 * IE6 IE7 + IE6 IE7 \ 9 IE6 IE7 IE8 IE9 IE10 \ 0 IE8 IE9 IE10 IE1125 and IE6 incompatible position: fixed implements position in IE6: fixed; position: fixed; cannot be used directly in IE6 ;. You need some CSS Hack to solve it. (Of course, IE6 is not just about position: fixed ;)

Set the <div id = "top">... </div> element to the bottom of the browser and 20 pixels to the right. The Code is as follows:

#top{    position:fixed;    _position:absolute;    bottom:0;    right:20px;    _bottom:auto;    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}

The right and left attributes can be solved by absolute positioning, while top and bottom must be implemented by using the above expression. The _ symbol in _ position: absolute; can only be identified by IE6 to distinguish other browsers.

The above is just an example. The following is the most important code snippet:

Fix the element to the top of the browser

# Top {_ position: absolute; _ bottom: auto; _ top: expression(eval(document.doc umentElement. scrollTop);}/* fix the element to the bottom of the browser */# top {_ position: absolute; _ bottom: auto; _ top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));}

These two pieces of code can only be implemented at the bottom and top. You can use _ margin-top: 10px; or _ margin-bottom: 10px; to modify the position of the numerical control element.

Position: fixed; flashing

The problem has not been completely solved yet. After using the above method, you will find that the fixed positioning elements will flash when rolling the scroll bar. To solve the flash problem, add the following content to the CSS file:

*html{    background-image:url(about:blank);    background-attachment:fixed;}

* Is identified for IE6.

26. IE6 7 8 does not support background-size

Compatible Syntax: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= '/image/xxx.jpg' , sizingMethod= 'scale' );27. IE6 7 z-index bug of its own level. Although 9999 is set, it does not work. Solution: Raise the parent level. 28. IE6 transparent and compatible processing:

.filter {　　/*background: #ce4138; */　　background: rgba(211, 66, 55, 0.93);　　filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#a3ce4138',endColorstr = '#eece4138' ); }

IE5-8 does not support opacity, solution:

.opacity{    opacity:0.4    filter:alpha(opacity=60);/* for IE5-7 */    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/* for IE 8*/}