Organize all the tips I know to be compatible with browsers

Source: Internet
Author: User
Tags object expression min
Tips | browser

Before the free space is really not, 3 days to give me the hope of empty, or decided to move the position, who let me have no money, who let me lack of knowledge, I only have ... (here omitted 25,000 words of pride and strong language).

1, different interpretations of the box interpreter.

#box {   width:600px;        For  ff+ie6.0   w\idth:500px;       For   ie6.0-} #box {    width:600px!important            //for ff    width:600px;        For  ff+ie6.0    width/**/:500px;       For   ie6.0-}

2, hide css in IE, use the sub-selector

Html>body #box {     }

3, only IE identification

*html #box {     }

4, in Ie/win effective and Ie/max hidden, using a backslash

/* \ */
#box {}

5, for IE to define a separate style

6, the double distance generated by the floating IE

#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 little bit of block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled; (block element) inline elements are characterized by the same line as other elements,... not controllable; (inline Element)

#box {   Display:block//can simulate an inline element as a block element   Display:inline//Effect   diplay:table   the same row arrangement; For FF, simulating the effect of the table}

7,for Oprea only

@media all and (min-width:0px) {/* Opera */#box {  }}

8,ie with the width and height of the problem

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This is a big problem, if you only use width and height,
In the normal browser, 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;}

9, the minimum width of the page

Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually treats the width as a 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:

Then CSS is designed 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 also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.

The same approach can also achieve maximum width for IE:

#container {min-width:600px;max-width:1200px;width:expression (Document.body.clientWidth < 600?) "600px": document.body.clientWidth > 1200? "1200px": "Auto";}

10, clear floating

. hackbox{       display:table;//Display the object as a table at the block element level} or. hackbox{        Clear:both;

or add: After (Pseudo object), set in the object after the occurrence of content, usually with content with use, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser. -------the most troublesome ...

#box: after{    Content: ".";     Display:block;    height:0;     Clear:both;     


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.