Recently made a login interface, said ashamed, was originally a more simple page, just let me complete a lot of problems, here is my summary:
1. About fonts
Because each browser is different from the font definition, it is best to use the EM property to compatible with different browsers, for IE, you also need to add font-size:100% to ensure that the font is displayed properly.
Google rules less than 12px font size is not differentiated, previously can be used Webkit-text-size-adjust:none to remove this restriction, but later Google did not support, it is said that can be usedtransform:scale(0.875);这条css3属性来完成类似功能.如果情况允许也可以直接插入图片.
*webkit-text-size-adjust:none This property was first introduced by IOS 1.0, so it was meant to solve problems on mobile devices. Typically, when the IPhone (iOS4) is horizontal, the value of "-webkit-text-size-adjust" is approximately 140%. So if you want to cancel the IOS device when the screen switch font size is larger, the correct usage should be:
"-webkit-text-size-adjust:100%;"
2. About the background image
Sometimes you need to position the background image, the available attributes background-position:10px 20px;p Osition:absolute. This will not deform the background image when the page width changes
An impression of a login interface