The page has a list of data, a table, placed in a div window, structured as follows:
Copy Code code as follows:
<body>
<div id= "Container" >
<table id= "Grid" ..... List Data ....</table>
</div>
</body>
Set the style #container {width:100%; margin:10px} to container;
Style #grid {width:100%} is set for the grid
Test results in IE normal, under the Firefox container actual width will be more than 100% and the horizontal scroll bar, because Firefox margin into the width of the actual equals 100%+20px>100%.
Of course, you can remove the margin definition of Div, use the body padding to set, but the page has other content to fill the entire page.
So in order to solve this problem will give div in the Firefox difference definition of a width:98%, this seems to solve the problem, but if the browser window becomes smaller, Firefox under the 98%+20px may be greater than 100% and the horizontal scroll bar appears.
Out of the psychology of trying, I changed the style of container to #container {width:100%-20; margin:10px}, and then go to Firefox to see, oh, unexpectedly became normal, and IE under, really strange, width : 100%-20 Such a definition should be wrong! But to solve the Firefox margin into the problem, further test, found that any 100% minus a random number can be, looked up some information, has not understood what the reason.
Maybe it's a bug, hehe! Perhaps the master knows the reason. Test yourself and post the code and screenshots:
<textarea id="runcode95106"><ptml> <pead> <meta http-equiv= "Content-type" content= "text/html charset=utf-8"/> t;test</title> </pead> <body> <div > <div border= "0" cellpadding= "0" cellspacing= "0" Bgcol Or= "#FF0000" > <table 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 B Gcolor= "#FFFFFF" > Data 6</td> <td bgcolor= "#FFFFFF" > Data 7</td> <td bgcolor= "#FFFFFF" > Data 8</ td> </tr> </table> </div> </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
