Compilation of CSS compatibility tips for IE and Firefox browsers

Author：Eve Cole Update Time：2010-08-18 17:35:15

CSS Compatibility Common Tips

Please try to write code in xhtml format, and DOCTYPE affects CSS processing. As a W3C standard, a DOCTYPE statement must be added.

1.Vertical centering problem of div

vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert the text and it will be vertically centered. The disadvantage is that you need to control the content and not wrap it in another line.

2. The problem of doubling margin

The margin set for a div set to float will be doubled under IE. This is a bug that exists in ie6. The solution is to add display:inline; inside this div.

For example:

<#div id=”imfloat”>
The corresponding css is #imfloat{
float:left;
margin:5px;/*Under IE, it is understood as 10px*/
display:inline;/*Under IE, it will be understood as 5px*/}

3. Double distance generated by floating ie

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}

Let’s talk about the two elements block and inline in detail: The characteristic of the block element is that it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristic of the inline element is that, and other The elements are on the same line and cannot be controlled (inline elements);

#box{ display:block; //You can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

4 IE problems with width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is a min. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE.

For example, if you want to set a 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;}

5. Minimum width of page

min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be smaller than a certain width, so that the layout can always be correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command also available on IE, you can put a <div> under the <body> tag, then specify a class for the div, and then design the CSS like this:

#container{ min-width: 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}

The first min-width is normal; but the width in the second line uses javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

6. DIV floating IE text produces a 3-pixel bug

The object on the left is floated, and the right is positioned using the left margin of the outer patch. The text within the object on the right will be spaced 3px 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>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IE hide-and-seek problem

When the div application is complex, there are some links in each column, and hide-and-seek problems can easily occur in DIVs.

Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page. Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

8. Float div is closed; clear float; adaptive height

①For example: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >The NOTfloatC here does not want to continue to translate, but wants to be arranged downwards. (The properties of floatA and floatB have been set to float:left;)

This code works fine in IE, the problem is in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed. Add <#div class="clear"> between <#div class="floatB"> <#div class="NOTfloatC">. This div must pay attention to its position, and it must be the same as the two divs with float attributes. There cannot be a nested relationship between levels, otherwise an exception will occur. And define the clear style as follows: .clear{ clear:both;}

② Do not set the height of the div as an external wrapper. In order to allow the height to automatically adapt, add overflow:hidden in the wrapper; when it contains a float box, the automatic height adaptation is invalid under IE. At this time, IE should be triggered. The layout private attribute (the evil IE!) can be done using zoom:1;, thus achieving compatibility.
For example, a wrapper is defined as follows:

.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③For typesetting, the CSS description we use most is probably float:left. Sometimes we need to make a unified background behind the float div in column n, for example:

For example, we want to set the background of the page to blue so that the background color of all three columns is blue. However, we will find that as the left center right stretches downward, the page actually retains the same height. The problem arises. The reason is that page is not a float attribute, and our page cannot be set to float because it needs to be centered, so we should solve it like this

The solution is to embed a float left DIV with a width of 100%.

④Universal float closure (very important!)

For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]. Add the following code to Global CSS and add class="clearfix" to the div that needs to be closed. It works every time.

/* 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 */

