CSS browser compatibility is sometimes a headache, perhaps when you understand the skills and principles, you will find it is not difficult, from the online collection of ie7,6 and FIREOFX compatibility processing methods and collated. For web2.0 excesses, try to write code in XHTML format, and doctype affect CSS processing, as the standard of the consortium, must add DOCTYPE reputation.
CSS Tips
1.div Vertical Center problem vertical-align:middle; Increase line spacing to be as high as the entire Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content do not change lines
2. Margin double problem set to float div in IE set the margin will double. This is a bug that is 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 under 10px*/Display:inline;/*ie understood as 5px*/}
3. Floating IE double distance #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 detail of block and Inline two elements: block element is characterized by always starting on a new line, height, width, row height, margin can be controlled (blocks element); The Inline element is characterized by an uncontrollable (inline element) on the same line as other elements;
4 IE with the width and height of the problem ie do not recognize the definition of min-, but in fact it is the normal width and height as a min situation to make. This problem is large, if only with the width and height, the normal browser in these two values will not change, if only with Min-width and min-height, ie below is not set width and height. For example, to set the background picture, this width is more important. To solve this problem, you can do this: #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 very handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout is always correct. But IE does not recognize this, and it actually turns the width to the minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the Div, and then design the CSS like this: #container {min-width:600px; width: Expression (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 makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.
6.DIV floating IE text generated 3 pixel bug left object floating on the right side of the outer patch to locate the left margin, the right object within the text will have 3px distance from the left. #box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This is the key} <div id= "box" > <div id= "left" ></div> <div id= "right" > </div> </div>
7.IE Hide-and-Seek problem when the div application is complex, there are some links in each column, div and so on this time is prone to hide and seek. Some content does not appear when the mouse selects this area is found to be true 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 closure, clear float, adaptive height;
① For example:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > here NOTFLOATC do not want to continue panning, but want to go down. (where the Floata, FLOATB properties have been set to float:left;) This code has no problem with IE, the problem is 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" > plus < #div class= "clear" > this div must pay attention to the position, Also, there must be a nested relationship with two Div siblings with the float property, or an exception will occur. and define clear this style as follows:. clear{Clear:both;
② as an external wrappers div do not set dead height, in order to allow the height can automatically adapt to the wrappers inside add Overflow:hidden; When the box contains float, the height of automatic adaptation in IE invalid, this time should trigger IE layout private properties (Evil ie Ah!). Can be done with zoom:1, so that compatibility is achieved. For example, a wrappers is defined as follows:. colwrapper{Overflow:hidden; zoom:1; margin:5px auto;
③ the most used CSS description for typography is probably float:left. Sometimes we need to do a unified background behind the N-column float div, such as: <div id= "page" > <div id= "left" ></div> <div id= "center" ></div> <div id= " Right ></div> </div> For example, we want to set the background of the page to blue so that the background color of all three columns is blue, But we'll find that as the right of left center is stretched down, and page actually saves height, the problem comes because page is not a float, and our page can't be set to float because it's centered, so we should solve the <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 while the width is 100% div solution
④ Universal Float closure (very important!) about clear float, see [How to clear floats without structural Markup], add the following code to the global CSS, add the div that needs to be closed Class= "Clearfix" can be proven . /* 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{ display:table; Displays the object as a table of block element level}
11. Height is not suitable for height is not suitable for when the height of the inner object changes when the outer height can not be automatically adjusted, especially when the inner layer object using margin or paddign. Example: #box {background-color: #eee;} #box p {margin-top:20px;margin-bottom:20px; text-align:center;} <div id= "box" > <p>p object Content </p> </div> Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow: hidden; Or add the border attribute to the Div.
12. IE6 why there are gaps in the picture there are many ways to solve this bug, you can change the layout of HTML, or set IMG for Display:block or set vertical-align properties for Vertical-align:top | NRC |middle |text-bottom can be solved.
13. How to text input box plus vertical-align:middle; <style type= "Text/css" > <!--input {width:200px; height:30px; border:1px solid red; Vertical-align:middle; --> </style>
What is the difference between defining ID and class in the 14.web standard? The Web Standard is not allowed to duplicate ID, such as div id= "AA" does not allow repeat 2 times, and class definition is a class, theoretically can be infinitely repetitive, so need to refer to the definition of multiple references can use him. Two. The priority problem ID for a property is higher than class, see example three above. Convenient JS and other client-side script, if you want to script an object in the page, then you can define an ID, otherwise you can only use the traversal page element plus specify specific attributes to find it, This is a relatively waste of time resources, far less than an ID comes easy.
A method of displaying the ellipsis after the content exceeds the length in Li 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 scroll bar color in Web standards The solution is to replace the 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= "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 with a height of around 1px IE6 This problem is due to the default row height, there are many ways to solve, such as: Overflow:hidden | zoom:0.08 | line-height:1px
18. How to let the layer display on the flash above the solution is to flash set transparent <param name= "wmode" value= "Transparent"/>
19. How to align a layer vertically in the browser here we use the percentage absolute positioning, with the external patch negative value method, the negative size for its own width height divided by two <style type= "Text/css" > <!--div {position: Differs; 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 has been centered, ie not, ie need to set the body center, first in the parent element definition text-algin:center; This means that the content within the parent element is centered.
2. Link (a label) border and background a link plus border and back color, you need to set Display:block, and set Float:left guarantee do not wrap. Refer to MenuBar, to set a and menubar height is to avoid the bottom edge 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 in 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 finger cursor cursor:pointer can display cursor finger shape in IE FF at the same time, hand only IE can
5.UL padding and margin ul tags in ff default is padding value, and in IE only margin default has a 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, while in FF margin is 0, so if you want to show consistent, so it is best to specify margin and padding in CSS, for the above two issues, My CSS generally uses this style first ul,form{margin:0;padding:0; The definition is dead, so the back won't be a headache.
7. Box model explains inconsistency problem in FF and IE, the box model explains inconsistency, resulting in a difference of 2PX resolution: 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 IE in fact, explained that: div {maring:30px;margin:28px} Repeat the definition of the words according to the last to execute, so can not only write margin:xx px!important; #box {width:600px//for ie6.0-width:500px//for ff+ie6.0} #box {width:600px!important//for ff width:600px;//for ff+ ie6.0 width/**/:500px; For ie6.0-}
8. Property selector (This is not compatible, is a bug that hides CSS) p[id]{}div[id]{} This is for the IE6.0 and IE6.0 below the version is hidden, FF and opera role. There is a difference between the property selector and the selector. The scope of the child selector is reduced in form, and the property selector is larger in scope, such as P[id], and all of the 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, you can use this method. FF will automatically give priority to "!important", while IE will ignore it. 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 must be placed above another sentence, which has been mentioned above
10.ie,ff Default Value problem Maybe you've been complaining about why you have to write different CSS for IE and FF, why is IE so annoying, and then write CSS while cursing the hateful Microsoft IE. In fact, for the standard support of CSS, IE is not as hateful 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 the compatibility of FF and IE CSS is not so difficult, perhaps for simple CSS, you can not "!" Important "this thing. We all know that when browsers display Web pages, will be based on the CSS style sheet of the Web page to determine how to display, but we do not necessarily have all the elements in the stylesheet to describe the specific, of course, do not need to do so, for those who do not describe the properties, the browser will be built-in default way to display , such as text, if you do not specify a color in the CSS, then the browser will use black or system colors 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. FF and IE are not the same because their default display is not the same, and this default style how to show I know there is no corresponding standard in the W3, so don't blame IE for this.
11. Why FF text can't open the height of the container the fixed height value of the container in the browser is not as open as the IE6, then I want to fixed height, and want to be able to be stretched need how to set it? The solution is to remove the height setting min-height:200px; here to take care of the min-height IE6 can be defined as: {height:auto!important; height:200px; min-height:200px; }
12.FireFox How to make a continuous long field of automatic wrapping is known as direct use of word-wrap:break-word in IE, 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" > Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</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 container under IE6 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= "HTML; charset=gb2312 "/> <style type= text/css" > <!--div { cursor:pointer; width:200px; height:200px; border:10px Solid red }--> </style> <divōnclick= "alert (this.offsetwidth)" > Let Firefox and IE compatibility </div> problem is the overall width of the container is not the width of the border (border) in it, here IE6 interpreted as 200PX, and FF is interpreted as 220PX, that is how to cause the problem? You can remove the XML at the top of the container to find out that the problem is here, the top of the statement triggered the IE qurks mode, about Qurks mode, standards mode of 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 of CSS and new problems. Browser more, the Web page compatibility is worse, tired or we, in order to solve IE7.0 compatibility problem, to find the following article: Now I mostly use!important to hack, for IE6 and Firefox test can be normal display, but IE7 right! Important can be properly explained, will cause the page does not appear as required! The following is a three-browser compatibility collection.
The first kind is the CSS hack method height:20px; /*for firefox*/*height:25px; /*for IE7 & ie6*/_height:20px; /*for ie6*/attention Order. This also belongs to CSS HACK, but not as simple 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--> <link rel= "stylesheet" type= "Text/css" href= "Ie.css"/> <! [endif]-->
The third, CSS filter method, the following for the classic translation from a foreign website. . Create a new CSS style as follows: #item { width:200px; height:200px; background:red; } Create a new Div, and use the CSS style defined earlier: <div id= "item" >some text here</div> Add the lang attribute here in the body representation, Chinese for zh: <body lang= "en" > now define a style for the DIV element: *:lang (en) #item { background:green!important; } This is to overwrite the original CSS style with the!important, because the lang selector ie7.0 does not support, so it will not have any effect on this sentence, so also reached the ie6.0 the same effect, but unfortunately Safari also does not support this attribute, so you need to add the following CSS style: #item: Empty { background:green!important } : Empty selector for CSS3 specification, doSafari does not support this specification, but it will still be selected, regardless of whether or not this element exists, now the green will now be in the browser other than the IE versions. compatibility with IE6 and FF can be considered by the previous!important personal preference.
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
