Most of the CSS browser compatibility issues

Compatibility of CSS to the browser sometimes makes people very headache, perhaps when you know the technology and principle, feel is not difficult, from the Internet to collect compatibility processing method of IE7,6 and Fireofx and finishing it. For Web2.0 over, please try to use the XHTML format to write code, and the DOCTYPE effect of CSS treatment, as the W3C standard, be sure to add the DOCTYPE reputation.

CSS skills

1.div vertical centering problem of vertical-align:middle; the spacing increased to as high as line-height:200px and the DIV; and then insert text, it vertically. Shortcomings is to control the contents do not wrap

2 margin double problem setting for float div is set in IE margin will be doubled. This is a IE6 are bug. The solution is display:inline in the div added; for example: <#div id=” imfloat” > the corresponding CSS #IamFloat{ float:left; margin:5px; display:inline;}

3.FloatieThe double distance #box{ float:left; width:100px; margin:0 0 0 100px; //This kind of circumstanceIEWill produce200pxDistance display:inline; //The floating ignored} Here the details onblockAndinlineThe two element: blockElements characteristics,Always begins on a new line,Height,Width,Row height,Margins can be controlled(Block element);Inline Elements characteristics,And other elements in the same line,You can't control(An inline element); #box{ display:block; //For an inline element simulation block elements display:inline; //The arrangement of the same row effect diplay:table;

4 IE and the width and height of the IE don't know min- this definition, but in fact it is the normal width and height as min case to. This is great, if only the width and height, the normal browser these two values will not be changed, if only min-width and min-height, IE the following fundamental is not set the width and height. For example, to set the background picture, the width is more important. To solve this problem, can be so: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

The minimum width of the min -width 5 page is a very convenient CSS command, it can specify the minimum element nor less than a width, so that we can guarantee the layout has been correctly. But IE does not recognize this, but it is actually the width as min width. In order for this command can also be used in IE, can make a<div> In the <body> Tab, and then specify a class div, then CSS #container{min-width: 600px design: width:expression_r (document.body.clientWidth; <600? "600px": "auto");} the first min-width is normal; but the second for the use of width Javascript, the only IE know, it will also help you HTML document does not too formal. It actually to achieve the minimum width through the judgment of Javascript.

6.DIV floating IE text generated 3 pixel bug left object floating, right the patch distance left to right position, the text within the object will be the 3px distance from the left. #box{float:left width:800px;}; #left{float:left; width:50% #right{width:50%;};} * HTML #left{margin-right:-3px; // this sentence is the key} <div id="box"> <div id="left"></div> <div id="right"></div> </div>

7.IE hide and seek problems when div applied the complexity of each column and some links, DIV this time prone to hide problems. Some of the content does not show up, when the mouse to choose this area is found on the page content is indeed. Solution: use the line-height property to #layout or to #layout using a fixed height and width. The page structure as simple as possible.

8.float div is closed; clear float; adaptive height;

The example: <#div id=” floatA” > <#div id=” floatB” > <#div id=” NOTfloatC” > where NOTfloatC does not want to translation, but hope to discharge. (of which the attribute floatA, floatB has been set to float:left;) this code no in IE problem, the problem is in the FF. The reason is that NOTfloatC is not float label, float label must be closed. In the <#div class=” floatB” > <#div class=” NOTfloatC” > add <#div class=” clear” > the div must pay attention to the position, and must and two with the float attribute of the existing div, nested relationship can not, otherwise it will cause abnormal. And the clear of this style is defined as the following.: .clear{ clear:both;}

As the external wrapper div not dead height, in order to make the height can automatically adapt to overflow:hidden, in the wrapper plus; when float contains box, highly automatic adaptation is invalid under the IE, it would be layout private property trigger IE (IE the root of all evil! ) zoom:1; can be done, so as to achieve the compatibility. For example, a wrapper defined as: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

