Difference IE6 with FF:
Background:orange;*background:blue;
Distinction between IE6 and IE7:
Background:green!important;background:blue;
Difference IE7 with FF:
Background:orange; *background:green;
Difference ff,ie7,ie6:
Background:orange;*background:green!important;*background:blue;
IE7,IE8 Compatibility:
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>
Head
1. CSS in several browsers to support different keywords, browser compatibility can be repeated definition
!important can be identified by Firefox and IE7
* Can be IE6, IE7 recognition
_ can be IE6 recognized
*+ can be identified by IE7
2. IE Special condition annotation
<!--other browsers-->
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
<!--[if IE 7]>
<!--suitable for IE7-->
<link rel= "stylesheet" type= "Text/css" href= "Ie7.css"/>
<! [endif]-->
<!--[If LTE IE 6]>
<!--suitable for IE6 and-->
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]-->
3. Several browsers to the actual pixel interpretation
Ie/opera: The actual width of the object = (margin-left) + width + (margin-right)
Firefox/mozilla: The actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-w Idth) + (margin-right)
4. Mouse gesture problem: Firefox cursor properties do not support hand, but support Pointer,ie two are supported; so to be compatible with pointer
5. Firefox to set the HTML tag style property, all position, width and dimension values must be followed by Px,ie also support this wording, so unified plus PX units. such as Obj.Style.Height = ImgObj.Style.Height + ' px ';
6. Firefox is unable to resolve the abbreviated padding property settings, such as padding 5px 4px 3px 1px; it must be changed to padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;
7. Eliminate the UL, OL and other lists of indentation, the style should be written: list-style:none;margin:0px;padding:0px; margin property to ie effective, padding attribute to Firefox effective
8. CSS Control transparent: IE:filter:progid:DXImageTransform.Microsoft.Alpha (STYLE=0,OPACITY=60); firefox:opacity:0.6;
9. CSS control fillet: IE: Does not support rounded corners;
FireFox:-moz-border-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
CSS double-line concave-convex border: ie:border:2px outset;
FireFox:
-moz-border-top-colors: #d4d0c8 White;
-moz-border-left-colors: #d4d0c8 White;
-moz-border-right-colors: #404040 #808080;
-moz-border-bottom-colors: #404040 #808080;
IE supports CSS method Cursor:url () custom cursor style file and scroll bar color style; Firefox does not support either of the above
IE has a select control that is always at the top of the bug, and all CSS has no effect on the Select control
IE supports label labels in form, including pictures and text content; Firefox does not support labels that contain pictures, and clicking on a picture does not allow the radio or checkbox of the labeled label for effect
TextArea in Firefox does not support Onscroll events
Firefox does not support display's inline and block
Firefox on the div set margin-left, margin-right for Auto is already centered, ie not in
Firefox on the body set text-align, Div need to set Margin:auto (mainly Margin-left margin-right) square can be centered
18. CSS style settings for hyperlinks are best observed in this order: L-v-h-a. That
<style type= "Text/css" >
<!--
A:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
This avoids the hover and active styles of some hyperlinks that have been accessed.
In IE, set a long paragraph line in the CSS set Word-wrap:break-word;firefox in the use of JS Insert method to implement, the specific code is as follows:
<script type= "Text/javascript" >
/* <! [cdata[* *
function Tobreakword (el, Intlen) {
var Obj=document.getelementbyid (EL);
var strcontent=obj.innerhtml;
var strtemp= "";
while (Strcontent.length>intlen) {
Strtemp+=strcontent.substr (0,intlen) + "";
Strcontent=strcontent.substr (intlen,strcontent.length);
}
strtemp+= "" +strcontent;
Obj.innerhtml=strtemp;
}
if (document.getElementById &&!document.all) Tobreakword ("div_id", 37);
*]]> * *
</script>
20. When a child container is added with a floating property, the container will not be automatically stretched
Workaround: Add a floating CSS Clear:both to the next tag after the end of the tag;
21. After floating IE6 explain the outer margin is the actual margin double
Solution: Add Display:inline
There's a gap underneath the picture under the IE6.
Workaround: Add Display:block for IMG or set vertical-align property to Vertical-align:top | Bottom |middle |text-bottom
There is a gap between the two layers under IE6.
Workaround: Set right div also floating float:left or relative IE6 definition margin-right:-3px;
Display method of ellipsis after content exceeds length in Li
<style type= "Text/css" >
<!--
Li {
width:200px;
White-space:nowrap;
Text-overflow:ellipsis;
-o-text-overflow:ellipsis;
Overflow:hidden;
}
-->
</style>
25. You can center the text vertically by setting the height and row height of the element to the same value
<style type= "Text/css" >
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>
26. Text input box, must add Vertical-align:middle in CSS; property settings
<style type= "Text/css" >
<!--
... ...
Vertical-align:middle;
}
-->
</style>
27. Browsers that support Web standards set a fixed height value will not be as open as IE6, but want to set a fixed height and want to be able to be stretched? The solution is to remove the height attribute and set the Min-height, To be compatible with IE6 that do not support min-height, you can define this:
{
Height:auto!important;
height:200px;
min-height:200px;
}
IE cannot set the scroll bar color in web standards
Workaround: In CSS, change the body settings to HTML
<style type= "Text/css" >
<!--
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;
}
-->
</style>
IE6 because the default row height problem cannot define a container of about 1px height,
WORKAROUND: Set the container in CSS: Overflow:hidden | zoom:0.08 | line-height:1px
30. Set transparent properties to flash to enable layers to appear above flash
<param name= "wmode" value= "Transparent"/> <!--solve IE problems//>
<embed wmode= "Transparent" ... > <!--solve the problem of Firefox//>
Firefox set the Padding property will increase the width and Height property values, ie will not
Solution: Use the!important method to define a set of height and width
Firefox to div and div between the space is ignored, but IE is handled, so try to be in between two consecutive div without space and carriage return, otherwise may cause different browsers between the wrong format, such as the famous 3px deviation; and the reason is difficult to find out
33. Form as follows
<div id= "Parent" >
<div id= "Content" > </div>
</div>
When content contents for a long time, even if the parent set a height of 100% or auto, in different browsers or can not be intact automatic extension; the solution is to create a space at the bottom of the layer with a height of 1, the code below
<div id= "Parent" >
<div id= "Content" > </div>
<div style= "font:0px/0px sans-serif;clear:both;display:block" > </div>
</div>
IE and Firefox differ in the size of the font small, Firefox is 16px in 13px,ie
IE and Firefox differ in the size of the spaces, and Firefox is 8px in 4px,ie.
First of all, on the CSS hack methods on the internet there are many introductions, a wide range of beginners often feel very confused. This kind of CSS hack methods, some for a very special situation of the method, and some is relative to some of the more general methods.
For the latter we in the ordinary study work, can pay more attention to collect some, the former does not need to be too concerned about, just encounter the time to search the Internet, look for solutions.
Here's a more general hack method, for example, for a property in CSS, we want to set different values for different browsers. For example, a div, we want to be 50 pixels wide in Firefox, and 60 pixels in IE. So how does it happen? Please see the following code:
#demo div{
width:50px; * FireFox Effective * *
+width:60px; /* IE Effective *
}
In the above code, line 2nd of the width:50px This is the Normal style, the next line, the width property in front of a plus, this style in Firefox is considered invalid, but in IE, the plus will be ignored, so still be understood as the width property, This overrides the previous setting so that you can distinguish between Firefox browsers and IE browsers.
So what if you want to differentiate between IE 6 and IE 7? Please see the following code:
#demo div{
width:50px; * FireFox Effective * *
+width:60px; /* IE 7 Effective * *
_width:70px; /* IE 6 Effective * *
}
The code above can make a distinction between three browsers. In IE7, the attribute is previously marked with a plus sign, and the plus sign is ignored, and if you add an underscore before the attribute, the entire style is ignored, thus making the distinction between the three main browsers.
Here, we naturally think, under what circumstances will use this method to distinguish the browser? The page we're going to make usually has two kinds of situations, one that is done completely from the beginning and the other is modified or patched based on an existing Web page.
In the first case, we are very clear about every detail of the Web page, so we do not often encounter very firefox and IE compatibility issues, even if encountered, generally can find other ways to solve. And for the second case, is much more complicated, because a Web page can be very complex, cascade relationship is also very complex, for people who take over, it is difficult to figure out how many of the attributes on the top of the set will have an impact on him, so often only use the "plaster" way to repair.
For example, such as the bottom of a page of the final effect, in the production of rounded corners, in ie, rounded corners on the neat, in Firefox but appear as shown in the dislocation, and if the following Firefox adjustment, in IE will appear dislocation.
The content layer of the page is nested, it is difficult to find the root of the problem without knowing the details. So it's convenient to use patches here (although not the most elegant and perfect method), for example, to control the position of the fillet image using the above method, respectively.
In general, you can use the plus or underline method for any attribute to implement the individual settings for different browsers. Of course, finally, it is pointed out that any hack method should be used cautiously, it is best to be able to follow the standard, elegant CSS to design, such code readability, maintenance is much better, but also our pursuit of the goal.
Why DIV+CSS in IE6 no problem, there is a problem in firfox, serious aliasing, what reason, thank you
The larger difference between IE and FF is 1. IE displays a maximum of 1002PX FF display 1005PX2 at 1024 resolution. IE fault-tolerant super strong means that you write the wrong code less write may also show the correct FF can not ~ ~ ~ ' General novice often appear problems: not clear floating ~~~~.clear{clear:both; height:1px; top:-1px; overflow: Hidden} Adds a <div class= "clear" after each float ><div>
