HTML5, CSS3, HTML5CSS3

HTML5, CSS3, HTML5CSS3
Html5 and css3-webkit-text-size-adjust

1. When font-size <12px in the style table, the font in the Chinese chrome browser is still 12px. In this case, you can use html {-Webkit-text-size-adjust: None ;}

2 ,-Webkit-text-size-adjustPutting it on the body will cause the pageTextIf scaling fails and the body inherits the html style,-Webkit-text-size-adjustDo not define them as inherited or global,

To define the elements separately

 

-Webkit-scrollbar: Overall scroll bar

-Webkit-scrollbar-button buttons at both ends of the scroll bar

-Webkit-scrollbar-track outer orbit

-Webkit-scrollbar-track-piece inner orbital, middle part of the scroll bar (excluded)

-Webkit-scrollbar-corner

-Webkit-resizer: defines the style of the drag block in the lower right corner.

With these pseudo elements, you can completely rewrite the scroll bar style of a website.

Of course, webkit provides more than this, and there are many pseudo classes that can enrich the scroll bar style:

: The horizontal-horizontal pseudo class is applied to the horizontal scroll bar.

: Vertical-vertical the pseudo class is applied to the scroll bar in the vertical direction.

: Decrement-decrement: Apply the pseudo class to buttons and track piece ). It is used to indicate whether the button or the inner track reduces the position of the window (for example, the top of the vertical scroll bar and the left side of the horizontal scroll bar .)

: The increment-increment pseudo class is similar to decrement, used to indicate whether the button or the inner track will increase the position of the window (for example, below the vertical scroll bar and right of the horizontal scroll bar .)

The: start-start pseudo class is also applied to buttons and slide. It defines whether an object is placed before the slider.

: End-similar to the start pseudo-class, it identifies whether the object is placed behind the slider.

: Double-button-this pseudo class is used for buttons and inner orbital. Used to determine whether a button is placed in a pair of buttons at the same end of the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a pair of buttons.

: Single-button-is similar to the double-button pseudo class. A button is used to determine whether a button is independent of itself in the scroll bar. For an inner orbital, it indicates whether the inner orbital is close to a single-button.

: No-button-used for the inner orbital, indicating whether the inner orbital must be rolled to the terminal of the scroll bar. For example, when there are no buttons at either side of the scroll bar.

: Corner-present-used for all scroll bar tracks, indicating whether the rounded corner of the scroll bar is displayed.

: Window-inactive-is used for all scroll bar tracks to indicate whether a page container (element) of the application scroll bar is currently activated. (In the latest version of webkit, this pseudo-class can also be used as the: selection pseudo element. The webkit team has plans to expand it and push it into a standard pseudo class)

In addition, pseudo classes such as enabled, disabled, hover, and active can also be used in the scroll bar.

Also ..

The iframe on the iPad does not have a scroll bar, and it is useless to slide with your fingers. div has set overflow: auto | no scroll bar after scroll on the ipad, however, sliding by hand can be rolled, so the problem of iframe needs to be solved urgently.

So I also searched the internet and said that it is necessary to set an independent area for the parent element of iframe to scroll,-webkit-overflow-scrolling: touch;, but the following attributes must also be set:

1.-webkit-overflow: auto;
2. The width and height of the parent element must also be set to absolute pixels. The percentage is not acceptable.

Reference http://css-tricks.com/custom-scrollbars-in-webkit/