When designing a website, you should pay attention to the compatibility of CSS styles with different browsers. Especially for websites designed entirely using p CSS, you should pay more attention to the compatibility of IE6 IE7 FF with CSS styles. Otherwise, your network may be messed up. Go out and don’t want to have the effect! Common to all browsers
height: 100px;

Exclusive for IE6
_height: 100px;

Exclusive for IE6
*height: 100px;

Exclusive for IE7
* height: 100px;

Common to IE7 and FF
height: 100px !important;
1. CSS compatibility
The following two methods can solve almost all compatibility problems today.

1, !important (not very recommended, it feels safest to use one of the following)

With IE7’s support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. .Remember that the declaration position needs to be declared in advance.)

Code:


2, IE6/IE77 for FireFox

*html and *html are IE-specific tags, which are not supported by firefox. And *html is a IE7-specific tag.

Code:


Note:
* To be compatible with IE7, html must have the following statement at the top of the HTML:

Code:


2. Universal float closure (very important!) Yes Use this to solve the problem of incorrect spacing when multiple p's are aligned.

For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS to give p that needs to be closed Just add class="clearfix" and it works every time.

Code:


****************************************** *************************************************** *****************************

3. Other compatibility tips (quite useful)

1, Setting padding on p under FF will cause the width and height to increase, but IE will not. (can be solved with !important)
2, Centering problem.
1). Vertically center. Change line-height Set it to the same height as the current p, and then pass vetical-align: middle. (Be careful not to wrap the content.)
2). Horizontally center. margin: 0 auto; (Of course it is not omnipotent)
3, if needed To add style to the content in the a tag, you need to set display: block; (common in navigation tags)
4. The difference in understanding of BOX between FF and IE results in a 2px difference. In addition, if p is set to float, the margin is doubled under IE, etc. Problem.
5, The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)
6, As an external wrapper p Don’t fix the height, it’s better to add overflow: hidden to achieve height adaptation.
7, about the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:

Compatible Code: Compatible with the most recommended modes.
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right : 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
* html . submitbutton {
margin-top: 21px;
}





What is browser compatibility: When we use different browsers (Firefox IE7 IE6 ) When visiting the same website or page, there will be some incompatibility problems. Some are displayed normally and some are displayed abnormally. We will be very annoyed when writing CSS. We have just fixed this browser problem. , but a new problem occurred in another browser. Compatibility is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe!

The compatibility of the IE7 browser recently released by Microsoft has indeed placed a heavy burden on some web page developers. Although IE7 has become standardized, there are still many differences from FF, so IE7 needs to be used Many friends have asked what the compatibility of IE7 is, but I actually don’t know. I haven't found any compatibility specifically for IE7 yet. In addition to the previous article, the compatibility method in "CSS Style for Firefox IE6 IE7" is also very useful.

Anyone with a little bit of logical thinking will know that you can use the compatibility of IE and FF together. Here are three compatibility options, for example: (Suitable for novices, haha, experts will stop by here.)

Program code

The first one is compatible, common to all IE FF browsers (actually not considered compatible)
height:100px;
The second one is compatible with IE6 only
_height: 100px;
The third one is compatible with IE6 IE7 public
*height:100px;

Now that we have introduced these three compatibility, let’s take a look at how to define IE6 IE7 FF-specific compatibility for each attribute in a style. , look at the following code, the order cannot be wrong:

Program code

height:100px;
*height:120px;
_height:150px;

Let me briefly explain how each browser understands these three attributes:

Under FF, FF does not recognize the second and third attributes, so it reads height:100px;

Under IE7, IE7 does not recognize the third attribute, so it reads the first and second attributes, and because the second attribute overwrites the first attribute, IE7 finally reads the second attribute *height:120px ;

Under IE6, IE6 recognizes all three attributes, so all three attributes can be read. And because the third attribute overwrites the first two attributes, IE6 finally reads the third one. property.





1 css style for firefox ie6 ie7

Now most of them are compatible with !important, and the test for ie6 and firefox can be normal Display, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good compatibility method for IE7 by using "* html". Now browse it with IE7. There should be no problem. Now write a CSS like this:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE*/

