CSS Browser compatible

Last Update:2014-08-18 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS Browser compatibility knowledge rollup CSS Tips 1.div vertical centering problem

Vertical-align:middle;

Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to wrap.

2.margin double the problem

Problem Description: A div set to float doubles in the margin set by IE. This is a bug that exists in a IE6.

Solution: Add display:inline to this div;

Example explanation: <div id= "Imfloat" ></div>

The corresponding CSS is:

#IamFloat
{
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie to understand the 5px*/
}3. Double distance generated by floating ie #box {
Float:left;
width:100px;
margin:0 0 0 100px; In this case, IE will produce 200px distance
Display:inline; Make floating Ignore
}

Here's a look at the block and inline two elements:

The block element is characterized by always starting on new lines, height, width, row height, and margins can be controlled (block elements);

The inline element is characterized by an uncontrolled (inline element) on the same line as the other elements;

#box {
Display:block; You can simulate an inline element as a block element
Display:inline; Effect of implementing the same row arrangement
diplay:table;
}4.ie problems with width and height

IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.

For example, to set the background image, this width is more important. To solve this problem, you can:

#box {
width:80px;
height:35px;
}

Html>body #box {
Width:auto;
Height:auto;
min-width:80px;
min-height:35px;
}5. Minimum width of the page

Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, 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:e-xpression (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.

6.DIV 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; That's the key.
}

7.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 the Line-height property for #layout or use fixed height and width for #layout. The page structure is as simple as possible.

8.float Div closed; clear floating; self-adapting height;

① For example:

The NOTFLOATC here do not want to continue panning, but want to go down the line. (where the properties of Floata and FLOATB have been set to float:left;) This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In <div id= "Floata" ><div id= "NOTFLOATC" > Add <div class= "clear" > this div must pay attention to the position, And there must be no nested relationship with the two Div siblings with the float attribute, otherwise an exception will occur. And the clear style is defined as follows:. clear{Clear:both;}

② as an external Wrappe 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, can be done, so that the compatibility is achieved.
For example a certain wrapper is defined as follows:

. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;} 9. For typesetting

The 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:

For example, we want to set the page's background to blue, so that all three columns of the background color is blue, but we will find that as the left,center,right is stretched downward, and the page actually saves the height unchanged, the problem is because the page is not a float property, And our page is to be centered, cannot be set to float, so we should solve

Then embed a float left and the width is 100% div solved

10. Universal float Closure (very important!)

For the principle of clear float, see [How to clear floats without Structural Markup], add the following code to the global CSS, add class= "Clearfix" to the div that needs to be closed, Tried

/* 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 This setting:

. hackbox{display:table;//Displays the object as a block-element-level table}11. Height not fit

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 {
Background-color: #eee;
}

#box p {
margin-top:20px;
margin-bottom:20px;
Text-align:center;
}

<div id= "box" >
Content in the <p>p object </p>
</div>

Workaround:

Add 2 empty Div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

12. Why is there a gap in the picture under the IE6?

There are many ways to fix this bug, either by changing the layout of the HTML, or by setting the IMG to Display:block

or set the Vertical-align property to Vertical-align:top | Bottom |middle |text-bottom can be solved.

13. How to align text with the input box

Plus vertical-align:middle;

A. The Web Standard is not allow duplicate ID, such as div id= "AA", not allowed to repeat 2 times, and class is defined by classes, theoretically can be infinitely repeated, so that the definition of multiple references can be used.

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

Three. Convenient JS and other client-side script, if you want to script an object in the page, then you can define an ID, otherwise only by traversing the page element plus specify a specific attribute to find it, this is a relatively waste of time resources, far less than a simple ID.

The method of displaying an ellipsis after the content exceeds the length in Li

This method works with IE and op browser

Workaround: Change body to 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" >
<!--
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>17. Why can't I define a container with around 1px height?

IE6 This problem is due to the default row height, there are many ways to solve
For example:

Overflow:hidden | zoom:0.08 | line-height:1px18. How can I make the layer appear above flash?

The workaround is to set the flash to transparent

<param name= "wmode" value= "Transparent"/>19. How to make a layer vertically centered in the browser

Here we use the percent absolute positioning, with the method of negative value of the outer patch, the size of the negative value to its own width height divided by two

Div set Margin-left,margin-right to auto is already centered, ie does not, ie need to set body Center, first in the parent element definition text-algin:center; This means that the content within the parent element is centered.

2. Link (A-label) border and background

A link with border and background color, need to set Display:block, and set Float:left guarantee not wrap. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.

3. Hover style does not appear after hyperlink access

Clicked Hyperlink style is not available with hover and active

Workaround: Change the sort order of CSS properties: l-v-h-a

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

Padding and margin of 5.UL

UL label in FF default is padding value, and in IE only margin default has value, so first define

ul{margin:0;padding:0;}

Will solve most of the problems.

6. Form Label

This tag in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistency, so it is best to specify the margin and padding in the CSS, for the above two issues, my CSS is generally used to first use such a style:

ul,form{margin:0;padding:0;}

The definition died, so the back will not be a headache for this.

7. Box model Interpretation inconsistency problem

The box model in FF and IE does not explain inconsistencies resulting in a 2px difference

Workaround: div{margin:30px!important;margin:28px;}

Note that the order of the two margin must not be written in reverse, important this property IE is not recognized, but other browsers can be recognized.

So in the IE is actually interpreted as such: div {maring:30px;margin:28px} repeated definition, according to the last one to execute, so can not write only margin:xx px!important;

#box
{
width:600px; For Ie6.0\
-w\idth:500px; For ff+ie6.0}
#box {
Width:600px!important//for FF
width:600px; For ff+ie6.0
Width/**/:500px; For ie6.0-}8. Property selector (This is not compatible, a bug that hides CSS)

