CSS check box radio box and common 12px text alignment problem (reprint)

original http://www.cnblogs.com/aobingyan/p/3823556.html, with the deletion

At present, the Chinese website above the text, the majority of the main web site text size of 12px, because in the current high-resolution display screen, 11px of Chinese characters, its pixel start is not regular, the text is not as good as the display of 12px.

12px size text is the mainstream is the bottom line. However, the 12px text is not aligned with the radio box and check boxes. For example, the following Yahoo China homepage under the Firefox browser:

This is not because the Yahoo China team is not serious enough, but because this 12px size text with the Radio box and check box alignment problem is not a good solution.

Considering the compatibility, the particularity of the control itself and the control of the code cost, the problem is not easy to solve.

I. Conditions arising from the problem

For a 14-pixel font size, there is no question of the single (complex) marquee and text alignment that are discussed in this article. See

However, for 12-pixel-sized text, there is an alignment problem, especially in Firefox Firefox browser and

This is the problem to be researched and solved in this paper. The root cause of this misalignment is not clear to me, but I am sure that the mandate box and the text are aligned by default in vertical-align:baseline manner.

Second, Solution Solutions

Below I will provide five kinds of solutions, there are three scenarios do not use any hack, and Ie6,ie7,firefox,chrome browser performance is very good, there is a scenario using an IE hack, but the cost is low, each browser performance is good.

There is also a scenario where the code cost is low, but in chrome the text is slightly biased, using the input type

Selectors, or chrome hack, can solve this problem, but for the mandate box type of control, the code is a lot less cost-effective, trade-offs, not for Chrome browser processing alone.

These programs are my usual accumulation, repeated tests come to the conclusion that their compatibility is trustworthy.

To use, name a class for the single check box, which is the CSS style provided in the following scenario.

1. vertical-align:text-bottom - based

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;

Results such as (with IE6 browser and Firefox browser example):

Chrome under Google Browser. See

2. vertical-align:text-top - based

The CSS code is as follows:

　　height:13px; Vertical-align:text-top; margin-top:0;

Results such as (with IE7 browser and Chrome browser example)

3. vertical-align:bottom - based

The CSS code is as follows:

height:15px; Vertical-align:bottom; margin-bottom:3px;margin-top:-1px;

As a result (example in IE6 and Firefox browser):

4. vertical-align:top - based

The CSS code is as follows:

　　height:14px; Vertical-align:top;

The results are as follows (chrome text is slightly biased, other browsers are perfect for IE7 and Chrome browser examples):

5. vertical-align:middle - based

The CSS code is as follows:

　　Vertical-align:middle; margin-top:-2px; margin-bottom:1px;

The results are as follows (in IE6 and Firefox examples):

The final note

Not tested under Opera's browser, the reason is that opera market share is strangely small, even if it does not affect much, and the other is to alleviate their own, contrast processing workload.

Here is the expression in the Opera browser directly in the text. Opera is a freak, and it should be good to support the standard, but the 14-pixel text and radio checkboxes are not aligned, of course, 12 pixels, not to mention.

However, in scenarios 3 and 5 The performance is surprisingly good, so scenario 3 and programme 5 are good options.

*IE8 Browser is not tested, not do not want to test, but now on the hand on a computer, IE8 due to system reasons, not test, sorry.

The above scheme is not necessarily the optimal method, I did not join padding to test, there are some other properties, as long as there is time, will be all kinds of combination of one experiment, may find another method.

*firefox and check boxes under the browser and Chrome browser are defaulted by a margin value. The values of the two are nearly identical, with examples from the Chrome browser.

Under Google Chrome, the default margin value for the Radio radio box is: margin:3px 3px 05px;checkbox check box margin value is margin:3px 3px 3px 4px;

There seems to be no margin value in IE browser, but it is sensitive to margin. This is one of the difficulties in solving the alignment problem without hack.

Finally, the conclusion of the sentence, program 3 and program 5 from the compatibility, code utilization, CSS consumption and so on are I highly recommended two ways. We suggest you try it!

The author added on November 3 2:40, in Renren's CSS code to see the use of vertialc-align:-3px to solve this problem, I tried, although the performance can not be described as perfect, but did alleviate the alignment of the problem, is the personality price

than a very high method. I suggest you try it.

The end of this article, the ultimate demo example

Http://www.zhangxinxu.com/study/200908/radio-chechbox-text-align.html

CSS check box radio box and common 12px text alignment problem (reprint)