Then in firefox The font color is displayed as #333, the font color is displayed as #666 under IE6, and the font color is displayed as #999 under IE7.

2 Centering issues in css layout

The main style definitions are as follows:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Explanation:

First define TEXT-ALIGN: center in the parent element; this means that the content within the parent element is centered; for IE This setting is enough.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " when setting the child element definition

It should be noted that if you want to use this method to center the entire page , it is recommended not to nest it in a p. You can separate multiple ps in sequence, as long as you define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each removed p.

3 Different interpretations of the box model.

#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-
}

4 Double distance generated by floating ie

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore floats}

Here we will explain in detail the two elements of block and inline, and the Block element The characteristics are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block elements); the characteristics of the Inline element are: it is on the same line as other elements,... cannot be controlled (inline elements) ;

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

5 IE Problems with width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This becomes a big problem. If you only use width and height, these two values ????will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, 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;}

6 Minimum width of the page

min-width is a very convenient CSS command. It can specify that the element must be minimum or not less than a certain width, so as to ensure that the typesetting is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a

under the tag, and then specify a class for p:
Then the CSS is designed like this:

# container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}

First A min-width is normal; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

7 Clear floats

. Compatible box{
display:table;
//Display the object as a table at the block element level
}

Or

. Compatible with box{
clear:both;
}

or add: after (pseudo object) to set the content that occurs after the object, usually used in conjunction with content , IE does not support this pseudo object and is not supported by Ie browsers, so it does not affect IE/WIN browsers. The most troublesome thing about this is

...#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

8&nbp;p Floating IE text produces a 3-pixel bug

The object on the left is floated, and the right is positioned using the left margin of the outer patch. The text in the object on the right will be 3px away from the left.

#box{
float:left;
width:800px; }
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
/ >body select {……}
This sentence has the same effect as the previous sentence.

Only IE6 does not recognize it
select { display /*IE6 does not recognize itThis sentence is the key
}
HTML code

< /p>

9 Attribute selector (this cannot be considered compatible, it is a bug in hiding css)

p[id]{}p[id]{}
p[id]{}p[id]{}

This is for IE6.0 and versions below All are hidden, FF and OPera function

There is still a difference between attribute selector and sub-selector. The scope of sub-selector is reduced in form, and the scope of attribute selector is relatively large, such as in p[id] , all p tags with ids are of the same style.

10 IE hide-and-seek problem

When the p application is complex, there are some links in each column, p and so on. Hide-and-seek problems can easily occur.
Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.
Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

11 Height non-adaptation

Height non-adaptation means that when the height of the inner layer object changes, the height of the outer layer cannot be automatically adjusted, especially when the inner layer object uses
margin or paddign hour. Example:

Content in p object

CSS ：

#box {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }

Solution: Add 2 empty p object CSS codes above and below the P object: .1{height:0px;overflow:hidden;} or add the border attribute to p.





Block IE browser (that is, it will not be displayed in IE)
*:lang(zh) select {font:12px !important;} /* FF, visible to OP*/
select:empty {font:12px !important;} /*visible to safari*/
Select here is the selector, which can be changed according to the situation. The second sentence is unique to the Safari browser on MAC.

Only recognized by IE7
* html {…}
You can use this compatibility when you need to make styles only for IE7.

Recognized by IE6 and below
* html {…}
Pay special attention to this place. Many landlords have written that it is compatible with IE6. In fact, IE5.x can also recognize this compatibility. Other browsers do not recognize it.
html/**/ { display /*IE6, IE5 does not recognize*/:none;}
Here mainly separates an attribute and value through CSS comments, which are released before the colon.

Only IE6 and IE5 do not recognize it
select/**//*/:none;}
The difference here from the above sentence is that there is an extra CSS between the selector and the curly braces Note.

Only IE5 does not recognize it
select/*IE5 does not recognize it*/ { display:none;}
This sentence removes the comment in the attribute area from the previous sentence. Only IE5 does not recognize the

box model solution
selct {width:IE5.x width; voice-family:""}""; voice-family:inherit; width:correct width;}
The box model's clearing method is not handled via !important. This needs to be clear.

Clear float
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are all When floating, the height of the parent cannot completely cover the entire child. Then use this clear floating compatibility to define the parent once, which can solve this problem.