p[id]{}div[id]{} This is hidden from the IE6.0 and IE6.0 versions, as well as the FF and opera functions. There is also a difference between the property selector and the child selector, the range of the sub-selectors shrinks from the form, the range of the property selector is larger, such as P[id], All P tags have the same type of ID.

9. The most ruthless means-!important;

If there is no way to solve some of the details, we can use this method. FF will automatically parse for "!important", but IE will be ignored.

. 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 should be noted that the XXXX!important must be placed on the other sentence above, has mentioned

Default value problem for 10.IE,FF

Perhaps you have been complaining about why you should specifically for IE and FF write different CSS, why ie so people headache, and then while writing CSS, while cursing that hateful m$ IE. In fact, for the standard of CSS support, IE is not as bad as we think, the key is that the default value of IE and FF is not the same, mastered this technique, you will find that the compatibility of FF and IE CSS is not so difficult, perhaps for the simple CSS, you can absolutely not "! Important "This thing up.

We all know that the browser in the Display page, the Web page will be based on the CSS style sheet to determine how to display, but we do not necessarily have all the elements in the stylesheet is described in detail, of course, there is no need to do so, for those not described in the property, the browser will use the built-in default way to display , such as text, if you do not specify a color in the CSS, then the browser will be in black or system color to display, div or other elements of the background, if not specified in the CSS, the browser will be set to white or transparent, and so on other undefined style.

So there's a lot of things. The root cause of the difference between FF and IE is that their default display is different, and how this default style should be displayed I know there are no corresponding standards in W3, so don't blame IE for this.

11. Why the text in FF cannot open the height of the container

The container of fixed height value in standard browser is not open like IE6, then I want to fixed height, and want to be able to be open how to set it?

The way is to remove the height setting min-height:200px, here to take care of the IE6 do not know min-height can be defined as:

{height:auto!important; height:200px; min-height:200px;} 12.FireFox How to make a continuous long field wrap

It is well known that the use of word-wrap:break-word directly in IE, FF, we use the method of JS insertion to solve

The difference is that the overall width of the container is not the width of the border (border) in the inside, where IE6 is interpreted as 200PX, and FF is interpreted as 220PX, that is how to cause the problem?

Everyone put the container top of the XML removed will find the original problem in this, the top of the declaration triggered the qurksmode of IE, about qurks mode, standards mode of the relevant knowledge, please refer to: http://www.microsoft.com/ China/msdn/library/webservices/asp.net/aspnetusstan.mspx?mfr=true

To solve the compatibility problem of IE7.0, found the following article: Now I mostly use!important to hack, for IE6 and Firefox test can be normal display, but IE7 to!important can be interpreted correctly, will cause the page did not display as required!

The following is the compatibility of three browsers the first, is the CSS hack method height:20px; /*for firefox*/
*height:25px; /*for IE7 & ie6*/
_height:20px; /*for ie6*/

Note the order.

This also belongs to CSS HACK, but it is not as concise as above.

#example {
Color: #333;
}/* Moz */

* HTML #example {
Color: #666;
}/* IE6 */

*+html #example {
Color: #999;
}/* IE7 */second, conditional comments <!--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]-> Third, the cssfilter approach, the following is the classic from the foreign website translation come over.

Create a new CSS style as follows:

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

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

Add the lang attribute to the body expression, in Chinese en:

Now define a style for the DIV element:

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

This is done in order to overwrite the original CSS style with!important, because: lang selector ie7.0 does not support, so this sentence will not have any effect, so also achieved the same effect ie6.0, but unfortunately, Safari also does not support this property, So you need to add the following CSS styles:

#item: Empty {
Background:green!important;
}

: The empty selector is a CSS3 specification, and although Safari does not support this specification, it will still be selected, whether or not this element exists, and now the Green will now be on a browser other than IE versions.

Compatibility with IE6 and FF can take into account the previous!important personal prefer to use the first, concise, compatibility is better.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS Browser compatible

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

CSS Browser compatible

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support