Some in-depth research and understanding of the "Reprint" checkbox check box

Source: Internet
Author: User

Reprinted from: Original articles, reproduced please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]

One or one start of nagging
Recently busy development, masturbation from the project step by step completion, the heart impetuous. The house near and seek far, the big bogey of military strategist. Am I supposed to look at the things in front of me, to be calm and quiet, to study the most basic things in the quiet and immersion of the average person? This thinking, let me find some direction.

For the checkbox, beginning with the beginning of my contact with the HTML, LU continued to study a number of times, but the accumulation of sporadic knowledge points, or mastered the appearance of the things, whether deep in the core, whether deep in its essence, whether there is a perfect summary, whether into their own world view, there is no, And the work I am going to do today is to put the past of those accumulated well carefully collated out, coupled with their own thinking, coupled with their own understanding, display.

Note in advance: This checkbox is not intended for safari, or just around the world, Safari browser playing independently, like the Na ' VI of Pandora's Planet, is not the same, the difference is too large, there is not much comparability.

Second, the same alignment, subtle differences in performance
Like most of the elements of the Inline-block attribute (some form controls, pictures, etc.), the checkbox check box and the inline property elements, such as text, are aligned by default with the Baseline (baseline).

The baseline here is the word layout, for the English alphabet, refers to the English alphabet "sit" position, is the a,b,c and other letters of the bottom line. The red line is the baseline:

For Chinese, in the browser, although there is no intuitive bottom line, baseline, midline and other concepts of division, but in most cases (IE6, IE7 understanding the bottom line, such as wrong, IE8 has been corrected), the baseline and other concepts such as the browser is recognized, for example, a 12-megapixel character, The browser will take a baseline from the bottom of the Chinese character (which may be assumed to be 1 pixels).

But as we just mentioned, Ie6,ie7 understand the baseline, the bottom line is wrong, so the default is that the complex option (also the case of a single box) followed by the text will have browser differences. This difference is only the pixel level, if we always hold the impetuous mood, this display of the difference is not aware of, will not find the cause of this
The underlying reason for the difference. The following figure is in addition to the limit body font size without any style, the first line of text size 16 pixels, the second row of 14 pixels, the third row of Chinese 12 pixels, the fourth line in English 12 pixels takeaway IE8 Chinese 12 pixels.

Careful comparison of IE6 and Firefox text size under the text of the bottom distance of the reference line relative position, you can find that the IE6 text is always biased on 1 pixels, and IE8 under the Firefox,chrome browser consistent. This indicates that IE6 is in addition to the problem when understanding certain attributes. I have two explanations for myself: first, IE6 can accurately distinguish the baseline (baseline) of the text, but understand the problem of their own processing point, and do not put their own 1-pixel border in the calculation, and the other is IE6 is the baseline understanding of the text error, you may use the baseline as the bottom line, and the bottom line do not know what to use (Set the check box vertical-align for bottom, the text behind the ie6-7 will run to the top-I am puzzled! )。 Obviously, I prefer the latter explanation, and the reliability of the previous statement will be greatly compromised in the following verification.

Third, why is there a gap between the check box and the text behind it?
Please allow me to sell a Xiaoguanzi, by default, why is there a small gap between the check box and the text? See or see:

First of all two points: it is certainly not a space, the checkbox and the text is not wrapped and no space; second, it is not taken for granted, for a reason. You can first think about it, now 5 o'clock in the morning, I first eat a loaf of bread to fill the belly, do not go away, come back immediately.

Well, one might say that the check box has a margin by default, congratulations, half. In fact, in a modern browser such as Firefox,chrome,safari, the interval between check boxes and text is actually caused by margin, or by default, the checkbox has a margin value, where margin-right is 3 pixels. But the IE browser (ie6-8) is not caused by margin. But it is itself.

Although we look to the naked eye, ie and Firefox check boxes are identical (true, the border color, the size of the same), but in fact, the two are very different. Firefox or Chrome browser, check box that is the Pure check box, does not contain melamine, non-genetic food, non-cloning, such as the fake check box. Is the square that we see with the naked eye. But under IE, the check box is just a packaging product, the handsome master of instant noodles affixed a Kang Master's brand. To see the nature of the IE check box, it's simple:

There are two methods:
First, click the check box to see the area of the virtual box (enlarge 600%):

We compare Firefox (enlarge 600%):

By the way, attach the IE8 box (enlarge 600%):

Compared to IE6 and Firefox browser diagram can obviously see the difference between the virtual box, the virtual box of the Firefox browser is attached directly to the border of the check box itself, but IE6 is a huge area, and the check box is only among them; IE8 shows that the scope of the virtual box is more symmetrical.