Truncation ellipsis
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
This will automatically change after exceeding the length It is a good technique to cut off the extra text and end it with an ellipsis. It's just that Firefox doesn't support it currently.

Only recognized by Opera
@media all and (min-width: 0px){ select {……} }
Make separate settings for Opera browser.

The above are some compatibility in writing CSS. It is recommended to follow the correct tag nesting (p ul li nesting structure relationship), which can reduce the frequency of your using compatibility, and do not get into misunderstandings. It is not a The page needs a lot of compatibility to maintain multi-browser compatibility). In many cases, the browser may work very well without any compatibility. These are used to solve local compatibility problems. If you want to make the compatibility The content is also separated, so you might as well try some of the filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import required patch styles through conditions.

Filter for IE5.x, only IE5.x is visible
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css' ; /*";}
}/* */

IE5/MAC filter, generally not needed
/***/
@import "ie5mac.css ";
/**/

The following is the conditional comment of IE. I personally think that using conditional comment to call the corresponding compatibility is a perfect solution for multi-browser compatibility. Put the parts that need to be compatible into a separate file. When the browser version is consistent, you can call the compatible style. This is not only very convenient to use, but also allows for more strict observation of the CSS itself. Is it necessary to use compatibility? In many cases, when I write CSS, if I write all the code including compatibility into a CSS file, it will be very casual. I can make it as compatible as I want. But when you write it independently, You will unconsciously consider whether it is necessary to be compatible. Should it be compatible with CSS first? Or should we first adjust the things in the main CSS to be as non-compatible as possible? When you make many browsers very obedient with only a small amount of compatibility, do you feel a sense of accomplishment? You know how to choose, right~~ Haha

IE’s if condition is compatible and you can use it flexibly. See this IE condition comment
Only IE
All IE can recognize it

Only IE5.0 can recognize
Only IE 5.0
IE5.0 can be recognized by IE5.5.

Only IE6 can recognize
Only IE 7/-
IE6 and below Recognized by all IE5. If these patterns occur, it will make you very upset. Although you can control it through a lot of compatibility and a lot of !important, you will find that you will be unwilling to do so in the long run. Take a look at many excellent websites. Their CSS makes IE6 , Ie7, Firefox, even Safari, Opera run flawlessly, are you envious? And their seemingly complex templates use very little compatibility. In fact, you have to know that IE and Firefox are not so disharmonious. We can find a certain method to make them coexist harmoniously. Don't think that if you find a compatible method, you have mastered everything. We are not slaves to compatibility.

The nesting order of p ul li

Only one rule will be discussed today. It is the triangular relationship of

