Css style for compatibility between ie and Firefox 1

Css style for compatibility between ie and Firefox 1
The most annoying front-end style is the compatibility between various browsers and resolutions. First, you need to know which aspects of the style between different browsers are prone to problems. IE supports custom cursor file cursor: url () in IE, you can customize the Color Style of the scroll bar. in IE6, the select statement always has the highest bug, and css does not work for the select statement. In form, IE supports labels, including text and images. However, Firefox does not support image labels. clicking an image cannot make the radio or checkbox of label for effect. Both IE and Firefox support onscroll events, but textarea does not. In CSS, IE supports embedding expresion in CSS, while Firefox does not support Firefox's choice of adjacent sub-Choices ">", whereas IE6 does not (IE7 supports) firefox does not support inline-block of display, whereas IE does. CSS has a high value for the compatibility of browsers. In general, there is a great difference between IE and Firefox. Here we will introduce the compatibility points. Resolution of height IE: Based on the height change of the content, including the undefined height of the image content, even if the height is defined, when the content exceeds the height, the actual height Firefox will be used: if no height is defined, if the image content is included in the content, Firefox's height resolution will be based on the printing standards, which will cause a highly inconsistent situation with the actual content; when the height is defined, however, when the content exceeds the defined height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation. Conclusion: If you can determine the content height, you 'd better define the height. If there is no way to define the height, you 'd better not use the border style. Otherwise, the style will be messy! Analysis of alt and title of img objects alt: the prompt when the photo does not exist or the load error occurs; title: The tip description of the photo. In IE, if title is not defined, alt can also be used as the img tip. However, in Firefox, the two are completely used according to the standard definition. Conclusion: When you define an img object, finally, write the alt and title objects completely to ensure that other detailed differences can be normally used in various browsers. When you write css, especially with float: left (or right) when you arrange the images, you will find that there is a normal problem in Firefox and there is a problem in IE. No matter whether you use margin: 0 or border: 0 as the constraint, it will not help. In fact, there is another problem here, that is, the handling of space by IE. Firefox ignores this problem while IE processes spaces between blocks. That is to say, the end of a div should be followed by a div, and there should be no carriage return or space in the middle. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find. Unfortunately, I encountered this problem again, connecting multiple img labels and defining float: left. I hope these images can be connected. However, the results are normal in Firefox, and each img displayed in IE is 3 px apart. Deleting spaces between tags does not work. Later, the solution was to set li outside img and define margin: 0 for li, which solved the display deviation between IE and Firefox. The explanation of some models by IE may cause many errors. You can only find the cause if you try more. 10 major compatibility points 1. DOCTYPE affects CSS processing 2. Firefox: div sets margin-left, and margin-right is centered when it is set to auto. IE does not work. 3. Firefox: when setting text-align for the body, div needs to set margin: auto (mainly margin-left, margin-right) to center. 4. Firefox: supported! Important, IE is ignored, available! Important sets a special style for Firefox. It is worth noting that you must set xxxx! Important is placed above another sentence. 5. vertical center problem of div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; then insert the text to center vertically. The disadvantage is that you need to control the content. 6. cursor: pointer can display the cursor finger shape in ie ff at the same time. hand can only be IE 7. Firefox: Adding borders and background colors to the link, 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. 8. The BOX models in Firefox and IE are inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed ,! The important attribute IE cannot be identified, but other browsers can. 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: XXpx! Important;} 9. ul labels have padding values by default in Firefox. in IE, only margin has a value. Therefore, ul {margin: 0; padding: 0;} is defined first ;} next, IE6, IE7, IE8, and IE6: top {_ width: 100px;} This method only IE6 can recognize IE7/8 and Firefox cannot recognize IE7: * + htmltop {width: 100px;} Only IE7 can recognize IE6/8 and Firefox cannot recognize IE8: top {width: 100px;} Firefox :: root body top {width}: Firefox can only identify IE browsers and cannot identify it. If only ff and IE8 can be seen, html>/**/body is used. head {color: #000;} if only ie6 is not visible, use html> body. head {color: #000;} is invalid for IE 6. If only ff and IE8 are not allowed to see it, use * body. head {color: #000;} is invalid for ff and IE8 html * {color: # f00} supports IE6 IE7 and does not support IE8 FFbody> p {color: # f00} supports IE7 IE8 FF and does not support IE6html [xmlns] p {color: # f00} supports IE7 IE8 FF does not support IE6 @ import "style.css" @ import "style.css" @ import url(style.css) @ import url('style.css ') @ import url ("style.css ") supports IE6 IE7 IE8 FFP {/* color: # f00;/**/} supports IE6 IE7 FF and does not support IE8