Method Two:
The check box under IE sets the border or Background property:
Assuming that the check box class is a checkbox, the following style is added, and the .checkbox{border:1px solid #3453b8; background:#beceeb;} IE6 behaves like this (IE7 is similar, IE8 is more symmetrical, Firefox is unresponsive):

OK, enough, from the above comparison can get the following conclusion: IE browser under the default state we see the check box is only a part of the real check box, just a shell, appearance only. In fact, under IE, the check box refers to the entire portion of the border and background color flooding. This is why the check box and the text between the "space" (in fact, there is no) reason, different from the margin of the Firefox gap.

It is because of the differences in the check box itself that the Internet Explorer and other browser checkboxes react differently to the CSS. IE browser checkbox is sensitive to width,border,background, but not to margin:0 a little reaction, firefox,chrome and other browsers have no reaction to border,background, Firefox does not respond to width a little, but Firefox, such as the strong response to margin, margin:0; the text that follows the check box will be pressed to the check box.

It is because the check box in Firefox and text spacing is the default margin generated (Chrome browser check box default margin value is margin:3px 3px 3px 4px; Firefox is consistent with it, and the IE check box itself is the interval, so when you attempt to adjust the horizontal distance between the check box and the text by margin, you will find IE is 3 pixels more than Firefox and other browsers. So when you attempt to align the check box vertically with the text by adjusting the margin value, you always get a satisfactory result.

Three, the check box and text alignment problem
This is a tricky and more concern, I wrote a few months ago detailed articles, provide a variety of good methods, you are interested can be ruthlessly click here: check box and text alignment problem of the study and solution.

But here I would like to add a little something, or another new way to align the check box with the text. Set the font to align the check box with the text. The influence of font on text alignment, typesetting, text underline, etc. is a very big subject, here does not unfold, only to show the conclusion.
First the text font after the check box must be "Tahoma" (can be called "she good" font for easy memory), and then check box style is.checkbox{vertical-align:middle; margin-top:0;}

The complete code is as follows:

<style type= "Text/css" >body{font-size:12px; font-family:tahoma;}. Checkbox{vertical-align:middle; margin-top:0;} </style><body><input class= "checkbox" type= "checkbox"/> check box </body>

The result is:

Iv. How to determine if the check box is selected
In PHP, the check box is selected, the committed value is on, otherwise it is empty, so you can determine whether the value is selected. In JavaScript, it appears that value is always on, no matter whether you choose or not, so it cannot be judged by value, to detect the value of checked, or obj.checked = True if the check box is selected, or false.

Now there is a problem, how to determine whether a set of check boxes are selected?
Since called check box group, must have the same name, so, through getelementsbyname perhaps this set of check box, A for loop, in order to determine the next.

For example, see the following HTML code:

<input type= "checkbox" name= "Test"/> Christmas <input type= "checkbox" name= "test"/> Stock market <input type= "checkbox" Name= "Test"/> Avatar <input type= "checkbox" name= "Test"/> October siege <input type= "checkbox" name= "Test"/> Water price hike <input type= "button" value= "Detect" id= "btn"/>

Then the corresponding JavaScript code is:

var btn = document.getElementById ("btn"), var test = document.getelementsbyname ("Test"), Btn.onclick = function () {for ( var I=1; i<=test.length; I+=1) {if (test[i-1].checked) {alert ("currently checked! "); return;}} Alert ("There's no choice!") ");};

You can click here: Detect if check box group is selected Demo page

V. Select and reverse the check box
The selection and the inverse of the election is also relatively simple, with the above to determine whether there are selected ideas are the same. A For loop, which is currently selected, let its Checked property be false, otherwise true.
For example, the following HTML code:

<input type= "checkbox" name= "Test"/> Christmas <input type= "checkbox" name= "test"/> Stock market <input type= "checkbox" Name= "Test"/> Avatar <input type= "checkbox" name= "Test"/> October siege <input type= "checkbox" name= "Test"/> Water price hike <input type= "button" value= "Select All/Reverse" id= "btn"/>

The corresponding JavaScript code is:

var btn = document.getElementById ("btn"), var test = document.getelementsbyname ("Test"), Btn.onclick = function () {for ( var I=1; i<=test.length; I+=1) {if (test[i-1].checked) {test[i-1].checked = false;} else{test[i-1].checked = true;}};

You can simply click here: check box select all/Reverse Demo Instance page

Originally wanted to demonstrate how to use jquery to achieve a full selection and anti-selection, by the way to write a selection of anti-selection restrictions of the simple plug-in, but now it seems not necessary, one is I stayed a bit tired, do not want to move; the other is that the check box itself is relatively simple, write a plugin, but redundant

Six, the last words
To summarize, the first half of this article has carried on the thorough research and the Ponder to the check box under the different browser performance, has revealed the reason which produces the difference, lets us be able to handle the check box's style performance more easily, the latter part just demonstrates some common JavaScript operation about the check box, all are some tricks. All right, that's it. Hope to be of help to you!

Some in-depth research and understanding of the "Reprint" checkbox check box

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.