CSS style for IE and Firefox compatibility notation 1

The most annoying style of the front desk is the variety of browsers and resolutions compatibility issues

The first thing you need to know is how the styles in each browser are prone to problems.

IEsupport for custom cursor filesCursor:url ()
IEsupports custom scroll bar color styles
IE6in theSelecthave always been at the top of theBugs,andCSStheSelectdoes not work.

in theformin whichIESupportlabel, including text and pictures, but Firefox does not support images.label,
Clicking on a picture does not allowlabel forof theRadioorcheckboxproduce an effect.

IEand Firefox are all supportedonscrollevents, but in Firefoxtextareanot supported for this event.

CSSaspect,IEIn support of theCSSembedded inexpresion, whileFirefoxnot supported
Firefox selects adjacent sub-selectors">", whileIE6Not supported (IE7support)

Firefox onDisplayof theInline-blocknot supported, andIEare supported.

CSS The compatibility of the browser is of high value, usually IE and Firefox there is a big difference between the analysis, here to explain the compatibility points.
Analysis of the height
IE : Will vary according to the height of the content, including the undefined height of the picture content, even if the height is defined, when the content exceeds the height, the actual height will be used
Firefox: When there is no height defined, if the content is included in the contents of the image, the high resolution of Firefox is based on the printing standards, which will result in a high degree of non-conformance with the actual content, when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used by the region will not Causes the style dislocation.

Conclusion: It is best to define height when you can determine the height of the content, if there is no way to define the height, it is best not to use the border style, otherwise the style will definitely appear chaotic!

imgObjectaltand thetitlethe parsing
alt: When the photo does not exist orLoadthe prompt when the error occurs;
Title: Photo ofTipdescription.
in theIEIf there is no definition intitle,altcan also be used asimgof theTipuse, but in Firefox, both are used exactly as defined in the standard

> Conclusion: Everyone defines alt and title Span style= "font-family: ' The song Body '; The objects are all written to ensure proper use of the

in all browsers

Other details difference
when you're writing float:  left (or right ) when you arrange a picture, you will find that it is normal in Firefox and ie There's a problem. Whether you use margin:0, or to Constrain , is useless.

> Actually there's another problem here, ie for whitespace handling, Firefox is ignored and ie for the space between the block and the block is handled. That is, a div After the end to a div write, Don't have a carriage return or a space in the middle. Otherwise there may be problems, such as 3px deviation , and the reason is hard to find.

> Unfortunately I ran into this problem again, multiple img tag attached, then defined Hopefully these pictures can be linked together. But the results in Firefox normal and ie Each img 3px

the subsequent solution was to img outside Set Li , and to Li definition margin:0 , so it solves the IE and Firefox's display bias. IE 's interpretation of some models can cause many error problems, and only a lot of attempts can be found.

Ten Major Compatibility Essentials

1,DOCTYPEInfluenceCssprocessing
2,Firefox: DivSetMargin-left, Margin-rightto beAutois already centeredIenot
3,Firefox: BodySetText-alignwhenDivneed to setMargin:auto (is mainlyMargin-left,margin-right)Square can be centered
4,Firefox:Support!important, IEis ignored,available!importantto beFirefoxSpecial setting style, it is worth noting that you mustXXXX!importantThis sentence is placed on top of another sentence
5,Divthe vertical centering problem: Vertical-align:middle;increase line spacing to and from the entireDivas Highline-height:200px;then insert the text and center it vertically. The disadvantage is to control the content not to break the line
6,Cursor:pointercan be at the same timeIE FFthe cursor is displayed in a finger shape,HandonlyIecan be
7,Firefox:link plus border and background color, need to setDisplay:block,also setFloat:leftguaranteed not to break the line. ReferenceMenuBarGiveAand theMenuBarheight is set to avoid misalignment of the bottom side display,If you do not setHeightcan be inMenuBarInsert a space in the
8, inFirefoxand theIein theBOXinconsistent model interpretation results in differences2pxWorkaround:div{margin:30px!important;margin:28px;}
Note that these twoMarginThe order must not be written in reverse,!importantThis propertyIenot recognized, but other browsers can recognize it. So inIeThe following is actually explained in this way:DIV{MARING:30PX;MARGIN:28PX}
repeated definitions are executed according to the last one, so it is not possible to write only{margin:xxpx!important;}

9,the UL tag in Firefox default is padding value , and in IE only margin There are values so define ul{margin:0;padding:0 first ;}

Next is IE6/IE7/IE8 and the compatibility style in Firefox .

ie6 : { _width:100px; } This method is only ie6 recognizable ie7/8 and Firefox does not recognize

IE7 : *+htmltop{width:100px;} This method only IE7 can be identified IE6/8 It's not recognizable with Firefox .

IE8 : top{width:100px;}

Firefox: : Root Body Top{width} In this way, only Firefox can recognize IE Browser not recognized

If you only letFF,IE8See withhtml>/**/body. Head{color: #000;}
If you just don't letIE6See withhtml>body.head{color: #000;}that theIE 6Invalid
If you just don't letFF,IE8See with*body.head{color: #000;} that theFF,IE8Invalid

html*{color: #f00}SupportIE6 IE7not supportedIE8 FF
Body>p{color: #f00}SupportIE7 IE8 FFnot supportedIE6
HTML[XMLNS] P {color: #f00}SupportIE7 IE8 FFnot supportedIE6
@import "Style.css"
@import "Style.css"
@import URL (style.css)
@import url (' style.css ')
@import url ("style.css")SupportIE6 IE7 IE8 FF
P{/*/*color: #f00; */*}SupportIE6 IE7 FFnot supportedIE8

CSS style for IE and Firefox compatibility notation 1