Home > Article > Web Front-end > div css compatibility issues learning summary_html/css_WEB-ITnose
div css compatibility issues learning summary_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:31:011061browse
hack model
firefox ie7 ie6
left: *left: _left:
Note: IE can recognize *; standard readers (such as FF) cannot recognize *;
IE6 can recognize *, but not !important, ballet shoes,
IE7 can recognize *, but it can also recognize !important;
FF cannot recognize *, but it can recognize !important; IE6 IE7 FF
IE6 supports the underscore "_", but neither IE7 nor Firefox supports the underscore.
!important priority
margin-left:20px !important;
margin-left:10px;
ie7 gives priority to the first item, and ie6 does not support priority, so the first item is ignored , click the second item to display.
IE8 web design CSS compatibility
Other compatibility skills (troublesome again)
1. Setting padding on a div 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. Set line-height to the same height as the subsequent div, and then pass vertical-align: middle. (Note that the content does not need to be wrapped.)
2). Horizontal center. margin: 0 auto; (of course not universal)
3, if you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags)
4, FF and The difference in IE's understanding of BOX leads to a 2px difference and problems such as double margins of divs set to float under IE.
5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance, with Avoid unnecessary trouble. (common in navigation tags and content lists)
6, Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve height adaptability.
7, About hand-shaped light. cursor: pointer. And hand is only applicable to IE.
Other compatibility skills
1 For the css style of firefox ie6 ie7
Nowadays, most of them use !important to hack, about The ie6 and firefox tests can display normally,
but ie7 can accurately explain !important, which will cause the page to be displayed out of click! Found a clue
A good hack method for IE7 is to use "* html". Now use IE7 to try it, and there should be no problem.
Now you can write a CSS like this:
#1 { color: #333; }
* html #1 { color: #666; }
* html #1 { color: # 999; }
Then the font color is displayed as #333 under Firefox, #666 under IE6, and #999 under IE7.
2 IC transaction network centering problem in css layout
The important style definitions are as follows:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
Explanation:
First define TEXT-ALIGN: center in the female element; the meaning of this is to center the content in the female element; this setting is enough for IE That's it.
But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when setting the sub-element definition time
It should be noted that if you want to use this method to center the entire page, it is recommended Don't wrap it in one DIV. You can create several divs in sequence.
Just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each div. That's it.
3 Different descriptions of box models.
#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 interval for IC trading network floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a 200px gap display:inline; //Make the float invisible}
Let’s talk about the two elements block and inline in detail. The characteristics of the Block element 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: and other The elements are on the same line, Xinwang Technology,... cannot be controlled (inline elements);
#box{ display:block; //Inline elements can be simulated as block elements display:inline; //The result of achieving the same arrangement diplay:table;
5 IE takes the width and height of the answer
IE does not recognize the definition of min-, but in fact it takes the general Width and height should be used with min in mind. This answer is too big. If you only use width and height,
these two values will not change in ordinary browsers. If you only use min-width and min-height, there will be no change in IE. Set width and height.
For example, if you want to set a negative 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;}
Minimum width in 6 pages
min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be less than a certain width, so as to ensure continuous accurate typesetting. But IE doesn’t recognize this,
But it actually uses the width as the minimum width. In order to make this command work on IE, you can put a
Then the CSS is designed like this:
#container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? "600px": "auto" );}
The first min-width is normal; but the width in line 2 is used Javascript is only recognized by IE, which will also make your HTML white document less formal. It actually achieves the minimum width through Javascript's judgment.
7 Clear floats
.hackbox{ display:table; //Display the object as a block-level table} or .hackbox{ clear:both;}
Maybe Add: after (pseudo object), set the content generated 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. This type of the most troublesome...#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV floating IE A three-dimensional bug occurred in Baiyuan
The object on the right is floating, and the right side is positioned using the right margin of the outer patch. The Baiyuan within the right object will be 3px away from the right.
#box { float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //This sentence is the key }
HTML code
9 Attribute selector (this is not considered compatible, it is a bug hidden in CSS)
p[id]{}div[id]{}
This is about IE6.0 It is hidden in versions below IE6.0. FF and OPera functions
There is still a difference between attribute selector and sub-selector. The scope of sub-selector is reduced due to form, while the scope of attribute selector is relatively large. , such as p[id], all p tags with ids are the same.
10 IE hide-and-seek questions
When the div is used in a complex way, each column There are some links, DIVs, etc. At this time, it is easy to cause hide-and-seek problems.
Some content cannot be displayed. When the mouse selects this area, it will be found that the content is actually on the page.
Solution: Use line-height attribute for #layout or use fluid height and width for #layout. The page structure is extremely simple.
11 Height non-adaptation
Height non-adaptation means that when the height of the inner object changes, the height of the outer layer cannot be automatically adjusted, especially if the inner object uses
margin Or padding.
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 div objects above and below the P object CSS code: .1{ height:0px;overflow:hidden;} Perhaps add the border attribute to the DIV. Related topic articles: