Horizontal scroll bar displayed when html page content exceeds-lin Qiqi

When the html page content exceeds the limit, the horizontal scroll bar is displayed.-lin Qiqi has encountered this problem several times and is skilled in solving it.

This problem usually occurs when the width of an internal element in html or page exceeds the upper limit.

Below are some situations I have encountered:

1. The width of an internal element is set to 100%, but it also has the width of border. The width of border is not included in width, so the result is too large.

2. A span row element, because it is a Row Element and does not have a display: block or the like, it is useless to set the width. At the beginning, I didn't realize this problem, as a result, there was no problem in Google's browser. in IE, this was exposed, seriously exceeding the screen width. Later, we set the span to display: block, and then set its width, the problem is solved.

PS: Pay attention to the border, margin, and padding of the elements with width: 100%, and be careful that they are out of the screen range.

For internal elements out of the screen range, I usually divide the page into several sections to exclude the target (that is, delete a section to see if the remaining section causes horizontal scroll bars. If it still appears, it proves that the plate is normal, otherwise the plate is the target plate we are looking for-"culprit"), and continues to query the section that causes the excess until the internal element is found.

This method is very stupid. I hope you can share your experience and discuss how to quickly find the internal elements that cause the page content to exceed.