For typesetting, we use at most CSS description float:left. may sometimes we need a uniform background behind the n column of the float div, for example: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> For example we will page set into blue, to achieve all the three column of the background color is blue, but we will find that with downward stretched left center right, while page was kept constant height, to the problem, because page is not the float attribute, and our page due to the middle, not set as a float, so 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> To embed a float left while the width is 100% DIV solution

The universalfloat Close(Very important!) About clear float The principle can be see [How To Clear Floats Without Structural Markup],The following code intoGlobal CSS In the,To be closeddivAdd class="clearfix" You can,Have proved effective every time. .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} Or this set: .hackbox{ display:table; //The object as a block element level table display}

11 height does not meet the height not adapt is when the inner object height changes of outer height can not automatically adjust, especially when the inner object using the margin or paddign. An example: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>The contents of the P object</p> </div> Solution: the two empty div CSS code in the P object:.1{height:0px; overflow:hidden;} or DIV plus the border attribute.

12.IE6 why picture a void generation method to solve the BUG also has a lot of, can change the HTML layout, or set the IMG to display:block or set the vertical-align property to vertical-align:top | bottom |middle |text-bottom can be resolved.

13 How to align the text and the text input box with vertical-align:middle; <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; vertical-align:middle; } --> </style>

14.webStandard definitionidAndclassWhat is the difference between a.webThe standard is not Xu ZhongfuIDThe,For example div id="aa" Not Xu Zhongfu2Time,Whileclass The definition of class,The theory can be repeated indefinitely, This need to define multiple references can use him. Two.The issue of priority attribute ID A higher priority thanclass,Look at the three examples above.ConvenientJSOther client script,If the page to the script operation on an object,You can give him a definitionID,Otherwise, only through the use of page elements with specific attributes to find it,This is a waste of time resources,Far worse than aIDMore simple.

Methods 15 LI more than in length with an ellipsis shows this method used 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 the web standard IE cannot set the scrollbar color solution is to change body into HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <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 do not the definition of 1px around this problem container IE6 high is because the default row height cause, there are also many, for example: overflow:hidden solution | zoom:0.08 | line-height:1px

18 how to display on top of FLASH. The solution is to set up a transparent FLASH <param name="wmode" value="transparent" />

19 how to make a layer vertically in the browser here we use percentage absolute positioning, and external patch negative, negative size as its width 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 Center Div div set margin-left, margin-right for auto has been centered, not IE, IE need to set the body center, first in the parent element definition text-algin: center; this means that in the parent element contents in the middle.

2 links (a tag) border and background a link add borders and background color, set the display: block, and set the float: left to ensure no newline. According to menubar, a and menubar to set the height to avoid the bottom shows dislocation, if not set height, you can insert a space in menubar.

After 3 hyperlinks to access the hover style will not appear problem is click visited links style does not have hover and active, a lot of people should have encountered this problem, the solution is to change the CSS attribute order: L-V-H-A Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>

4 cursor cursor: pointer cursor fingers can also display the cursor fingers in IE FF, hand IE can only

5.UL padding and margin UL tag in FF the default is a padding value, and in the IE only margin the default value, so the first definition of ul{margin:0; padding:0;} can solve most of the problems

The 6 FORM tag, the tag in IE, will automatically margin some margin, while FF margin is 0, therefore, if you want to show the best agreement, so specified in CSS margin and padding, aiming at the above two issues, my CSS in general first style UL, such as form{margin:0; padding:0;} defines died, so would not for this headache.

The BOX Model 7 BOX model to explain the inconsistency problem in FF and IE is not consistent in the lead to difference of 2px solution: div{margin:30px! Important; margin:28px;} note order must not be the two margin write back, the important property, IE does not recognize, but other browsers can identify. So in IE is interpreted this way: div {maring:30px; margin:28px} repeat define it in accordance with the implementation of the last one, so we can not only write 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-}

The 8 attribute selector (this is not compatible, is a bug hide CSS) p[id]{}div[id]{} the IE6.0 and IE6.0 versions are hidden, FF and OPera. There are still differences attribute selector and sub selector, the range of the sub selector narrow from the form, scope attribute selector is relatively large, such as p[id] in ID, all P tags in the same style.