Or set it like this: .hackbox{ display:table; //Display the object as a block element-level table}

9. The height cannot be adjusted

The non-adaptive height means that the outer height cannot automatically adjust when the height of the inner object changes, especially when the inner object uses margin or paddign.

example:

#box {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
<div id="box">
<p>Contents in p object</p>
</div>

Solution: Add two empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.

10.Why are there gaps under the pictures under IE6?

There are many techniques to solve this BUG. You can change the layout of the html, or set the img to display:block or set the vertical-align attribute to vertical-align:top.

bottom middle text-bottom can all be solved.

11. How to align text with text input box

Add vertical-align:middle;

12.Is there any difference between id and class defined in web standards?

(1). Web standards do not allow repeated IDs. For example, div id="aa" is not allowed to be repeated twice, and class defines a class. In theory, it can be repeated infinitely, so that definitions that require multiple references can be used. he.

(2).Priority issue of attributes

The priority of ID is higher than class, see the above example

(3). It is convenient for client scripts such as JS. If you want to perform script operations on an object in the page, you can define an ID for it. Otherwise, you can only find it by traversing the page elements and specifying specific attributes. This is It is a relatively waste of time and resources, but far less simple than an ID.

13. Tips for displaying the content in LI with ellipses after it exceeds the length

This technique is applicable to IE and OP browsers

-->
</style>

14. Why can’t IE set the scroll bar color according to web standards?

The solution is to replace the body with html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

＜/style>

15. Why can’t I define a container with a height of about 1px?

This problem under IE6 is caused by the default row height, and there are many solving techniques, such as:
overflow:hidden zoom:0.08 line-height:1px

16. How to make the layer display on Flash?

The solution is to set transparency for FLASH

17. How to vertically center a layer in the browser

Here we use percentage absolute positioning, and the technique of using negative values outside the patch. The size of the negative value is its own width and height divided by two.

CSS Compatibility Tips for Firefox and IE

1. Div centering problem

The div is already centered when margin-left and margin-right are set to auto. This does not work with IE. IE needs to set the body to be centered. First define text-algin: center in the parent element; this means that the content within the parent element is centered.

2. The border and background of the link (a tag)

To add a border and background color to a link, you need to set display: block and float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.

3. The problem that the hover style does not appear after the hyperlink is accessed

The hyperlink style that has been clicked and visited no longer has hover and active. Many people must have encountered this problem. The solution is to change the order of CSS attributes: LVHA

Code:

4. Cursor finger cursor

cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be displayed in IE

5.UL’s padding and margin

The ul tag has a padding value by default in FF, but in IE only margin has a value by default, so defining ul{margin:0;padding:0;} first can solve most problems.

6. FORM tag

This label will automatically have some margins in IE, while in FF the margin is 0. Therefore, if you want to display it consistently, it is best to specify margin and padding in css. To address the above two problems, my css In general, the style ul, form{margin:0;padding:0;} is defined first, so you won't have to worry about this later.

7. BOX model explanation inconsistency problem

The BOX model interpretation in FF and IE is inconsistent, resulting in a 2px difference. Solution tips: div{margin:30px!important;margin:28px;} Note that the order of the two margins must not be reversed. IE cannot recognize the important attribute, but do not browsers can recognize it. So under IE it is actually interpreted like this:

If div{maring:30px;margin:28px} is repeatedly defined, the last one will be executed, so you cannot just write margin:xx px!important;#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-}

8. Attribute selector (this cannot be considered compatible, it is a bug in hiding css)

p[id]{}div[id]{}

This is hidden for IE6.0 and versions below IE6.0, and works in FF and Opera. There is still a difference between attribute selectors and sub-selectors. The scope of sub-selectors is reduced in form, while the scope of attribute selectors is relatively large. , such as p[id], all p tags with id are of the same style.

9.The most ruthless means - !important

If there is really no way to solve some detailed problems, you can use this technique. FF will automatically parse "!important" first, but IE will ignore it. As follows

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

It is worth noting that the xxxx !important sentence must be placed above another sentence.

10. Default value problem of IE and FF

Maybe you have been complaining about why you have to write different CSS specifically for IE and FF, why IE is such a headache, and then while writing CSS, you curse that damn M$ IE. In fact, IE does not have the standard support for CSS that we do It’s as disgusting as you imagine, but the key is that the default values of IE and FF are different. Once you master this technique, you will find that it is not that difficult to write CSS that is compatible with FF and IE. Maybe for simple CSS, you don’t need it at all”! important".

We all know that when a browser displays a web page, it will decide how to display it based on the css style sheet of the web page, but we may not necessarily describe all the elements in detail in the style sheet, and of course there is no need to do that. So for those attributes that are not described, the browser will use the built-in default method to display, such as text. If you do not specify a color in css, the browser will use black or system color to display the background of div or other elements. , if it is not specified in css, the browser will set it to white or transparent, and so on for other undefined styles. Therefore, the fundamental reason why many things are displayed differently between FF and IE is that their default displays are different. As for how this default style should be displayed, I know if there are corresponding standards in w3 to stipulate it, so there is no need to comment on this point. Blame IE.

11. Why can’t the text in FF expand the height of the container?

Containers with fixed height values in standard browsers will not be stretched like in IE6. So if I want to have a fixed height and be stretched, what settings should I make? The solution is to remove the height and set min-height:200px; here, in order to take care of IE6 who does not know min-height, it can be defined like this:

{
height:auto!important;
height:200px;
min-height:200px;
}

12.How to make continuous long fields automatically wrap in FireFox

As we all know, in IE, you can directly use Word-wrap:break-word. In FF, we use the JS insertion technique to solve the problem.

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=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("ff", 37);
/* ]]> */
</scrīpt>

13. Why is the width of the container under IE6 different from that in FF?

The difference in the problem is whether the overall width of the container includes the width of the border. Here IE6 interprets it as 200PX, while FF interprets it as 220PX. So what exactly causes the problem? If you remove the xml at the top of the container, you will find that the original problem lies here. The statement at the top triggers IE's qurks mode.

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
<div ōnclick="alert(this.offsetWidth)">Make FireFox compatible with IE</div>

There are new problems with IE7.0's support for CSS, which are solved as follows.

The first type, CSS HACK

Bpx; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

Pay attention to the order.

The following is also a CSS HACK, but it is not as simple as the above.

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

The second is to use IE-specific conditional comments

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

The third method is the css filter method. The following is translated from foreign websites.

Create a new css style as follows:

#item {
width: 200px;
height: 200px;
background: red;
}

Create a new div and use the CSS style defined earlier:

Add the lang attribute here in the body performance, the Chinese is zh:

Now define another style for the div element:

*:lang(en) #item{
background:green !important;
}

This is done to overwrite the original css style with !important. Since the :lang selector is not supported by IE7.0, it will not have any effect on this sentence. Therefore, the same effect under IE6.0 is achieved, but it is very difficult. Unfortunately, Safari also does not support this attribute, so you need to add the following CSS style:

#item:empty {
background: green !important
}

The :empty selector is a CSS3 specification. Although Safari does not support this specification, this element will still be selected. Regardless of whether this element exists, green will now appear on browsers other than IE versions.

For compatibility with IE6 and FF, you can consider the previous !important. Personally, I prefer the first one, which is simple and has better compatibility.