[Reprinted] CSS compatibility issues in various browsers. Reprinted css compatibility
CSS compatibility with browsers is sometimes a headache. Maybe when you understand the skills and principles, you will feel that it is not difficult to collect IE7 from the Internet, 6. Solve the problem of compatibility with Fireofx and sort it out. for Web, try to write code in xhtml format, and DOCTYPE affects CSS processing. As the W3C standard, DOCTYPE must be well known.
CSS skills
1. vertical-align: middle of the div vertical center problem; Increase the line spacing to the line-height: 200px as high as the entire DIV; then insert the text, and the vertical center is formed. The disadvantage is that you need to control the content rather than line feed.
2. The problem of margin doubling is that the margin set for div of float under ie will be doubled. This is a bug in ie6. The solution is to add display: inline to the div. For example, <# div id = "imfloat"> the corresponding css is # IamFloat {float: left; margin: 5px; /* IE: 10px */display: inline;/* IE: 5px */}
3. double distance produced by floating ie # box {float: left; width: 100px; margin: 0 0 0 100px; // in this case, IE will generate a PX distance display: inline; // ignore floating} Here I will elaborate on the two elements block and inline: The block element is always starting on a new line, with the height, width, and Row Height, margins can be controlled (block elements). The Inline element is not controllable on the same line as other elements (embedded elements); # box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: table;
4 IE and width and height problems IE does not recognize min-, but in fact it treats normal width and height as min. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only min-width and min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is important. To solve this problem, you can: # box {width: 80px; height: 35px;} html> body # box {width: auto; height: auto; min-width: 80px; min-height: 35px ;}
5. The min-width of the page is a very convenient CSS command, which can specify the minimum or no less than a certain width of the element, so as to ensure that the layout is always correct. But IE does not recognize this, but it actually uses width as the minimum width. To make this command usable on IE, you can place <div> under the <body> label and specify a class for div. Then, CSS is designed as follows: # container {min-width: 600px; width: expression (document. body. clientWidth <600? "600px": "auto");} The first min-width is normal, but the width of row 2nd uses Javascript, which is recognized only by IE, this will also make your HTML documents less formal. It actually achieves the minimum width through Javascript judgment.
6. DIV floating IE text generates a 3-pixel bug. The left object float is located on the right side using the left margin of the outer patch. The text in the right object is 3 px away from the left. # box {float: left; width: 800px; }# left {float: left; width: 50% ;}# right {width: 50% ;} * html # left {margin-right:-3px; // This sentence is critical} <div id = "box"> <div id = "left"> </div> <div id = "right"> </div> </div>
7. Internet Explorer: When the div application is complicated, there are some links in each column. When DIV and so on, it is prone to the "hide and seek" issue. Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.
8. float div closure; clear floating; adaptive height;
① For example, <# div id = "floatA"> <# div id = "floatB"> <# div id = "NOTfloatC"> the NOTfloatC here does not want to continue translation, instead, we want to move it down. (The attributes of floatA and floatB have been set to float: left;) This code has no problem in IE, and the problem lies in FF. The reason is that NOTfloatC is not a float label and must be closed. Add <# div class = "floatB"> <# div class = "NOTfloatC"> <# div class = "clear"> the position of the div, it must be at the same level as the two div with the float attribute. No nested relationship exists between them; otherwise, an exception occurs. And define the clear style as follows:. clear {clear: both ;}
② Do not set the height of the external wrapper div. In order to make the height automatically adapt, overflow: hidden should be added to the wrapper; when the box containing float is included, the height auto-fit is invalid in IE. In this case, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility. For example, a wrapper is defined as follows:. colwrapper {overflow: hidden; zoom: 1; margin: 5px auto ;}
③ For typographical layout, the most commonly used css description may be float: left. sometimes we need to make a unified background behind the float div in the n column, for example: <div id = "page"> <div id = "left"> </div> <div id = "center"> </div> <div id = "right"> </div> for example, we want to set the background of the page to blue, the background color of all three columns is blue, but we will find that with the left center right extending down, and the page actually keeps the height unchanged, the problem is that, the reason is that the page is not a float attribute, and because the page is centered, it cannot be set to float, therefore, we should solve <div id = "page"> <div id = "bg" style = "float: left; width: 100% "> <div id =" left "> </div> <div id =" center "> </div> <div id =" right "> </div> </div> </div> embed a float left and the DIV with a width of 100%.
④ Universal float closure (very important !) For details about the principle of clear float, see [How To Clear Floats Without Structural Markup]. Add the following code To Global CSS and add class = "clearfix" To the div To be closed. /* Clear Fix */. clearfix: after {content :". "; display: block; height: 0; clear: both; visibility: hidden ;}. clearfix {display: inline-block;}/* Hide from IE Mac */. clearfix {display: block;}/* End hide from IE Mac * // * end of clearfix */or set as follows :. hackbox {display: table; // display an object as a table at the block element level}
11. The height is not adaptive. When the height of the inner object changes, the outer height cannot be adjusted automatically, especially when the inner object uses margin or paddign. Example: # box {}# box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;} <div id = "box"> <p> content in the p object </p> </div> solution: add two empty div object CSS codes to the upper and lower sides of the P object :. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV.
12. in IE6, there are many ways to solve this BUG due to gaps in the image. You can change the html layout or set img to display: block or set the vertical-align attribute to vertical-align: top | bottom | middle | text-bottom.
13. How to align text and text input boxes with vertical-align: middle; <style type = "text/css"> <! -- Input {width: 200px; height: 30px; border: 1px solid red; vertical-align: middle ;}--> </style>
14. what is the difference between id and class defined in web standards? 1. duplicate IDs are not allowed in web standards. For example, div ID = "aa" cannot be repeated twice, while class defines classes, which can be infinitely repeated in theory, in this way, you can use the definition that requires multiple references. II. attribute priority question ID has a higher priority than class. See example 3 above. convenience for JS and other client scripts. If you want to perform script operations on an object on the page, you can define an ID for it. Otherwise, you can only find it by traversing the page element and adding specific attributes, this is a relatively time-consuming resource, which is far less simple than an ID.
15. How to display the content in LI with ellipsis after the content length is exceeded. This method is applicable to IE and opbrowser <style type = "text/css"> <! -- Li {width: 200px; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden;} --> </style>
16. Why can't I set the color of the scroll bar for IE in web standards? The solution is to change the body to html <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <style type =" text/css "> <! -- Html {scrollbar-face-color: # f6f6f6; scrollbar-highlight-color: # fff; scrollbar-shadow-color: # eeeeee; scrollbar-3dlight-color: # eeeeee; scrollbar-arrow-color: #000; scrollbar-track-color: # fff; scrollbar-darkshadow-color: # fff ;}--> </style>
17. why can't I define the container IE6 with a height of 1 px? This problem is caused by the high row size by default. There are also many solutions, such as overflow: hidden | zoom: 0.08 | line-height: 1px
18. How can I display layers on FLASH? The solution is to set transparency for FLASH. <param name = "wmode" value = "transparent"/>
19. how to center a layer vertically in the browser. Here we use the absolute percentage position, which is negative from the external patch, the size of the negative value is its own width and height divided by two <style type = "text/css"> <! -- Div {position: absolute; top: 50%; lef: 50%; margin:-100px 0 0-100px; width: 200px; height: 200px; border: 1px solid red ;} --> </style>
FF and IE
1. div center problem div set margin-left, margin-right is already centered when it is set to auto, IE is not, IE needs to set the body to center, first define text-algin: center in the parent element; this means that the content in the parent element is centered.
2. Add a border and a background color to the border of the Link (tag a). Set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.
3. the hover style does not occur after the hyperlink is accessed. The accessed hyperlink style does not have hover and active. Many people should have encountered this problem, the solution is to change the order of CSS properties: L-V-H-A Code: <style type = "text/css"> <! -- A: link {} a: visited {} a: hover {} a: active {} --> </style>
4. cursor: pointer can display the cursor finger in ie ff at the same time. hand can only be IE
5. UL's padding and margin ul tags have padding values by default in FF, while in IE, only margin has default values. Therefore, ul {margin: 0; padding: is defined first: 0;} solves most problems
6. in IE, the FORM label will automatically margin some margin, while in FF, the margin is 0. Therefore, if you want to display consistent, so it is best to specify margin and padding in css. For the above two problems, I usually use this style ul first in css, form {margin: 0; padding: 0 ;} definition is dead, so it won't be a headache.
7. Inconsistency of BOX Model interpretation the BOX model interpretation in FF and IE is inconsistent, resulting in a 2px difference solution: div {margin: 30px! Important; margin: 28px;} note that the order of the two margin must not be reversed. The attribute IE of important cannot be identified, but can be recognized by other browsers. Therefore, in IE, it is actually interpreted as follows: If div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: xx px! Important; # box {width: 600px; // for ie6.0-w \ idth: 500px; // for ff + ie6.0} # box {width: 600px! Important // for ff width: 600px; // for ff + ie6.0 width/**/: 500px; // for ie6.0 -}
8. attribute selector (this is not compatible, it is a bug for hiding css) p [id] {} div [id] {} is hidden for versions earlier than IE6.0 and IE6.0, FF and OPera functions. there is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in p [id, all p tags have IDs in the same style.
9. The most cruel means -! Important; if there is no way to solve some details, you can use this method. FF "! Important will automatically give priority to resolution. However, IE will ignore. tabd1 {background: url (/res/images/up/tab1.gif) no-repeat 0px 0px! Important;/* Style for FF */background: url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} It is worth noting that the xxxx! Important is placed on the other sentence, which has been mentioned above
10. the default values of IE and FF may be a problem you have been complaining about why you want to write different CSS for IE and FF. Why is it a headache for IE and then write css, while cursing that nasty M $ IE. in fact, for the standard support of css, IE is not as bad as we think. The key is that the default values of IE and FF are different. I have mastered this technique, you will find that writing css compatible with FF and IE is not that difficult. You may not need to write simple css "! Important. We all know that when a browser displays a webpage, it will decide how to display it based on the css style sheet of the webpage. However, we may not describe all the elements in the style sheet, of course, there is no need to do this, so for those attributes that are not described, the browser will use the built-in default mode for display, such as text, if you do not specify the color in css, the browser uses black or system color to display the background of the div or other elements. If it is not specified in css, the browser sets it to white or transparent, and so on. Therefore, the root cause of the difference between FF and IE display is that the default display is different, how to display the default style? I know there are no corresponding standards in w3 to define, so don't blame IE for this.
11. why can't I fix the fixed height of the containers in the standard browser that cannot support containers under FF text? I want to fix the height of the containers as in IE6, how can I set it to be supported? The method is to remove the min-height: 200px setting for height. Here, we can define {height: auto to take care of IE6 that does not know min-height! Important; height: 200px; min-height: 200px ;}
12. in FireFox, we know that we can use word-wrap: break-word directly in IE to enable automatic line feed of continuous long fields. In FF, we use JS insert & #10; <style type = "text/css"> <! -- Div {width: 300px; word-wrap: break-word; border: 1px solid red ;} --> </style> <div id = "ff"> partition </div> <scr partition pt type = "text/partition Cr partition pt">/* <! [CDATA [*/function toBreakWord (el, intLen) {var returns bj = document. getElementById (el); var strContent = obj. innerHTML; var strTemp = ""; while (strContent. length> intLen) {strTemp + = strContent. substr (0, intLen) + "& #10;"; strContent = strContent. substr (intLen, strContent. length);} strTemp + = "& #10;" + strContent; obj. innerHTML = strTemp;} if (document. getElementById &&! Document. all) toBreakWord ("ff", 37);/*]> */</scr limit pt>
13. Why is the container width and FF interpretation different under IE6 <? Xml version = "1.0" encoding = "gb2312"?> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <style type =" text/css "> <! -- Div {cursor: pointer; width: 200px; height: 200px; border: 10px solid red} --> </style> <div cursor nclick = "alert (this. offsetWidth) "> the difference between FireFox and IE compatibility </div> is whether the overall width of the container includes the width of the border (border). Here IE6 is interpreted as 200PX, FF is interpreted as 220PX. How did it cause the problem? If you remove the xml at the top of the container, you will find that the original problem exists. The declaration at the top triggers the qurks mode of IE. For more information about qurks mode and standards mode, see http: // www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx? Mfr = true
IE6, IE7, and FF IE7.0 are coming out, and there are new problems with CSS support. When there are more browsers and the webpage compatibility is worse, we are still exhausted. To solve the problem of IE7.0 compatibility, I found the following article: I am using most of them now! Important comes to hack. It can be displayed normally for ie6 and firefox tests, but ie7 is correct! Important can be correctly explained, and the page will not be displayed as required! The following shows the compatibility of the three browsers.
First, it is the css hack method height: 20px;/* For Firefox */* height: 25px;/* For IE7 & IE6 */_ height: 20px; /* For IE6 */pay attention to the sequence. This also belongs to css hack, but it is not as concise as above. # Example {color: #333;}/* Moz */* html # example {color: #666;}/* IE6 */* + html # example {color: #999;}/* IE7 */
<! -- Other browsers --> <link rel = "stylesheet" type = "text/css" href = "css.css"/> <! -- [If IE 7]> <! -- Suitable for IE7 --> <link rel = "stylesheet" type = "text/css" href = "ie7.css"/> <! [Endif] --> <! -- [If lte IE 6]> <! -- Suitable for IE6 and later --> <link rel = "stylesheet" type = "text/css" href = "ie.css"/> <! [Endif] -->
Third, the css filter method, which is translated from a foreign website as a classic .. Create a css style as follows: # item {width: 200px; height: 200px; background: red;} create a div and use the css style defined earlier: <div id = "item"> some text here </div> adds the lang attribute in the body representation. The Chinese character is zh: <body lang = "en"> now define another style for the div element: *: lang (en) # item {background: green! Important! Important overwrites the original css style. Because the lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect in ie6.0, unfortunately, safari does not support this attribute, so you need to add the following css style: # item: empty {background: green! Important}: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will be available in browsers other than ie versions. For compatibility with IE6 and FF, consider the previous! Important is preferred
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
