Strange phenomenon of style setting width under Firefox_Experience exchange

WBOY
Release: 2016-05-16 12:04:36
Original
1226 people have browsed it

There is a data list on the page, which is a table and is placed in a div window with the following structure:

Copy codeThe code is as follows:



....List data....





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

The test results are normal in IE. Under Firefox, the actual width of the container will exceed 100% and a horizontal scroll bar will appear. Because Firefox counts margin into the width, it is actually equal to 100% 20px>100%.
Of course, you can remove the margin definition of the div and use the padding of the body to set it, but there are other contents on the page that need to occupy the entire page.
So in the past, in order to solve this problem, I would define a width: 98% for divs in Firefox. This seems to have solved the problem, but if the browser window becomes smaller, the 98% 20px under Firefox may be greater than 100%. A horizontal scroll bar appears.

To give it a try, I changed the container style to #container {width:100%-20; margin:10px}, and then went to Firefox to take a look. Haha, it turned out to be normal. , it’s the same as under IE, it’s really strange, the definition of width: 100%-20 should be wrong! But it solved the problem of Firefox including margin. I tried it further and found that it can be reduced by any number from 100%. After checking some information, I still didn't understand the reason.
Maybe it’s just a bug, haha! Maybe some expert knows the reason. I have tested it myself and posted the code and screenshots:
Strange phenomenon of style setting width under Firefox_Experience exchange



[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh it to execute]
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!