Different browser padding, margin differences _ Experience Exchange

Source: Internet
Author: User
Margin and padding are always possible to use, and how to solve the problem? Because the browser interprets container widths in different ways:
IE 6.0 Firefox Opera etc is
True width =width+padding+border+margin
IE5. X
True width =width-padding-border-margin

The workaround is to:

div.content {
width:400px; This is the wrong width, all browsers read the
voice-family: "\"}\ ""; IE5. X/win the contents of "\"}\ "" are ignored
Voice-family:inherit;
width:300px; Some browsers, including Ie6/win, read this sentence, and the new value (300px) covers out the old
}
Html>body. Content {//html>body is the CSS2 notation
width:300px; Browsers that support CSS2 (non-IE5) read this sentence.
}

div.content {
width:300px!important; This is the correct width, most browsers that support!important tag use the values here
Width (space)/**/:400px; Ie6/win Not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win read this sentence, the new value (400px) overwrite the old, because the!important tag does not work for them
}
Html>body. Content {//html>body is the CSS2 notation
width:300px; Support CSS2 The browser was fortunate enough to read this sentence.
}


Small
  • 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.