This is the fourth day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.

CSS is the front-end style code that controls the style and layout of a web page.

What about hacks? Hack in software system meaning translation: based on the basis of the program, its code to add, delete or modify, optimize, make it meet the new requirements in function.

In combination, different browsers parse CSS differently in the front end, resulting in different page effects. At this time, you need to write extra code compatible with all browsers. This writing process is called hack.

List of common compatible marks for each viewer:

tag IE6 IE7 IE8 FF Opera Sarari
/ * + > < Square root Square root X X X X
_ Square root X X X X X
9 \ Square root Square root Square root X X X
\ 0 X X Square root X Square root X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X Square root
.bb , x:-moz-any-link, x:default X Square root X √(FF3.5 and below) X X
@-moz-document url-prefix(){.bb{}} X X X Square root X X
@media all and (min-width: 0px){.bb {}} X X X Square root Square root Square root
* +html .bb {} X Square root X X X X
Tourist core Trident Trident Trident Gecko Presto WebKit

To solve the problem

CSS styles for Firefox IE6 IE7

Most of them are now! Important to hack, for IE6 and Firefox tests can be displayed normally, but IE7 on! Important can be correctly interpreted, will cause the page is not displayed as required! A good hack to find a pin on IE7 is to use “*+ HTML”, now with IE7 browsing, there should be no problem. Now write a CSS like this:

#1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ Then the font color will be #333 in Firefox, #666 in IE6, and #999 in IE7.Copy the code

Centring problems in CSS layouts

The main style definitions are as follows:

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

Text-align: center; text-align: center; This means that the content inside the parent element is centered; For IE this setting is ok. But it’s not centered in Mozilla. The solution is to add “margin-right: auto; MARGIN-LEFT: auto; Note that if you want to center the page using this method, it is not recommended to have a single DIV. You can split multiple divs in turn, just define margin-right: auto; MARGIN-LEFT: auto; That’s it.

Different interpretations of box models

#box{ width:600px; / / for ie6.0 - width: 500 px; //for ff+ie6.0} #box{width:600px! important //for ff width:600px; / / for ff + ie6.0 width / * * / : 500 px; / / for ie6.0 -}Copy the code

Minimum width of the page

Min-width is a handy CSS command that specifies that the element must be at least a certain width, thus ensuring that the layout is always correct. But IE doesn’t recognize this, and it actually uses width as the minimum width. To make this command work on IE, add a

Put it under the tag, and then specify a class for div:

#container{ 
    min-width: 600px; 
    width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
Copy the code

The first min-width is normal; But the width in line 2 uses Javascript, which only IE can recognize, which also makes your HTML document less formal. It actually implements the minimum width at the discretion of Javascript.

Remove the floating

.hackbox{ display:table; } // or. Hackbox {clear:both; }Copy the code

Or add :after (pseudo-object), set the content after the object, usually used with content, IE does not support this pseudo-object, not supported by IE browser, so it does not affect IE/WIN browser. This kind of most troublesome……

#box:after{ 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
Copy the code