May 04, 2021 CSS
1. The basic concept of css hack
2. How Hack is written under each browser
4. The browser recognizes the corresponding table for the character standard
When writing CSS style, I am afraid the biggest headache is the compatibility problem under each browser, that is, CSS hack, different browsers to CSS resolution results are different, resulting in the same CSS output of different page effects, which requires CSS hack to solve the browser local compatibility problems. Using CSS, hack will use your CSS code part to lose its function, and then use the conditional style to parse the original CSS code in some browsers, while the CSS hack code replaces the original CSS part of the code in a browser that meets the requirements.
In addition to handling CSS code that is not compatible with the browser, CSS hack allows us to customize different versions of the browser to write different CSS effects through CSS hack.
*
can recognize underscores
*
and asterisks, IE7 can recognize asterisks, but can not recognize underscores, and firefox neither can recognize.
_
_
PS: Conditional comments can only be executed under the IE browser, and this code is turned a blind eye to comments under non-IE browsing.
Different CSS, JS, HTML, server codes can be loaded with IE conditional comments, and so on.
Tip: There are three common forms of CSS hack for more explanations, and you can refer to the "CSS hack collection" section of CSS3 Learning Notes.
10, IE6 browser
Selector {_property/**/:/**/value; O
r: Selector : _property: value; O
r: s html Selector sproperty: value; }
The application is as follows:
.demo {_width/**/:/**/100px; O
r: .demo . . . _width: 100px; O
r: .html .demo .width: 100px; }
The above describes how to identify various Hack writes under various versions of the browser, including IE6-9 and modern versions of browser writing. T
aken together, the Hack write for different browsers is divided into two different Hack writes from CSS selectors and CSS properties.
.css-hack {
Color: Red; / * Other browsers display red * /
Color: Blue \ 0; / * IE8, IE9 Display blue * /
+ Color: Green; / * IE7 Display Green * /
_COLOR: brown; / * IE6 shows brown * /
}
.css-hack {
Color: Red; / * Other browsers display red * /
Color: Blue \ 0; / * IE8, IE9 Display blue * /
}
<! - [i! ip]> <! -> Except for IE, you can identify <! - <! [endif] ->
<! - [i i i]> All IE recognizes <! [endif] ->
<! - [i i e 6]> IE6 can be identified <! [endif] ->
<! - [i i i i 6]> IE6 and IE6 below can be identified <! [endif] ->
<! - [if gte ie 6]> IE6 and IE6 or above can be identified <! [endif] ->
<! - [i i 7]> IE7 can be identified <! [endif] ->
<! - [i [i i 7]> IE7 and IE7 below can be identified <! [endif] ->
<! - [if gte IE 7]> IE7 and IE7 or above can be identified <! [endif] ->
<! - [i i ie 8]> IE8 can be identified <! [endif] ->
<! - [IF IE 9]> IE9 can be identified <! [endif] ->
The following can be analyzed from the table above:
1. Most special characters IE browser support, other mainstream browsers firefox, chrome, opera, safari does not support (except opera recognizable).
2. s9: All IE browsers are supported
3. and - : IE6 only
4. : IE6, E7 support
5. : IE8, IE9 support, opera partial support
6. .9-0: IE8 partial support, IE9 support
7. Support for IE8, IE9
Now write a CSS that can do this:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
Then the font color under firefox is displayed as s333, the font color under IE6 is shown as #666, and the font color under IE7 is shown as s999.
Centering issues in the CSS layout
The main style definitions are as follows:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
Description:
First define
text-align: center
This means that the content within the parent element is centered;
But it can't be centered in mozilla. T
he solution is to add margin-right: auto when the child
margin-right: auto;margin-left: auto;
It should be noted that if you want to center the entire page in this way, it is recommended not to put it in a DIV, you can split multiple divs in turn,
Just define
margin-right: auto;margin-left: auto;
That's it.
The box model is interpreted differently
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
Floating IE produces double the distance
#box {float: Left; width: 100px; margin: 0 0 0 0 100px; // This situation IE will generate 200PX distance
display:inline;
/ / Ignore floating}
Here's a closer look
block
inline two
inline
Block
element is characterized by: always start on a new line, height, width, line height, margin can be controlled (block element);
Inline
are characterized by the fact that they are on the same line as ,...
Uncontable (embedded elements);
#box{ display:block; Y ou can simulate an embedded element as a block element display:inline; Effect diplay:table that achieves the same line arrangement;
IE does not recognize the definition of min-, but in practice it
width
and
height
as if there
min
conditions. T
his is a big problem, if only width and height, the normal browser these two values will not change,
min-width
min-height
IE is simply equal to no set width and height. F
or 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;}
min-width
a very convenient CSS command that specifies that the element is smallest or less than a certain width, so that typography is always correct. B
ut IE doesn't recognize this,
and it actually makes
width
the minimum width.
To make this command work on IE, you can put a
<div>
<body>
specify a class for div:
CSS then designs it this way:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
The first
min-width
but the second line
width
uses JavaScript, which is recognized only by IE, which also makes your HTML documents less formal.
It actually achieves the minimum width through Javascript's judgment.
Clear the float
.HACKBOX {Display: table; // Display the object as a block element level table display} or .hackbox {clean: Both;}
Or
:after
which sets what happens after the
content
which is not supported by IE, and not supported by the IE browser.
So it doesn't affect the IE/WIN browser. This kind of most troublesome...
#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
p[id]{}div[id]{}
This is hidden for versions below IE6.0 and IE6.0, FF and OPera act property selectors and sub-selectors are still different, the range of sub-selectors is reduced in form, the range of
p[id]
p
id
the same.
IE hide-and-seek issues
When div application is complex, there are links in each column, DIV and so on at this time prone to hide-and-seek problems. Some content does not appear when the mouse selects this area is found to be indeed on the page.
Solution: Use
#layout
line-height
for #layout
#layout
fixed height and width. T
he page structure is as simple as possible.
The height is not suitable
Height inotro fit is when the height of the inner object changes, the outer height cannot be adjusted automatically, especially when the inner object is used
margin
or
paddign
Cases:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
Workaround: Add 2 empty div object CSS codes to each of the P objects: .1 (height:0px; overflow:hidden; Or add the border property to the DIV.