Common browser kernel engines and specific applications:
Trident:ie;Gecko:firefox;webkit:safari,google Chrome, roaming 3, Cheetah, Baidu;Presto:opera--opera Mini
Writing Order: Firefox,ie8,ie7,ie6 ie6:*,_ie7:*,+ie8:\9,\0 chrome:-webkit-firefox:-moz-,root (FF only)
- *  , IE6,IE7 can be identified,
- _ and- , ie6 can be recognized;
!important , high priority, IE7 and above, Firefox support, IE6 recognize style attributes with!important, but do not know the priority of!important;
- -webkit-, the kernel CSS notation for safari,chrome browsers
- -moz-, the kernel CSS syntax for Firefox browsers
- -ms-, CSS syntax for IE kernel
- -o-, CSS notation for the opera kernel
If only let IE6 see with *html. Head{color: #000;}
If only let IE7 see with *+html. Head{color: #000;}
If only let FF see with: root body. Head{color: #000;}
If only let FF, IE8 see with html>/**/body. Head{color: #000;}
If just don't let IE6 see with html>body. Head{color: #000;} is not valid for IE 6
If just don't let FF, IE8 see with *body. Head{color: #000;} Which is invalid for FF, IE8
.div1{*position:relative;-moz-background-size:50%;-ms-content-zoom-limit-max:50%;-o-box-shadow:5px10px20px#f0f;}.div2{position:absoulte!important;}
First question: Width problem gives Div a width:300px;padding:10px;
FirefoxThe actual width of the 320px,padding is filled up; Support! Important,ie Ignore
IE6The actual width of the 300px,padding is 300px inside, the content into the inside squeeze;
minimum width of the page
IE does not recognize min-, and it actually puts width as the minimum width. In order for this command to work on IE, you can put a <div> into the <body> tab, then specify a class for the Div, and then the 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 by JavaScript's judgment. Second question: The horizontal center problem ie just set body{text-align:center;} This will allow you to center the display. Firefox does not solve: body:{text-align:center;margin:0px auto; Third question: The box model in Mozilla Firefox and IE does not explain inconsistencies resulting in 2px div{margin:30 px!important;margin:28px;} Question four: CSS transparency problem IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
[note] It is best to write all two, and put the opacity attribute below. Q: Fillet problem ie:ie7 The following versions do not support fillets.
FF:-moz-border-radius:4px
Browser Bug
ie double-sided bug
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.
Solution: Add display:inline to this div;
FloatingDiv floating IE text generates 3 pixel bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left. #box {float:left; width:800px;}
#left {float:left; width:50%;}
#right {width:50%;}
*html #left {margin-right:-3px;//This sentence is the key}
<div id= "box" >
<div id= "left" ></div>
<div id= "right" ></div>
</div>
ie hide and seek problem
When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems.
Some content does not show up when the mouse selects this area is found content is indeed on the page. WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
layout private properties of IEAs an external wrapper div do not set dead height, in order to let the height can automatically adapt to the wrapper inside add Overflow:hidden; When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with Zoom:1, you can do so to achieve compatibility: colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}
TypesettingThe CSS description We use most probably is float:left. Sometimes we need to do a uniform 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're going to set the page's background to blue so that the background color of all three columns is blue, but we'll find that as the left center is stretched downward, and the page actually holds the height unchanged, the problem is, The reason is that the page is not a float property, and our page is centered and cannot be set to float, so we add a parent element page to grandpa;
Height not adapted
Height intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign.
Cases:
#box {}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
<div id= "box" >
Content in the <p>p object </p>
</div>
Solution Tip: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.
Why is there a gap in the picture under the IE6?
There are many tricks to solve this bug, either to change the layout of the HTML, or to set the IMG to Display:block or set the Vertical-align property to Vertical-align:top Bottom middle Text-bottom can all be solved.
IE's CSS bugThe display is normal after P:first-letter and {font-size:300%} are added with spaces, that is, P:first-letter {font-size:300%}. But the same code, in Firefox, looks normal. According to the truth, p:first-letter{font-size:300%} is the correct way to do that. So where does the problem go? The answer is the hyphen "-" in the pseudo-class. IE has a bug, when dealing with pseudo-classes, if the name of the pseudo-class with a hyphen "-", the Pseudo-class name followed by a space, or the definition of the style is invalid. In the FF, the addition of spaces can be handled normally. Div set Margin-left, margin-right for Auto is already centered, ie not, ie need to set the body center, first in the parent element definition text-algin:center; This means that the content within the parent element is centered. Vertical Center = Content Wrap Problem
A high 30px div, which displays the upper left corner by default, and if you want to center it vertically, add a line-height:30px; If you want him to be in the bottom, modify Line-height.
The larger the value, the more the lower, in order to prevent bursting, but also need to give a style overflow:hidden;
Block-level objects set three styles to resolve browser defaults: Width-Height overflow
Tips for displaying an ellipsis after the content in Li is longer than the length
This tip works with IE and op browser
Li {
width:200px;
White-space:nowrap;
Text-overflow:ellipsis;
-o-text-overflow:ellipsis;
Overflow:hidden;
}
Why IE can't set the scroll bar color in Web Standard
The solution is to replace body with 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 can't I define a container with around 1px height?
IE6 This problem is due to the default row height, there are many techniques to solve, such as: Overflow:hidden zoom:0.08 line-height:1px
CSS initialization where the margin property is valid for IE, the Padding property 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 block-element-level table}
Too much. Reference: http://www.jb51.net/css/43686.html
CSS compatibility notation Daquan