• . My experience is that

  is on the outside,

  is inside, and then
  • . Of course,

    can be nested inside

  • , but it is not recommended that you nest it. Pack a lot of stuff. When you comply with such rules, those unlucky and disobedient gaps will not appear in it. When you just put
  • in

    instead of

    , you You will find that your gap is very difficult to control. Under normal circumstances, IE6 and IE7 will have more gaps out of thin air. But in many cases, when you go to the next line, the gap disappears, but the previous content is empty. In this case, you can change the Margin of IE, and then adjust the Padding under Firefox so that the two can be displayed. The effect is very similar, but your CSS will become extremely stinky, and you will have to think more about possible remedies for this problem. Although you know that you will be compatible with them all, you will be annoyed to death.
    
    Specific nesting writing method
    
    Follow the above nesting method,
    < /p> Then tell ul {Margin:0pxadding: 0px;list-style:none;} in CSS, where list-style:none prevents directory type tags such as dots or numbers from being displayed at the front of the
    • tag, because The default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. The difference in pixels, but that's already perfect. You don't need to adjust large CSS to control their display. If you like, you can only be compatible with one or two places, and usually this compatibility can be adapted to various places. You don’t need to repeatedly debug different compatibility methods in different places – reduce your troubles overflow:hidden; }
      This will automatically cut off the excess text after exceeding the length, and end with an ellipsis, which is very A good technique. It's just that Firefox doesn't support it currently.
      
      Only recognized by Opera
      @media all and (min-width: 0px){ select {……} }
      Make separate settings for Opera browser.
      
      The above are some compatibility in writing CSS. It is recommended to follow the correct tag nesting (p ul li nesting structure relationship), which can reduce the frequency of your using compatibility, and do not get into misunderstandings. It is not a The page needs a lot of compatibility to maintain multi-browser compatibility). In many cases, the browser may work very well without any compatibility. These are used to solve local compatibility problems. If you want to make the compatibility The content is also separated, so you might as well try some of the filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import required patch styles through conditions.
      
      Filter for IE5.x, only IE5.x is visible
      @media tty {
      i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
      }/* */
      
      IE5/MAC的過濾器，一般用不著
      /**//*/
      @import "ie5mac.css";
      /**/
      
      The following is the conditional comment of IE. I personally think that using conditional comment to call the corresponding compatibility is a perfect solution for multi-browser compatibility. Put the parts that need to be compatible into a separate file. When the browser version is consistent, you can call the compatible style. This is not only very convenient to use, but also allows for more strict observation of the CSS itself. Is it necessary to use compatibility? In many cases, when I write CSS, if I write all the code including compatibility into a CSS file, it will be very casual. I can make it as compatible as I want. But when you write it independently, You will unconsciously consider whether it is necessary to be compatible. Should it be compatible with CSS first? Or should we first adjust the things in the main CSS to be as non-compatible as possible? When you make many browsers very obedient with only a small amount of compatibility, do you feel a sense of accomplishment? You know how to choose, right~~ Haha
      
      IE’s if condition is compatible and you can use it flexibly. See this IE condition comment
      Only IE
      All IE can recognize it
      
      Only IE5.0 can recognize
      Only IE 5.0
      IE5.0 can be recognized by IE5.5.
      
      Only IE6 can recognize
      Only IE 7/-
      IE6 and below Recognized by all IE5. If these patterns occur, it will make you very upset. Although you can control it through a lot of compatibility and a lot of !important, you will find that you will be unwilling to do so in the long run. Take a look at many excellent websites. Their CSS makes IE6 , Ie7, Firefox, even Safari, Opera run flawlessly, are you envious? And their seemingly complex templates use very little compatibility. In fact, you have to know that IE and Firefox are not so disharmonious. We can find a certain method to make them coexist harmoniously. Don't think that if you find a compatible method, you have mastered everything. We are not slaves to compatibility.
      
      The nesting order of p ul li
      
      Only one rule will be discussed today. It is the triangular relationship of
      • . My experience is that

        is on the outside,

        is inside, and then
        • . Of course,

          can be nested inside

        • , but it is not recommended that you nest it. Pack a lot of stuff. When you comply with such rules, those unlucky and disobedient gaps will not appear in it. When you just put
        • in

          instead of

          , you You will find that your gap is very difficult to control. Under normal circumstances, IE6 and IE7 will have more gaps out of thin air. But in many cases, when you go to the next line, the gap disappears, but the previous content is empty. In this case, you can change the Margin of IE, and then adjust the Padding under Firefox so that the two can be displayed. The effect is very similar, but your CSS will become extremely stinky, and you will have to think more about possible remedies for this problem. Although you know that you will be compatible with them all, you will be annoyed to death.
          
          Specific nesting writing method
          
          Follow the above nesting method,
          < /p> Then tell ul {Margin:0pxadding: 0px;list-style:none;} in CSS, where list-style:none prevents directory type tags such as dots or numbers from being displayed at the front of the
          • tag, because The default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. The difference in pixels, but that's already perfect. You don't need to adjust large CSS to control their display. If you like, you can only be compatible with one or two places, and usually this compatibility can be adapted to various places. You don’t need to repeatedly debug different compatibility methods in different places – reduce your troubles overflow:hidden; }
            This will automatically cut off the excess text after exceeding the length, and end with an ellipsis, which is very A good technique. It's just that Firefox doesn't support it currently.
            
            Only recognized by Opera
            @media all and (min-width: 0px){ select {……} }
            Make separate settings for Opera browser.
            
            The above are some compatibility in writing CSS. It is recommended to follow the correct tag nesting (p ul li nesting structure relationship), which can reduce the frequency of your using compatibility, and do not get into misunderstandings. It is not a The page needs a lot of compatibility to maintain multi-browser compatibility). In many cases, the browser may work very well without any compatibility. These are used to solve local compatibility problems. If you want to make the compatibility The content is also separated, so you might as well try some of the filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import required patch styles through conditions.
            
            Filter for IE5.x, only IE5.x is visible
            @media tty {
            i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
            }/* */
            
            IE5/MAC的過濾器，一般用不著
            /**//*/
            @import "ie5mac.css";
            /**/
            
            下 面是IE的條件注釋，個人覺得用條件注釋調用相應兼容是比較完美的多瀏覽器兼容的解決辦法。把需要兼容的地方單獨放到一個文件里面，當瀏覽器版本符合的時 候就可以調用那個被兼容的樣式，這樣不僅使用起來非常方便，而且對于制作這個CSS本身來講，可以更嚴格的觀察到是否有必要使用兼容，很多情況下，當我本 人寫CSS如果把全部代碼包括兼容都寫到一個 CSS文件的時候的時候會很隨意，想怎么兼容就怎么兼容，而你獨立出來寫的時候，你就會不自覺的考慮是否有必要兼容，是先兼容 CSS？還是先把主CSS里面的東西調整到盡可能的不需要兼容？當你僅用很少的兼容就讓很多瀏覽器很乖很聽話的時候，你是不是很有成就感呢？你知道怎么選 擇了吧～～呵呵
            
            IE的if條件兼容 自己可以靈活使用參看這篇IE條件注釋
            Only IE
            所有的IE可識別
            
            只有IE5.0可以識別
            Only IE 5.0+
            IE5.0包換IE5.5都可以識別
            
            僅IE6可識別
            Only IE 7/-
            IE6以及IE6以下的IE5.x都可識別
            Only IE 7/-
            僅IE7可識別
            
            Css 當中有許多的東西不不按照某些規(guī)律來的話，會讓你很心煩，雖然你可以通過很多的兼容，很多的!important 來控制它，但是你會發(fā)現(xiàn)長此以往你會很不甘心，看看許多優(yōu)秀的網站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起 來完美無缺是不是很羨慕？而他們看似復雜的模版下面使用的兼容 少得可憐。其實你要知道IE 和 Firefox 并不不是那么的不和諧，我們找到一定的方法，是完全可以讓他們和諧共處的。不要你認為發(fā)現(xiàn)了兼容的辦法，你就掌握了一切，我們并不是兼容的奴隸。
            
            p ul li 的嵌套順序
            
            今 天只講一個規(guī)則。就是
            • 的三角關系。我的經驗就是

              在最外面，里面 是

              ，然后再是
              • ，當然
              • 里面又可以嵌套

                什么的，但是并不建議你嵌套很多 東西。當你符合這樣的規(guī)則的時候，那些倒霉的，不聽話的間隙就不會在里面出現(xiàn)了，當你僅僅是

                里面放

              • ，而不用
                的時候，你會發(fā)現(xiàn)你的間隙十分難控制，一般情況下，IE6和IE7會憑空多一些間距。但很多情況你來到下一行，間隙就沒了，但是前面 的內容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變IE的Margin，然后調整Firefox下面的Padding，以便使得兩者顯示起來得效果很相 似，但是你得CSS將變得臭長無比，你不得不多考慮更多可能出現(xiàn)這種問題補救措施，雖然你知道千篇一律來兼容它們，但是你會煩得要命。
                
                具體嵌套寫法
                
                Follow the nesting method above,
                < /p> and then tell ul {Margin:0pxadding: 0px;list-style in CSS :none;}, where list-style:none prevents directory type tags such as dots or numbers from being displayed at the front of the
                • tag, because the default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. The difference in pixels, but that's already perfect. You don't need to adjust large CSS to control their display. If you like, you can only be compatible with one or two places, and usually this compatibility can be adapted to various places. You don’t need to repeatedly debug different compatibility methods in different places – reducing your troubles. You can easily sort out the places you want to be compatible with using ul.class1, ul.class2, ul.class3 {xxx:xxxx}, and make them compatible. Give it a try and don’t nest randomly again. Although you can nest almost as much as you want with p CSS, you will be much more relaxed by following the above rules and get twice the result with half the effort!