Firefox style set width strange phenomenon _ experience Exchange

Source: Internet
Author: User
The page has a list of data, a table, placed in a div window with the following structure:
Copy CodeThe code is as follows:


.... List data ....





Set the style #container {width:100%; margin:10px;} for container;
Style is set for grid #grid {width:100%}

The test results in IE normal, in Firefox under the actual width of the container will exceed 100% and appear horizontal scroll bar, because Firefox put margin into the width, actually equal to 100%+20px>100%.
Of course, you can remove the margin definition of the DIV, use the body's padding to set it, but the page has other content to fill the entire page.
So in order to solve this problem will give div in Firefox to define a width:98%, this seems to solve the problem, but if the browser window becomes smaller, Firefox 98%+20px may be more than 100% and the horizontal scroll bar appears.

Out of the mind to try, I changed the style of container to #container {width:100%-20; margin:10px}, and then to Firefox down to see, hehe, unexpectedly become normal, and IE under, really strange, width : 100%-20 Such a definition should be wrong! But it solves the problem of Firefox to calculate the margin, further try, found that casually 100% minus a number can be, looked up some information, has not understood what the reason.
Maybe it's a bug, huh! Maybe one of the pros knows why. Have done your own testing, put the code and paste it up:



<textarea id="runcode36144"><ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=utf-8"/> <title >test</title> </pead> <body> <table style= "width:100%" border= "0" cellpadding= "0" cellspacing = "1" bgcolor= "#333333" > <tr> <td bgcolor= "#FFFFFF" > Data 1</td> <td bgcolor= "#FFFFFF" > Data 2< /TD> <td bgcolor= "#FFFFFF" > Data 3</td> <td bgcolor= "#FFFFFF" > Data 4</td> </tr> <tr> <TD bgcolor= "#FFFFFF" > Data 5</td> <td bgcolor= "#FFFFFF" > Data 6</td> <td bgcolor= "#FFFFFF" > Data 7</td> <td bgcolor= "#FFFFFF" > Data 8</td> </tr> </table> </body> </ptml> </textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
  • 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.