Home > Developer > Web Develop
CSS compatibility with browsers sometimes makes people very headache, perhaps when you understand the techniques and principles, you will feel is not difficult, from the online collection of ie7,6 and FIREOFX compatibility treatment method and collated. For web2.0, try to write code in XHTML format, And doctype affect the CSS processing, as the standard, must add DOCTYPE fame.
CSS Tips
1.div vertical centering problem vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line
2. Margin doubling question the div set to float will double the margin set in IE. This is a bug that exists in a IE6. The solution is to add display:inline to this div; For example: < #div id= "imfloat" > corresponding CSS for #IamFloat {float:left; Margin:5px;/*ie understood as 10px*/Display:inline;/*ie under the understanding of 5px*/}
3. The double distance generated by the floating IE #box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore} Here's a look at block and inline two elements: The block element is characterized by the ability to always start on new lines, height, width, row height, and margin control (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements; #box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;
4 ie with width and height problems ie does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height. For example, to set the background image, this width is more 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 minimum width of the page min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order for this command to work on IE, you can put a <div> into the <body> tab, then assign a class to the Div, and then design the CSS like this: #container {min-width:600px; width:expres Sion (Document.body.clientWidth < 600?) "600px": "Auto");} The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.
6.DIV floating IE text generated 3 pixels of the bug left object floating, the right side of the outer patch to the left margin to locate, the right object within the text will be left with 3px spacing. #box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is key} <div id= "box" > <div id= "left" ></div> <div id= "right" & Gt;</div> </div>
7.IE hide and seek problem when the div application is complicated, there are some links in each column, and the div is prone to hide-and-seek problems. Some content does not show up when the mouse selects this area is found content is indeed on the page. WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
8.float Div closed; clear floating; self-adapting height;
① such as:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > The NOTFLOATC here do not want to continue panning, but want to go down. (where the properties of Floata and FLOATB have been set to float:left;) This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In < #div class= "FLOATB" > < #div class= "NOTFLOATC" > Add < #div class= "clear" > this div must pay attention to the position, And there must be no nested relationship with the two Div siblings with the float attribute, otherwise an exception will occur. And the clear style is defined as follows:. clear{Clear:both;}
② as an external wrapper div do not set dead height, in order to let the height can automatically adapt to the wrapper inside add Overflow:hidden; When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved. For example a certain wrapper is defined as follows:. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}
③ for typography, the CSS description we use most probably is float:left. Sometimes we need to do a unified background behind the float div in the n column, such as: <div id= "page" > <div id= "left" ></div> <div id= "center" ></div> <div id= " Right "></div> </div> For example, we're going to set the page's background to blue so that the background color of all three columns is blue, But we will find that as the left center is stretched downward, and the page actually saves the height unchanged, the problem is because the page is not a float property, and our page is centered and cannot be set to float, so we should resolve this <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 width is 100% of the div solution
④ Universal Float closed (very important!) the principle of clear float can be found in [how to clear floats without Structural Markup], add the following code to the global CSS, the need to close the DIV plus C Lass= "Clearfix" can be tried . /* 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 This setting:. hackbox{D isplay:table; Display the object as a block-element-level table}
11. Height is not suitable for height adaptation is when the height of the inner object changes when the outer height cannot be automatically adjusted, especially when the inner Layer object uses margin or paddign. Example: #box {background-color: #eee;} #box p {margin-top:20px;margin-bottom:20px; text-align:center;} <div id= the contents of the "box" > <p>p objects </p> </div> Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflo W:hidden;} Or add the border attribute to the Div.
12. IE6 why there are gaps in the picture there are many ways to fix this bug, either by changing the layout of the HTML, or by setting the IMG to Display:block or setting the Vertical-align property to Vertical-align:top | Bottom |middle |text-bottom can be solved.
13. How to add Vertical-align:middle to text input box; <style type= "Text/css" > <!--input {width:200px; height:30px; border:1px solid red; Vertical-align:middle; -</style>
What is the difference between the definition ID and class in the 14.web standard? One, the Web standard is not allowed to duplicate ID, such as div id= "AA" is not allowed to repeat 2 times, and the class is defined by classes, in theory can be infinitely repeated, so that the definition of multiple references can be used. Two. The priority problem ID of the attribute is higher than class, see example three above. Convenient JS and other client script, if you want to script an object in the page, then you can define an ID, otherwise it can only be used to traverse the page element plus specify a specific attribute to find it, This is a relatively waste of time resources, far less than a simple ID.
The method for displaying the contents of an ellipsis after the length of the Li in this method is applicable with IE and op browser <style type= "Text/css" > <!--li {width:200px; White-space:nowrap; Text-overflow:ellipsis; -o-text-overflow:ellipsis; Overflow:hidden; -</style>
16. Why IE cannot set the scrollbar color in web standards The solution is to replace body with 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 a container of around 1px height IE6 This problem is due to the default row height, and there are many workarounds, such as: Overflow:hidden | zoom:0.08 | line-height:1px
18. How can I make the layer appear above flash? The solution is to set the flash to transparent <param name= "wmode" value= "Transparent"/>
19. How to make a layer vertically centered in the browser here we use the percent absolute positioning, with the method of negative value of the outer patch, the size of negative value for its own width height divided by two <style type= "Text/css" > <!--div {POSITION:ABSO lute 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 for Auto is already centered, ie does not, ie need to set the body center, first in the parent element definition text-algin:center; This means the content within the parent element Center.
2. The border of the link (A-label) and the background a link with the border and back color, you need to set Display:block, and set the Float:left guarantee does not break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.
3. Hover style does not appear after hyperlink access the hyperlink style that has been clicked is not hover and active, many people should have encountered this problem, the workaround 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 Cursor:pointer can display cursor finger in IE FF at the same time, hand only IE can
5.UL padding and margin ul label in FF default is padding value, and in IE only margin default has value, so first define ul{margin:0;padding:0;} Will solve most of the problems.
6. Form label this label in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistency, so it is best to specify the margin and padding in the CSS, for the above two problems, In my CSS, I usually use this style first ul,form{margin:0;padding:0;} The definition died, so the back will not be a headache for this.
7. Box model explanation inconsistency problem in FF and IE the box model interpretation inconsistent result in 2px solution: div{margin:30px!important;margin:28px; Note that the order of the two margin must not be written in reverse, Important This property IE is not recognized, but other browsers can recognize it. So in the IE is actually interpreted as such: div {maring:30px;margin:28px} repeated definition, according to the last one to execute, so can not 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 f f+ie6.0 width/**/:500px; For ie6.0-}
8. Attribute selector (this is not compatible, is a bug to hide the CSS) p[id]{}div[id]{} This is for IE6.0 and IE6.0 versions below are hidden, FF and opera role. There's a difference between a property selector and a child selector, The range of the sub-selectors is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.
9. The most ruthless means-!important; If there is no way to solve some of the details, we can use this method. FF will automatically parse for "!important", but IE will be ignored. tabd1{Background:url (/res/images/up/tab1.gif) no-repeat 0px 0px!important;/*s Tyle for ff*/Background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} It is worth noting that XXXX!important is placed on top of another sentence, which has already been mentioned
10.ie,ff Default Value problem Maybe you've been complaining about why you have to write different CSS specifically for IE and FF, why IE makes people headache, and then while writing CSS, cursing that hateful m$ ie. in fact, for the standard of CSS support, IE is not as bad as we think, the key is that the default value of IE and FF is not the same, mastered this technique, you will find that compatible with FF and IE CSS is not so difficult, perhaps for the simple CSS, you can absolutely not "! Important "This thing up. We all know that the browser in the Display page, the Web page will be based on the CSS style sheet to determine how to display, but we do not necessarily have all the elements in the stylesheet is described in detail, of course, there is no need to do so, for those not described in the property, the browser will use the built-in default way to display , such as text, if you do not specify a color in the CSS, then the browser will be in black or system color to display, div or other elements of the background, if not specified in the CSS, the browser will be set to white or transparent, and so on other undefined style. So there's a lot of things. The root cause of the difference between FF and IE is that their default display is different, and how this default style should be displayed I know there are no corresponding standards in W3, so don't blame IE for this.
11. Why the FF text does not open up the container's height standard the container for fixed height values in the browser is not as open as the IE6, so I want to fix the height and want to be able to be open. The way is to remove the height setting min-height:200px; here in order to take care of the IE6 do not know min-height can be defined as: {height:auto!important; height:200px; min-height:200px; }
12.FireFox How to make continuous long field line wrapping is well known in IE directly using Word-wrap:break-word, FF we use JS Insert & #10, the method to solve <style type= "Text/css" > <!--div { width:300px; Word-wrap:break-word; border:1px solid red; --</style> <div id= "FF" > Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</ div> <scrīpt type= "text/javascrīpt" >/* <! [cdata[*/Function Tobreakword (el, Intlen) { Varō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īpt>
13. Why is the width of the IE6 under the container different from the FF interpretation <?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ōnclick= "alert (this.offsetwidth)" > The difference between Firefox and IE compatibility </div> problem is that the overall width of the container is not the width of the bounding box (border), where the IE6 is interpreted as 200PX, and FF is interpreted as 220PX, how is it caused by the problem? Everyone put the container top of the XML removed will find the original problem in this, the top of the declaration triggered the IE qurks mode, about Qurks mode, Standards mode knowledge, please refer to: http://www.microsoft.com/ China/msdn/library/webservices/asp.net/aspnetusstan.mspx?mfr=true
Ie6,ie7,ff IE7.0 out, the support for CSS has new problems. Browser more, Web page compatibility Worse, tired or we, to solve IE7.0 compatibility problem, find the following article: Now I mostly use!important to hack, for IE6 and Firefox test can be normal display, but IE7 to! Important can be interpreted correctly and will cause the page not to be displayed as required! The following is a compatibility collection of three browsers.
The first, is the CSS hack method height:20px; /*for firefox*/*height:25px; /*for IE7 & ie6*/_height:20px; /*for ie6*/Note the order. 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;}/* I E7 * *
<!--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--> <link rel= "stylesheet" type= "Text/css" href= "Ie.css"/> <! [endif]-->
Third, the CSS filter method, the following is the classic translation from foreign sites. . Create a new CSS style as follows: #item { width:200px; height:200px; background:red; } Create a new Div, and use the style of the CSS defined previously: <div id= "item" >some text here</div> Add the lang attribute to the body expression here, Chinese for zh: <body lang= "en" > now define a style for the DIV element again: *:lang (en) #item { background:green!important; } do this to overwrite the original CSS style with!important, because the lang selector ie7.0 not support, so there is no effect on this sentence, It also achieves the same effect as ie6.0, but unfortunately Safari also does not support this property, so you need to add the following CSS style: #item: Empty { background:green!important } : Specification for the empty selector for CSS3 , although SAFAri does not support this specification, but this element will still be selected, whether or not this element exists, and now the Green will now be on a browser other than IE versions. compatibility with IE6 and FF can take into account the previous!important personal preference
The most complete CSS browser compatibility issue
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
