by Zhangxinxu from http://www.zhangxinxu.com
Original address: http://www.zhangxinxu.com/wordpress/?p=56
Objective
At present, the text on the Chinese site, in my personal sense, 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:
Yahoo China home Single box check box and text is not aligned
Here, not to say, Yahoo China's team is not serious enough, and because this 12px size text with the single 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.
This is not my first time to study the check box alignment problem, because usually more attention to this issue, but also often do some testing, the problem still has a certain understanding, but also summed up a lot of their own solutions. Today I will write down for Exchange and reference.
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
14 pixel size text is not aligned with the mandate box
However, for 12-pixel-sized text, there is an alignment problem, especially in Firefox Firefox and Google Chrome. See
12 pixel text is not aligned relative to the mandate box position
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, the solution
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 another option, the code cost is very low, but in the Chrome browser text slightly biased, using the input type selector, or chrome hack can solve this problem, but for mandate box such controls, the code is not cost-effective, trade-offs, not for the 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):
IE6 the style representation under the browser
Style performance under the Firefox browser
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):
The style representation under the IE7
Style performance under Chrome
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):
The performance under the IE6
The performance of Firefox
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):
The performance under the IE7
Performance under chrome-text biased
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 style representation under the IE6
Performance under the Firefox browser
The final note
* Not shown in Opera browser test results, the reason is that opera market share is strangely small, even if it does not affect much, and the second 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 a combination of various combinations 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. In Google Chrome, the default margin value for the Radio radio box is: margin:3px 3px 0 5px;checkbox check box margin value is margin:3px 3px 3px 4px, and IE browser does not seem to have margin value , but is sensitive to margin. This is one of the difficulties in solving the alignment problem without hack.
* Finally, to say the conclusion of the words, 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 a very high cost-effective method. I suggest you try it.
reprinted from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
Original address: http://www.zhangxinxu.com/wordpress/?p=56
The research and solution of check box and text alignment problem