CSS Compatibility Essentials Analysis _ Experience Exchange

Source: Internet
Author: User
IE vs FF

CSS Compatibility essentials:

DOCTYPE affecting CSS Processing

Ff:div set Margin-left, Margin-right is auto when the center, IE No

Ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important

FF: Support!important, IE is ignored, can be used!important to set the FF special style

Vertical center of DIV 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 break the line

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

FF: Link plus border and background color, need to set Display:block, and set Float:left guarantee not to break line. 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 xhtml+css compatibility solution small Set

The use of XHTML+CSS framework benefits a lot, but there are some problems, whether because of the use of unskilled or the idea is not clear, I first put some of the problems I encountered in the following, the province of everyone looking around ^ ^

1. The difference between the box models in Mozilla Firefox and IE is inconsistent, resulting in 2px resolution:

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

Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

2.ie5 and IE6 's box explain inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

, about this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! :)

3.UL tags in mozilla default is padding value, and in IE, only margin has value, so first define

ul{margin:0;padding:0;}

Will solve most of the problems.

4. For scripts, the language attribute is not supported in xhtml1.1, just change the code to

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.