Several minor problems with mobile web pages_html/css_WEB-ITnose

Recently I encountered several small problems when making mobile web pages. This problem appeared in Android 2.x.

The first problem encountered is that the mobile phone does not support overflow:scroll. In lower versions of Android (before 4.0), the overflow:scroll attribute is not supported. The way to solve this problem is to add touchstart and touchmove events to the elements that need to be scrolled, determine the scrolling direction by judging the difference between the previous coordinate of each scroll and this time, and at the same time change the scrollTop (scroll up and down) and The value of the scrollLeft property.

There are two small problems: one is insufficient support for rounded corners. The value of the rounded corner attribute can be a percentage or a normal number. But once I saw two elements on a page with rounded corners, but one was round and the other was square. Finally, after looking at the code, I found that lower versions of Android do not support the percentage value of rounded corners, so the way to solve this problem is not to use percentages. Another question is about the positioning of elements in the table. There is an element that needs to be absolutely positioned in the upper right corner of the td. If the td is relatively positioned and the element is absolutely positioned, the result will be displayed normally in 4.0. However, in 2.3, the element will be displayed in the browser. In the upper right corner of the browser, this element is positioned relative to the browser, without reference to its parent element. After trying it, I found that this problem can be easily solved by adding an element (relative positioning) to the td, and then the reference positioning element of the element that needs to be positioned will correctly reference its parent element.