Research and solution of Single-choice and text alignment of check boxes; single-choice alignment

Research and solution of Single-choice and text alignment of check boxes; single-choice alignment
Original address: http://www.zhangxinxu.com/wordpress? P = 56

Preface
Currently, the text on a Chinese website is 12px in size for most mainstream texts on my personal experience, because the current high-resolution display screen contains 11 PX Chinese characters, the pixel points start to be irregular, and the text is not as good as 12 PX. 12 PX text is the mainstream and the bottom line. However, the text of 12px is not aligned with the single delimiter and check box. For example, the following Yahoo China homepage is in Firefox:

The check box on the Yahoo China homepage is not aligned with the text

Here, I am not saying that Yahoo China's team is not serious enough, and the question of alignment between 12 PX text and single pixel and check boxes is not well solved. Considering the compatibility, the particularity of the control and the control of code cost, this problem cannot be solved simply.
This is not the first time I have studied the single answer check box alignment problem, because I usually pay more attention to this problem and often perform some tests. I still have some knowledge about this problem, I also summarized some of my solutions. I will write it down today for communication and reference.

I. Conditions for problem generation
For 14-pixel font, there is no single (multiple) box and text alignment question to be discussed in this article. (See)

The 14-pixel text is not aligned with the single check box

However, there is an alignment problem for 12-pixel text, especially in firefoxfirefox and Google chrome. (See)

12-pixel text is not aligned to the bottom of a single check box

This is the problem to be studied and solved in this article. I am not clear about the root cause of this non-alignment, but I am sure that the single check box is aligned with the text in vertical-align: baseline by default.

Ii. Solutions
Below I will provide five solutions, three of which do not use any hack, and IE6, IE7, Firefox, and chrome are doing well, one solution uses an IE hack, but the cost is low, and each browser performs well. There is also a solution, the Code cost is very low, but the text in the chrome browser is slightly higher, using the input type selector, or chrome hack can solve this problem, but for single check box such controls, A lot of code is not cost-effective. In balance, it is not handled separately for chrome browsers.
These solutions are the conclusions I have accumulated and tested repeatedly, and their compatibility is trustworthy. If you want to use it, name a class for the single check box. The class style is the css style provided by the following solution.

1. Based on vertical-align: text-bottom
The css code is as follows: vertical-align: text-bottom; margin-bottom: 2px; * margin-bottom:-2px;
The css code is as follows: vertical-align: text-bottom; margin-bottom: 2px; margin-bottom:-2px \ 9;
The result is as follows ):

Style representation in IE6 Browser

Style display in Firefox

2. Based on vertical-align: text-top
The css code is as follows: height: 13px; vertical-align: text-top; margin-top: 0;
The result is as follows ):

Style representation in IE7

Style representation in chrome

3. vertical-align: bottom-based
The css code is as follows: height: 15px; vertical-align: bottom; margin-bottom: 3px; margin-top:-1px;
The result is as follows (using IE6 and Firefox as an example ):

Performance in IE6

Performance in Firefox

4. Based on vertical-align: top
The css code is as follows: height: 14px; vertical-align: top;
Result example ):

Performance in IE7

Performance in chrome-text on the top

5. vertical-align: middle-based
The css code is as follows: vertical-align: middle; margin-top:-2px; margin-bottom: 1px;
The result is as follows (IE6 and Firefox are used as examples ):

Style representation in IE6

Performance in Firefox

Last description
* The test results are not displayed in the opera browser. The first reason is that the opera market share is odd and small, even if it does not affect much. The second is to reduce the workload of comparison and processing. Here we will directly express the performance in operabrowser. Opera is a freak. It should be a good standard support, but the 14-pixel text and single-pixel check boxes are not aligned. Of course, 12 pixels are not needed. However, the performance in solution 3 and solution 5 is unexpectedly good, so solution 3 and solution 5 are good solutions.
* IE8 is not tested. I don't want to test it, but now I have a computer on hand. IE8 cannot be tested due to system reasons. Sorry.
* The above scheme is not necessarily the optimal method. I did not add padding for testing. There are other attributes. If I have time to combine all types of tests one by one, I may find another method.
* The single keys and check boxes in Firefox and chrome are set to a margin value by default. The values of the two are almost the same. Take the chrome browser as an example. In Google chrome, the default margin value of a single radio worker is: margin: 3px 3px 0 5px; the margin value of the checkbox check box is margin: 3px 3px 3px 4px; in IE, there seems to be no margin value, but it is sensitive to margin. This is one of the difficulties to solve alignment problems without using hack.
* Finally, if the sentence is conclusive, the compatibility, code utilization, and css consumption of solution 3 and solution 5 are two methods that I highly recommend. We recommend that you try it!

Ultimate DEMO