Css compatibility and css compatibility
Common browser kernel engines and specific applications:
Trident: IE; Gecko: Firefox; webkit: Safari, Google Chrome, travel 3, Cheetah, Baidu; Presto: Opera -- Opera mini
Writing Sequence: Firefox, IE8, IE7, IE6 IE6: *, _ IE7: *, + IE8: \ 9, \ 0 chrome:-webkit-firefox:-moz -, root (ff only)
- * And _, ie6 can be identified;
- * Ie6 and ie7 can be identified;
- ! Important, indicating a high priority. ie7 and above are supported by firefox. ie6 supports! Important style attributes, but do not know! The priority of important;
- -Webkit-kernel CSS for safari and chrome
- -Moz-: CSS for the firefox browser kernel
- -Ms-CSS for ie Kernel
- -O-: CSS for the Opera Kernel
If you only want ie6 to see it, use * html. head {color: #000 ;}
If only ie7 is visible, use * + html. head {color: #000 ;}
If only ff is visible, use: root body. head {color: #000 ;}
If only ff and IE8 are visible, use html>/**/body. head {color: #000 ;}
If you only want ie6 to be invisible, use html> body. head {color: #000;} to invalidate IE 6.
* Body. head {color: #000;} is invalid for ff and IE8.
.div1{*position:relative;-moz-background-size:50%;-ms-content-zoom-limit-max:50%;-o-box-shadow:5px10px20px#f0f;}.div2{position:absoulte!important;}
The first question is: the width of the div is a width: 300px; padding: 10px;
FirefoxThe actual width is 320px, and padding is filled in. Supported! Important, IE ignore
IE6The actual width is PX, And the padding is inside PX. The content is squeezed into it;
Minimum page width
IE does not recognize min-, but uses width as the minimum width. To make this command usable on IE, you can place <div> under the <body> label and specify a class for div. Then, CSS is designed as follows:
# 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 is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through Javascript judgment. Second: in IE, you only need to set body {text-align: center;} to center the display. Firefox cannot solve the problem: body: {text-align: center; margin: 0px auto;} third question: the BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px div {margin: 30px! Important; margin: 28px;} fourth question: CSS transparency IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
[Note] it is best to write both of them and put the opacity attribute below. Question 5: corner corners IE: corner corners are not supported in ie7 or earlier versions.
FF:-moz-border-radius: 4px
Browser bug
IE bilateral distance bug
The div set to float doubles the margin set in ie. This is a bug in ie6.
Solution: Add display: inline In the div;
FloatingDIV floating IE text produces 3 pixel bug
Float on the left side of the object. The left margin of the outer patch is used on the right side to locate the object. The text in the right side will be 3 px away from the left side. # box {float: left; width: 800px ;}
# Left {float: left; width: 50% ;}
# Right {width: 50% ;}
* Html # left {margin-right:-3px; // This sentence is critical}
<Div id = "box">
<Div id = "left"> </div>
<Div id = "right"> </div>
</Div>
Internet Explorer
When the div application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.
Layout private attribute of IEDo not set the height of the external wrapper div. To make the height automatically fit, add overflow: hidden to the wrapper. When the box contains float, the height auto-fit is invalid in IE. In this case, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility .. Colwrapper {overflow: hidden; zoom: 1; margin: 5px auto ;}
TypographicalThe most commonly used css description may be float: left. Sometimes we need to make a unified background behind the float div in the n column, for example: <div id = "page">
<Div id = "left"> </div>
<Div id = "center"> </div>
<Div id = "right"> </div>
</Div> we want to set the background of the page to Blue to make the background color of all three columns blue, but we will find that as the left center right is stretched down, the storage height of the page remains unchanged. The problem is that the page is not a float attribute. Because the page is centered, it cannot be set to float, therefore, we add a parent element page to him to become a grandfather;
Highly unsuitable
Height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses margin or paddign.
Example:
# Box {}
# Box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
<Div id = "box">
<P> content in the p object </p>
</Div>
Solution: Add two empty div objects to the upper and lower sides of the P object. CSS code:. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV.
Why is there a gap in the image under IE6?
There are also many tips to solve this BUG. You can change the html layout, set img to display: block, or set vertical-align to vertical-align: top bottom middle text-bottom can be solved.
Css bug of IEAfter spaces are added to p: first-letter and {font-size: 300%}, that is, p: first-letter {font-size: 300%}, the display is normal. But the same code is normal in FireFox. In principle, p: first-letter {font-size: 300%} is correct. So where is the problem? The answer is "-" in a pseudo-class "-". IE has a BUG. When dealing with pseudo-classes, if the pseudo-class name contains a hyphen (-), the pseudo-class name must be followed by a space. Otherwise, the style definition will be invalid. In FF, the processing can be done without spaces. If the div sets margin-left and margin-right to auto, it is already centered. If IE is not, you need to set the body to center. First, define text-algin: center in the parent element; this means that the content in the parent element is centered. Vertical center => line feed
A 30 PX div is displayed in the upper left corner by default. If you want to center vertically, you can add a line-height: 30px; style. Modify line-height if you want him to stay below
The larger the value, the more overflow: hidden;
Set three styles for block-level objects to solve the browser default value: width and height overfl
Tips for displaying excessive content in LI with ellipsis
This technique is applicable to IE and opbrowser.
Li {
Width: 200px;
White-space: nowrap;
Text-overflow: ellipsis;
-O-text-overflow: ellipsis;
Overflow: hidden;
}
Why cannot I set the color of the scroll bar for IE in web standards?
The solution is to change the body to html.
Html {
Scrollbar-face-color: # f6f6f6;
Scrollbar-highlight-color: # fff;
Scrollbar-shadow-color: # eeeeee;
Scrollbar-3dlight-color: # eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: # fff;
Scrollbar-darkshadow-color: # fff;
}
Why cannot I define a container with a height of 1 px?
In IE6, this problem is caused by the default Row height, and there are many solutions, such as overflow: hidden zoom: 0.08 line-height: 1px.
In css initialization, the margin attribute is valid for IE, And the padding attribute is valid for FireFox.
- Body, div, dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, form, input, p, th, td {margin: 0; padding: 0 ;}
- Img {border: 0px ;}
- Ul {margin: 0px; padding: 0px ;}/
- Ul li {list-style: none ;}
/* Clear Fix */
. Clearfix: after {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
. Clearfix {
Display: inline-block;
}
/* Hide from IE Mac */
. Clearfix {display: block ;}
/* End hide from IE Mac */
/* End of clearfix */
Alternatively, set. hackbox {display: table; // display the object as a table at the block element level}
Too much reference: http://www.jb51.net/css/43686.html
