CSS webpage layout compatibility

Source: Internet
Author: User

What are the key points and tips for CSS webpage layout compatibility?

IE vs FF

CSS compatibility highlights: doctype affects CSS Processing

FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE is not working.

FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

FF: After padding is set, the DIV will increase the height and width, but IE will not, so we need to use it! Set one more height and width for important.

FF: Yes! Important, ie is ignored, available! Important sets a special style for FF

Vertical center 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 to the vertical center. The disadvantage is that you need to control the content rather than line feed.

Cursor: pointer can display the cursor finger shape in IE ff at the same time, hand only ie Can

FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space XHTML + CSS compatibility solution small set in menubar.

There are many benefits to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write down some of my problems below.

1. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:

Example source codediv {margin: 30px! Important; margin: 28px ;}

Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

Example source codediv {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

2. the box interpretations of ie5 and IE6 are inconsistent. Div {width: 300px; margin: 0 10px 0 10px;} Div width is interpreted as 300px-10px (right filling) -10px (left filled) the final Div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, we can make the following changes:

Example source codediv {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}

I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

3. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.

Example source codeul {margin: 0; padding: 0 ;}

Most problems can be solved.

4. For the script, the language attribute is not supported in xhtml1.1. You only need to change the code

Example Source Code <SCRIPT type = "text/JavaScript">

You can.

I don't quite understand what/**/is. I only know that both ie5 and Firefox support this, but IE6 does not.

For ie5.5 compatibility, use "/**/"

For ie5.0 compatibility, use ">"

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.