9.Worst - !important; If there is no way to solve some of the details,You can use this method.FFFor”!important”Automatically priority analysis,HoweverIEAre ignored.The following .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; } Is worth noting, It must be XXXX! Important it placed in a sentence., The above mentioned

10.IE,The default value of FF maybe you've been complaining about why to write different CSS specifically for IE and FF, Why is IE such a headache, Then write CSS, Cursing the damn M$IE. is for the CSS standard support, IE is not our imagination of so bad, The key lies in the default IE and FF values are not the same., Master the skills, You'll find out write compatible with FF and IE CSS and not so difficult, Perhaps for simple CSS, You can not ” important” this thing!. We all know, In the display when the webpage browser, Will according to the webpage CSS style sheet to decide how to display, But we in the style sheet may not be all elements is described concretely, Of course, there is no need to do that, So for those who don't have the properties described, The browser will adopt to display with built-in default mode, For example, text, If you do not specify the color in CSS, The browser will use black or color display system, Div or other elements of the background, If CSS is not specified, The browser is set to white or transparent, And other undefined style are so. So there are a lot of things FF and IE show the root cause is not the same in their default display is not the same, but the default style of the show how I know in W3 there is no corresponding standard to carry out the required, so for this also don't blame IE.

The container fixed height height standard browser text can not be opened container 11 why FF is not like IE6 that is open, that I want to be a fixed height, also want to be open to how to set? Set the min- height:200px height solution is removed; here to take care of don't know min-height IE6 can be defined: { height:auto!important; height:200px; min-height:200px; }

12.FireFox how to make continuous long field wrap as everyone knows word-wrap:break-word use IE directly on it, FF we use JS to insert the & #10; methods to solve <style type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt"> function toBreakWord(el, intLen){ var ōbj=document.getElementByIdx_x(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.getElementByIdx_x && !document.all) toBreakWord("ff", 37); </scrīpt>

13 why IE6 container width and FF interpretation is different. <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <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)">Let FireFox and IE compatible</div> The difference lies in the overall width container has no border (border) width in the IE6, here interpreted as 200PX, while FF is interpreted as a 220PX, that is what caused the problem? All of the top of the container XML will find the original problem in this, on top of the statement triggered IE qurks mode, a qurks mode, standards mode related knowledge, please refer to: http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

IE6,IE7,FF IE7.0 came out, support for CSS and new problems. The webpage browser compatibility, worse, be kept constantly on the run or do we, in order to solve the IE7.0 compatibility issues, for the article below: now I mostly use hack! Important, for IE6 and Firefox testing can show that normal, but the IE7! Important can be interpreted correctly, will lead to the page didn't press required to display! Below is a collection of three browser compatibility.

First, height:20px CSS HACK; *height:25px; _height:20px; attention to order. This is CSS HACK, but not so simple. #example { color: #333; } * html #example { color: #666; } *+html #example { color: #999; }

<!--Other browsers --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- Suitable forIE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> <!-- Suitable forIE6And what --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

Third, the CSS filter method, the classic from abroad website translation. . create a CSS style is as follows: #item {width: 200px; height: 200px; background: red;} a new div, and using the previously defined CSS Style: <div id="item">some text here</div> In thebodyShown here to joinlangAttribute,Chinese forzh: <body lang="en"> Now ondivElement to define a style: *:lang(en) #item{ background:green !important; } This is done in order to use!importantThe original covercssStyle,Because:langSelectorie7.0Does not support,So any effect on this sentence not,So also reached ie6.0The same effect,But very unfortunately,safariAlso do not support this property,So we need to add the followingcssStyle: #item:empty { background: green !important } :emptySelectorcss3Standard,AlthoughsafariThis specification does not support,But would still choose this element,Whether this element,Now green will now in addition toieThe outside of the browser version. For compatibility with IE6 and FF can be taken into account before important personally like to use!

Posted by Joseph at November 22, 2013 - 3:12 AM