මෙය නිරන්තරයෙන් මට පීඩා කරන සුළු CSS ගැටලුවලින් එකකි. තොග පිටාර ගැලීම වටා සිටින පුද්ගලයින් සිරස් අතට පෙළගස්වන්නේ කෙසේද checkboxesසහ ඔවුන්ගේ labelsනිරන්තර හරස් බ්‍රව්සරය ? මම ඒවා සෆාරි හි නිවැරදිව පෙළගස්වන සෑම විටම (සාමාන්‍යයෙන් භාවිතා vertical-align: baselineකරන්නේ input), ඒවා ෆයර්ෆොක්ස් සහ අයිඊ වලින් සම්පූර්ණයෙන්ම අක්‍රීයයි. එය ෆයර්ෆොක්ස් හි සවි කරන්න, සෆාරි සහ අයිඊ අනිවාර්යයෙන්ම අවුල් වී ඇත. මම පෝරමයක් කේත කරන සෑම අවස්ථාවකම මම මේ සඳහා කාලය නාස්ති කරමි.

මෙන්න මම වැඩ කරන සම්මත කේතය:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

මම සාමාන්‍යයෙන් එරික් මේයර්ගේ යළි පිහිටුවීම භාවිතා කරමි, එබැවින් ආකෘති මූලද්‍රව්‍ය සාපේක්ෂව අතිච්ඡාදනයන්ගෙන් පිරිසිදු වේ. ඔබට පිරිනැමිය යුතු ඕනෑම ඉඟි හෝ උපක්‍රම බලාපොරොත්තුවෙන්!

පැයකට අධික කාලයක් ඇඹරීම, පරීක්ෂා කිරීම සහ විවිධ සලකුණු සලකුණු අත්හදා බැලීමෙන් පසු, මට හොඳ විසඳුමක් තිබිය හැකි යැයි මම සිතමි. මෙම විශේෂිත ව්‍යාපෘතිය සඳහා අවශ්‍යතා වූයේ:

1. යෙදවුම් ඔවුන්ගේම රේඛාවෙන් විය යුතුය.
2. පිරික්සුම් කොටුවේ යෙදවුම් සියලු බ්‍රව්සර් හරහා ලේබල් පෙළ සමඟ සමානව (සමාන නොවේ නම්) පෙළගැස්විය යුතුය.
3. ලේබලයේ පෙළ ඔතා තිබේ නම්, එය ඇතුල් කිරීම අවශ්‍ය වේ (එබැවින් පිරික්සුම් කොටුවට යටින් එතීම අවශ්‍ය නොවේ).

මම යම් පැහැදිලි කිරීමකට යාමට පෙර, මම ඔබට කේතය දෙන්නම්:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

JSFiddle හි වැඩ කරන උදාහරණය මෙන්න .

මෙම කේතය උපකල්පනය කරන්නේ ඔබ ආකෘති ආදාන ආන්තිකයන් සහ පෑඩින් අභිබවා නොයන එරික් මේයර් වැනි යළි පිහිටුවීම භාවිතා කරන බවයි (එබැවින් ආදාන CSS තුළ ආන්තිකය සහ පෑඩින් යළි පිහිටුවීම). නිසැකවම සජීවී පරිසරයක ඔබ වෙනත් ආදාන අංග සඳහා සහය දැක්වීම සඳහා කූඩු / අතිච්ඡාදනය කරනු ඇත, නමුත් මට අවශ්‍ය වූයේ දේවල් සරල ලෙස තබා ගැනීමටයි.

සැලකිල්ලට ගත යුතු කරුණු:

• එම *overflow ප්‍රකාශය පේළිගත IE හැක් (තරු-දේපල හැක්) වේ. IE 6 සහ 7 යන දෙකම එය දකිනු ඇත, නමුත් සෆාරි සහ ෆයර්ෆොක්ස් එය නිසි ලෙස නොසලකා හරිනු ඇත. මම හිතන්නේ එය වලංගු CSS එකක් විය හැකිය, නමුත් ඔබ තවමත් කොන්දේසි සහිත අදහස් දැක්වීම වඩා හොඳය; සරල බව සඳහා එය භාවිතා කළා.
• මට කිව හැකි හොඳම දේ, vertical-alignබ්‍රව්සර් හරහා ස්ථාවර වූ එකම ප්‍රකාශයයි vertical-align: bottom. මෙය සැකසීම හා සාපේක්ෂව ඉහළට ස්ථානගත කිරීම සෆාරි, ෆයර්ෆොක්ස් සහ අයිඊ හි සමාන ලෙස හැසිරුණේ පික්සෙල් හෝ දෙකක් විෂමතාවයකින් පමණි.
• පෙළගැස්වීම සමඟ වැඩ කිරීමේ ප්‍රධාන ගැටළුව නම් ආදාන මූලද්‍රව්‍ය වටා අද්භූත අවකාශයක් IE විසින් තබා ගැනීමයි. එය පෑඩින් කිරීම හෝ ආන්තිකය නොවේ. පිරික්සුම් කොටුවේ පළල සහ උස සැකසීම සහ පසුව overflow: hiddenයම් හේතුවක් නිසා අමතර ඉඩ කපා හැරීම සහ IE හි ස්ථානගත කිරීම සෆාරි සහ ෆයර්ෆොක්ස් වලට සමාන ලෙස ක්‍රියා කිරීමට ඉඩ දෙයි.
• ඔබේ පෙළ ප්‍රමාණය අනුව, දේවල් නිවැරදිව පෙනීම ලබා ගැනීම සඳහා සාපේක්ෂ ස්ථානගත කිරීම, පළල, උස යනාදිය වෙනස් කිරීමට ඔබට අවශ්‍ය වනු ඇත.

මෙය වෙනත් කෙනෙකුට උපකාරී වේ යැයි සිතමු! මම අද උදේ වැඩ කරමින් සිටි ව්‍යාපෘතිය හැර වෙනත් කිසිදු ව්‍යාපෘතියක මෙම විශේෂිත තාක්‍ෂණය අත්හදා බැලුවේ නැත, එබැවින් ඔබ වඩාත් ස්ථාවරව වැඩ කරන යමක් සොයා ගන්නේ නම් අනිවාර්යයෙන්ම නල මාර්ගයක් සකසන්න.

සමහර විට සිරස්-පෙළගැස්වීම නිසියාකාරව වැඩ කිරීම සඳහා එකිනෙකට යාබදව පේළි දෙකක් (පරතරය, ලේබලය, ආදානය, ආදිය) අවශ්‍ය වේ. පෙළ ප්‍රමාණය ඉතා කුඩා හෝ විශාල වුවත් පහත දැක්වෙන පිරික්සුම් කොටු IE, සෆාරි, එෆ්එෆ් සහ ක්‍රෝම් තුළ නිසි ලෙස සිරස් අතට කේන්ද්‍රගත වී ඇත.

ඔවුන් සියල්ලන්ම එකම පේළියක පාවෙති, නමුත් Nowrap යන්නෙන් අදහස් කරන්නේ සමස්ත ලේබල් පා always ය සෑම විටම පිරික්සුම් කොටුව අසල රැඳී ඇති බවයි.

අවාසිය නම් අමතර අර්ථ විරහිත SPAN ටැග් ය.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

දැන්, ඔබට පිරික්සුම් කොටුව යට එතීමෙන් තොරව එතීමට අවශ්‍ය දිගු ලේබල් පෙළක් තිබේ නම් , ඔබ ලේබල් අංග මත පෑඩින් සහ negative ණාත්මක පෙළ ඉන්ඩෙන්ට් භාවිතා කරනු ඇත:

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

වන් ක්‍රෙයෝන්ගේ විසඳුමෙන් බැහැරව , මට වැඩ කරන හා වඩා සරල යමක් මා සතුව ඇත:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

පික්සල්-පික්සෙල් සඳහා සෆාරි (මම විශ්වාස කරන මූලික) රෙන්ඩර් කරන අතර ෆයර්ෆොක්ස් සහ අයිඊ 7 යන දෙකම හොඳ යැයි පරීක්ෂා කරයි. විශාල හා කුඩා විවිධ ලේබල් අකුරු ප්‍රමාණ සඳහාද එය ක්‍රියා කරයි. දැන්, තේරීම් සහ යෙදවුම් මත IE හි මූලික පදනම සවි කිරීම සඳහා ...

යාවත්කාලීන කිරීම: (තෙවන පාර්ශවීය සංස්කරණය)

නිසි bottomපිහිටීම අකුරු-පවුල සහ අකුරු ප්‍රමාණය මත රඳා පවතී! bottom: .08em;පිරික්සුම් කොටුව සහ ගුවන්විදුලි අංග සඳහා භාවිතා කිරීම හොඳ පොදු වටිනාකමක් බව මට පෙනී ගියේය. මම එය ක්‍රෝම් / ෆයර්ෆොක්ස් / අයිඊ 11 හි කවුළු වල ඒරියල් සහ කැලිබ්‍රි අකුරු සහිත කුඩා / මැද / විශාල අකුරු ප්‍රමාණ භාවිතා කර පරීක්ෂා කළෙමි.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

හොඳින් ක්‍රියාත්මක වන බව පෙනෙන එක් පහසු දෙයක් නම්, සිරස්-පෙළගැස්වීම සමඟ පිරික්සුම් කොටුවේ සිරස් පිහිටීම සකස් කිරීමයි. බ්‍රව්සර් හරහා එය තවමත් වෙනස් වනු ඇත, නමුත් විසඳුම සංකීර්ණ නොවේ.

input {
    vertical-align: -2px;
}

යොමුව

උත්සාහ කරන්න vertical-align: middle

ඔබේ කේතය එය විය යුතු බව පෙනේ:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

මගේ විසඳුම උත්සාහ කරන්න, මම එය IE 6, FF2 සහ Chrome වලින් උත්සාහ කළ අතර එය බ්‍රව්සර් තුනේම පික්සෙල් පික්සෙල් මගින් විදහා දක්වයි.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

මට ඇති එකම පරිපූර්ණ විසඳුම නම්:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

අද ක්‍රෝම්, ෆයර්ෆොක්ස්, ඔපෙරා, අයිඊ 7 සහ 8 හි පරීක්ෂා කර ඇත. උදාහරණය: ෆිදෙල්

මම මගේ විසඳුම මුළුමනින්ම අත්හදා බලා නැත, නමුත් එය විශිෂ්ට ලෙස ක්‍රියාත්මක වන බව පෙනේ.

මගේ HTML සරලයි:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

මම පසුව සියලු පිරික්සුම් කොටු 24pxඋස සහ පළල යන දෙකටම සකසා ඇත. පෙළ පෙළගස්වා ගැනීම සඳහා මම ලේබලය line-heightද 24pxසාදන්නෙමි vertical-align: top;.

සංස්කරණය කරන්න: IE පරීක්‍ෂණයෙන් පසු මම vertical-align: bottom;ආදානයට එකතු කර ලේබලයේ CSS වෙනස් කළෙමි . පෑඩින් වර්ග කිරීම සඳහා ඔබට කොන්දේසි සහිත IE css නඩුවක් අවශ්‍ය බව ඔබට පෙනී යනු ඇත - නමුත් පෙළ සහ කොටුව පේළිගත කර ඇත.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>
<label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label>
<label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label>
<label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>

මෙය ක්‍රියාත්මක නොවන බව යමෙකු සොයා ගන්නේ නම්, කරුණාකර මට දන්වන්න. මෙන්න එය ක්‍රියාත්මක වේ (ක්‍රෝම් සහ අයිඊ හි - දෘෂ්ටි විතානයේ තිර පිටපත් ලබාගෙන සමාව අයැදීම සහ IE සඳහා සමාන්තර භාවිතා කිරීම):

මගේ ස්ථිතික පෙළෙහි සිරස් පිහිටීම වෙනස් කිරීම සඳහා මම සාමාන්‍යයෙන් රේඛා උස භාවිතා කරමි:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

උපකාරවත් වන බලාපොරොත්තුව.

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

උපක්‍රමය නම් ලේබල් ටැගය භාවිතා කරන්නේ නම් සිරස්-පෙළගැස්වීම වගු සෛල තුළ හෝ පේළිගත කිරීම පමණි.

අවසාන වශයෙන් ගැටලුවේ මූලාශ්‍රය දෙස බලමු

පිරික්සුම් කොටු රූප භාවිතයෙන් විදහා දක්වයි (යමෙකුට CSS හරහා අභිරුචි ඒවා සැකසිය හැක). DOM පරීක්ෂක සමඟ ඉස්මතු කර ඇති ෆයර්ෆොක්ස් හි (පරීක්ෂා නොකළ) පිරික්සුම් කොටුවක් මෙන්න:

Chrome හි එකම අස්ථායි පිරික්සුම් කොටුව මෙන්න:

ඔබට ආන්තිකය (තැඹිලි) දැකිය හැකිය; පෑඩින්ග් නොමැත (කොළ පැහැයෙන් දැක්වේ). ඉතින් මෙම ව්‍යාජ ආන්තිකය දකුණු පසින් සහ පිරික්සුම් කොටුවේ පහළින් ඇත්තේ කුමක්ද? මේවා පිරික්සුම් කොටුව සඳහා භාවිතා කරන රූපයේ කොටස් වේ . සාධාරණ ලෙස භාවිතා කරන්නේ එබැවිනිvertical-align: middle නිසාම සැබවින්ම ප්‍රමාණවත් නොවන අතර හරස් බ්‍රව්සර් ගැටලුවල මූලාශ්‍රය එයයි.

ඉතින් මේ ගැන අපට කුමක් කළ හැකිද?

පැහැදිලිව පෙනෙන එක් විකල්පයක් නම් - රූප ආදේශ කරන්න! වාසනාවකට මෙන්, කෙනෙකුට මෙය CSS හරහා කළ හැකි අතර බාහිර රූප, base64 (in-CSS) රූප, CSS in svg හෝ ව්‍යාජ මූලද්‍රව්‍ය ආදේශ කළ හැකිය. එය ශක්තිමත් (හරස් බ්‍රව්සරයක්!) ප්‍රවේශයක් වන අතර, මෙම ප්‍රශ්නයෙන් සොරකම් කරන ලද එවැනි ගැලපීම් සඳහා උදාහරණයක් මෙන්න :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

මෙහි ලැයිස්තුගත කර ඇති සමහරක් වැනි එවැනි මෝස්තර පිළිබඳ තවත් ගැඹුරු ලිපි කියවීමට ඔබට අවශ්‍ය විය හැකිය ; එය මෙම පිළිතුරෙන් පරිබාහිර ය.

හරි, තවමත් අභිරුචි-රූප-හෝ ව්‍යාජ මූලද්‍රව්‍ය විසඳුමක් ගැන කුමක් කිව හැකිද?

TL; DR: මෙය ක්‍රියාත්මක නොවන බව පෙනේ, ඒ වෙනුවට අභිරුචි පිරික්සුම් කොටුව භාවිතා කරන්න

පළමුවෙන්ම, වෙනත් බ්‍රව්සර්වල පිරික්සුම් කොටුවේ නිරූපකය තුළ ඇති ව්‍යාජ ආන්තිකයන් අත්තනෝමතික නම්, ස්ථාවර විසඳුමක් නොමැති බව අපි සටහන් කරමු. එකක් තැනීම සඳහා, පවතින බ්‍රව්සර්වල එවැනි රූපවල ව්‍යුහ විද්‍යාව ගවේෂණය කළ යුතුය.

පිරික්සුම් කොටු වල ව්‍යාජ ආන්තිකයන් ඇති බ්‍රව්සර් මොනවාද? මම ක්‍රෝම් 75, විවාල්ඩි 2.5 (ක්‍රෝමියම් මත පදනම් වූ), ෆයර්ෆොක්ස් 54 (එවැනි යල් පැන ගිය ඇයිදැයි විමසන්න එපා), අයිඊ 11, එජ් 42, සෆාරි ?? (විනාඩියකට එකක් ණයට ගත්තා, අනුවාදය පරීක්ෂා කිරීමට අමතක විය). ක්‍රෝම් සහ විවාල්ඩි පමණක් එවැනි ව්‍යාජ ආන්තිකයන් ඇත (ඔපෙරා වැනි සියලුම ක්‍රෝමියම් මත පදනම් වූ බ්‍රව්සර් ද මම සැක කරමි).

එම ව්‍යාජ ආන්තිකයන්ගේ ප්‍රමාණය කුමක්ද? මෙය වටහා ගැනීමට කෙනෙකුට විශාලනය කළ පිරික්සුම් කොටුවක් භාවිතා කළ හැකිය:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

මගේ ප්‍රති result ලය පළල / උසින්% 7% ක් වන අතර එබැවින් නිරපේක්ෂ ඒකක වලින් 0.9-1.0px වේ. නිරවද්‍යතාවය ප්‍රශ්න කළ හැකි වුවද: zoomපිරික්සුම් කොටුව සඳහා විවිධ අගයන් උත්සාහ කරන්න . ක්‍රෝම් සහ විවාල්ඩි යන දෙකෙහිම මා කළ පරීක්ෂණ වලදී ව්‍යාජ ආන්තිකයේ සාපේක්ෂ ප්‍රමාණය zoom10, 20 අගයන් හා 11-19 (??) අගයන්ට වඩා බෙහෙවින් වෙනස් ය :

scale වඩා අනුකූල බව පෙනේ:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

එබැවින් බොහෝ විට ~ 14% සහ 2px නිවැරදි අගයන් වේ.

ව්‍යාජ ආන්තිකයේ ප්‍රමාණය (?) දැන් අප දන්නා බැවින් මෙය ප්‍රමාණවත් නොවන බව සලකමු. සියලුම බ්‍රව්සර් සඳහා පිරික්සුම් කොටුවේ අයිකනවල ප්‍රමාණය සමානද? අහෝ! අස්ථිර පිරික්සුම් කොටු සඳහා DOM පරීක්ෂක පෙන්වන දේ මෙන්න:

• ෆයර්ෆොක්ස්: 13.3px
• ක්‍රෝමියම් මත පදනම් වූ: සමස්ත දේ සඳහා 12.8px , එබැවින් දෘශ්‍ය ලෙස පිරික්සුම් කොටුව ලෙස පෙනෙන දේ සඳහා 12.8 (100% - 14%) = 11px
• IE 11, එජ්: 13px
• සෆාරි: n / a (මේවා එකම තිරයේ සැසඳිය යුතුය, මම විශ්වාස කරමි)

දැන් අපි විසඳුම් හෝ උපක්‍රම සාකච්ඡා කිරීමට පෙර විමසමු: නිවැරදි දේ කුමක්ද? පෙළගැස්මක් කුමක්ද? අප අත්කර ගැනීමට උත්සාහ කරන්නේ කුමක්ද? යම් තාක් දුරට එය රසය පිළිබඳ කාරණයකි, නමුත් මූලික වශයෙන් මට පහත දැක්වෙන “හොඳ” පෙළගැස්මේ අංශ ගැන සිතිය හැකිය:

පෙළ සහ පිරික්සුම් කොටුව එකම පාදම මත (මම හිතාමතාම මෙහි පිරික්සුම් කොටුවේ ප්‍රමාණය වෙනස් නොකරමි):

හෝ කුඩා අකුරු අනුව එකම මැද රේඛාවක් තිබිය යුතුය:

හෝ ලොකු අකුරු අනුව එකම මධ්‍යම රේඛාව (විවිධ අකුරු ප්‍රමාණය සඳහා වෙනස දැකීම පහසුය):

තවද, පිරික්සුම් කොටුවේ විශාලත්වය කුඩා අකුරක උසකට, ලොකු අකුරකට හෝ වෙනත් දෙයකට (විශාල, කුඩා හෝ කුඩා අකුරු සහ ප්‍රාග්ධනය අතර) සමාන විය යුතුද යන්න අප විසින් තීරණය කළ යුතුය.

මෙම සාකච්ඡාව සඳහා, පිරික්සුම් කොටුව පා text යට සමාන පදනමක් මත තිබේ නම් සහ ලොකු අකුරක ප්‍රමාණය (ඉහළ තර්ක කළ හැකි තේරීමක්) තිබේ නම්, පෙළගැස්මක් හොඳයි යැයි කියමු:

දැන් අපට තිබිය යුතු මෙවලම්:

1. පිරික්සුම් කොටුවේ ප්‍රමාණය වෙනස් කරන්න
2. ක්‍රෝමියම් එහි ව්‍යාජ ආන්තික පිරික්සුම් කොටුව සමඟ හඳුනාගෙන නිශ්චිත මෝස්තර සකසන්න
3. පිරික්සුම් කොටුව / ලේබල් සිරස් පෙළගැස්ම සකසන්න

?

1. සම්බන්ධයෙන් කොටුව සලකුණු ප්රමාණය ගැලපුම් : ඇත width, height, size, zoom, scale(මම හැමදාම යමක් ඉගෙනගන්නවා ඇත?). zoomහා scaleඔවුන් පමණක් පෙළ ප්රමාණය ගැසීට්රම්දී උදව් විය හැකි නිසා, හරස් වෙබ් බ්රව්සරය ප්රමාණය පිහිටුවා නැත (අප බ්රවුසරයට විශේෂිත නීති ලියන්න පුළුවන් නම්), නියත ප්රමාණය සකස් කිරීමට ඉඩ දෙන්නේ නැහැ. sizeක්‍රෝම් සමඟ ක්‍රියා නොකරයි (එය පැරණි අයිඊ සමඟ වැඩ කළාද? කෙසේ වෙතත් එය එතරම් සිත්ගන්නා සුළු නොවේ). widthසහ heightක්‍රෝම් සහ වෙනත් බ්‍රව්සර් වල වැඩ කරන්න, එවිට අපට පොදු ප්‍රමාණයක් සැකසිය හැකිය, නමුත් නැවතත්, ක්‍රෝම් හි එය සකසන්නේ සම්පූර්ණ රූපයේ ප්‍රමාණය මිස පිරික්සුම් කොටුව නොවේ. සටහන: එය අවම (පළල, උස) වන අතර එය පිරික්සුම් කොටුවේ විශාලත්වය අර්ථ දක්වයි (පළල ≠ උස නම්, පිරික්සුම් කොටුවේ පිටත ප්‍රදේශය "ව්‍යාජ ආන්තිකයට" එකතු කරනු ලැබේ).

   අවාසනාවන්ත දෙයක් නම්, මට පෙනෙන පරිදි, ක්‍රෝම් පිරික්සුම් කොටුවේ ව්‍යාජ ආන්තිකයන් කිසිදු පළලක් සහ උසකට ශුන්‍යයට සකසා නැත.

2. මේ දිනවල විශ්වාසදායක CSS පමණක් ක්‍රමයක් නොමැති බව මම බිය වෙමි .

3. සිරස් පෙලගැස්ම සලකා බලමු. ක්‍රෝම් හි ව්‍යාජ ආන්තිකයට vertical-alignසැකසූ විට middleහෝ ස්ථාවර baselineප්‍රති results ල ලබා දිය නොහැක , සියලුම බ්‍රව්සර් සඳහා එකම “ඛණ්ඩාංක පද්ධතියක්” ලබා ගැනීමට ඇති එකම සැබෑ විකල්පය නම් ලේබලය සහ ආදානය පෙළගැස්වීම top:

   

   (පින්තූරයේ: සිරස්-පෙළගැස්වීම: කොටු-සෙවනැල්ල නොමැතිව ඉහළ, පහළ සහ පහළ)

ඉතින් මෙයින් අපට ලැබෙන ප්‍රති result ලය කුමක්ද?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

ඉහත ස්නිපටය ක්‍රෝම් (ක්‍රෝමියම් මත පදනම් වූ බ්‍රව්සර්) සමඟ ක්‍රියා කරයි, නමුත් අනෙක් බ්‍රව්සර් සඳහා පිරික්සුම් කොටුවේ කුඩා ප්‍රමාණයක් අවශ්‍ය වේ. ක්‍රෝමියම් හි පිරික්සුම් කොටුවේ අනුරූප විචලනය වටා ක්‍රියා කරන ආකාරයට ප්‍රමාණය සහ සිරස් පෙලගැස්ම යන දෙකම සකස් කළ නොහැකි බව පෙනේ. මගේ අවසාන යෝජනාව නම්: ඒ වෙනුවට අභිරුචි පිරික්සුම් කොටු භාවිතා කරන්න - එවිට ඔබ කලකිරීමට පත් නොවනු ඇත :)

දැන් සියලු නවීන බ්‍රව්සර්වල නම්යශීලී කොටුව සහය දක්වයි, මේ වගේ දෙයක් මට පහසු ප්‍රවේශයක් සේ පෙනේ.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

මෙන්න සම්පූර්ණ උපසර්ග අනුවාදය නිරූපණය:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

මම හිතන්නේ මෙය පහසුම ක්‍රමයයි

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

සාපේක්ෂ ස්ථානගත කිරීමකට මා කැමති නැත, මන්ද එය සියල්ලටම වඩා එහි මූලද්‍රව්‍යයන් විදැහුම් කරයි (ඔබට සංකීර්ණ පිරිසැලසුමක් තිබේ නම් එයට යමක් ලබා ගත හැකිය).

vertical-align: subක්‍රෝම්, ෆයර්ෆොක්ස් සහ ඔපෙරා සමඟ පෙලගැසී ඇති පිරික්සුම් කොටු හොඳ පෙනුමක් ඇති බව මම සොයා ගතිමි . මට මැකෝස් නොමැති නිසා සහ අයිඊ 10 තරමක් අක්‍රිය වී ඇති බැවින් සෆාරි පරීක්ෂා කළ නොහැක, නමුත් එය මට හොඳ විසඳුමක් බව මට පෙනී ගියේය.

තවත් විසඳුමක් වනුයේ සෑම බ්‍රව්සරයක් සඳහාම විශේෂිත CSS සෑදීම සහ% / පික්සෙල් / ඊඑම් වල සිරස්-පෙළගැස්වීමකින් එය මනාව සකස් කිරීමයි: http://css-tricks.com/snippets/css/browser-specific-hacks/

මෙය මට හොඳින් ක්‍රියාත්මක වේ:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

ක්‍රෝම් 28 ඕඑස්එක්ස් හි 400+ උඩුකුරු සහිත තෝරාගත් පිළිතුර මා වෙනුවෙන් ක්‍රියා නොකළේ, බොහෝ විට එය ඕඑස්එක්ස් හි පරීක්‍ෂා නොකිරීම නිසා හෝ 2008 දී මෙම ප්‍රශ්නයට පිළිතුරු සපයන විට එය ක්‍රියාත්මක වූ නිසා විය හැකිය.

කාලය වෙනස් වී ඇති අතර නව CSS3 විසඳුම් දැන් කළ හැකි ය. මගේ විසඳුම අභිරුචි පිරික්සුම් කොටුවක් නිර්මාණය කිරීම සඳහා ව්‍යාජ වචන භාවිතා කරයි . එබැවින් නියමයන් (වාසි හෝ අවාසි, කෙසේ වෙතත් ඔබ එය දෙස බැලුවද) පහත පරිදි වේ.

• නවීන බ්‍රව්සර්වල පමණක් ක්‍රියාත්මක වේ (FF3.6 +, IE9 +, Chrome, Safari)
• අභිරුචි ලෙස නිර්මාණය කරන ලද පිරික්සුම් කොටුවක් මත රඳා පවතී, එය සෑම බ්‍රව්සරයක / මෙහෙයුම් පද්ධතියකම හරියටම සමාන වේ. මෙන්න මම දැන් සරල වර්ණ කිහිපයක් තෝරාගෙන ඇත, නමුත් ඔබට සෑම විටම රේඛීය ශ්‍රේණි එකතු කළ හැකි අතර එය වැඩි වේගයක් ලබා දේ.
• යම් අකුරු / අකුරු ප්‍රමාණයකට යොමු කර ඇති අතර, එය වෙනස් වුවහොත්, ඔබ සිරස් අතට පෙලගැසී ඇති බව පෙනෙන පරිදි සලකුණු කොටුවේ ස්ථානගත කිරීම සහ ප්‍රමාණය වෙනස් කරයි. නිවැරදිව අතුල්ලනු ලැබුවහොත්, අවසාන ප්‍රති result ලය සියලුම බ්‍රව්සර් / මෙහෙයුම් පද්ධතිවල හරියටම සමාන විය යුතුය.
• සිරස්-පෙළගැස්වීමේ ගුණාංග නැත, පාවෙන නැත
• මගේ උදාහරණයේ දී සපයා ඇති සලකුණු භාවිතා කළ යුතුය, ප්‍රශ්නය මෙන් ව්‍යුහගත වී ඇත්නම් එය ක්‍රියා නොකරනු ඇත, කෙසේ වෙතත්, පිරිසැලසුම අත්‍යවශ්‍යයෙන්ම එක හා සමාන වනු ඇත. ඔබට දේවල් එහා මෙහා ගෙනයාමට අවශ්‍ය නම්, ඔබට සම්බන්ධිත CSS ද ගෙන යා යුතුය

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

මෙම විසඳුම පිරික්සුම් කොටුව සඟවන අතර දෘශ්‍ය පිරික්සුම් කොටුව නිර්මාණය කිරීම සඳහා ලේබලයට ව්‍යාජ නාම එකතු කරයි. ලේබලය සැඟවුණු පිරික්සුම් කොටුවට සම්බන්ධ කර ඇති නිසා, ආදාන ක්ෂේත්‍රය තවමත් යාවත්කාලීන වන අතර වටිනාකම පෝරමය සමඟ ඉදිරිපත් කෙරේ.

ඔබ කැමති නම්, මෙන්න මම රේඩියෝ බොත්තම් ලබා ගනිමි: http://jsfiddle.net/DtKrV/2/

යමෙකුට මෙය ප්‍රයෝජනවත් වේ යැයි සිතමි!

මට කවදාවත් මේ වගේ දෙයක් කරන්න ප්‍රශ්නයක් නැහැ:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

ඔබ ASP.NET වෙබ් පෝරම භාවිතා කරන්නේ නම් DIVs සහ වෙනත් අංග හෝ ස්ථාවර ප්‍රමාණ ගැන කරදර විය යුතු නැත. CSS හි ඇති CheckboxList ආදාන වර්ගයට <asp:CheckBoxList>සැකසීමෙන් අපට පෙළ float:leftපෙළගස්වා ගත හැකිය.

කරුණාකර පහත උදාහරණ කේතය පරීක්ෂා කරන්න:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.ASPX කේතය:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

ඔබ ට්විටර් බූට්ස්ට්‍රැප් භාවිතා කරන්නේ නම්, ඔබට checkboxපන්තිය භාවිතා කළ හැක්කේ <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

ආදාන වර්ගයේ පිරික්සුම් කොටුවක් සමඟ ලේබලය තුළට ඔතා වමට පාවෙමින් තිබේ:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

මෙය මට ප්‍රයෝජනවත් විය:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

(බ්ලොක්ලෙවල්) හි රේඛීය උසට සමාන බව තහවුරු කරගන්න.

පිරික්සුම් කොටුවේ උස හා පළල දෘඩ කේතනය කරන්න, එහි පෑඩින් ඉවත් කර එහි උස සහ සිරස් ආන්තිකය ලේබලයේ රේඛීය උසට සමාන කරන්න. ලේබල් පා line ය පේළිගත නම්, පිරික්සුම් කොටුව පාවෙන්න. ෆයර්ෆොක්ස්, ක්‍රෝම් සහ අයිඊ 7 + සියල්ලම පහත උදාහරණය එක හා සමාන වේ: http://www.kornea.com/css-checkbox-align

මම සාමාන්‍යයෙන් පිරික්සුම් කොටුවක් ලේබල් නොකර තබා එහි "ලේබලය" වෙනම අංගයක් බවට පත් කරමි. එය වේදනාවක්, නමුත් පිරික්සුම් කොටු සහ ඒවායේ ලේබල පෙන්වන ආකාරය අතර හරස් බ්‍රව්සර් වෙනසක් ඇත (ඔබ දැක ඇති පරිදි) සෑම දෙයක්ම පෙනෙන ආකාරය පාලනය කිරීමට මට ළං විය හැකි එකම ක්‍රමය මෙයයි.

මමත් මෙය කරන්නේ වින්ෆෝම්ස් සංවර්ධනයේදීය, එකම හේතුව නිසාය. මම සිතන්නේ පිරික්සුම් කොටුවේ පාලනයේ මූලික ගැටළුව එය සැබවින්ම වෙනස් පාලක දෙකක් වීමයි: කොටුව සහ ලේබලය. පිරික්සුම් කොටුවක් භාවිතා කිරීමෙන්, එම මූලද්‍රව්‍ය දෙක එකිනෙකට යාබදව පෙන්වන්නේ කෙසේද යන්න තීරණය කිරීම සඳහා ඔබ එය පාලක ක්‍රියාත්මක කරන්නන්ට භාර දෙයි (ඒවා සෑම විටම වැරදියට වැටේ, එහිදී වැරදි = ඔබට අවශ්‍ය දේ නොවේ).

ඔබේ ප්‍රශ්නයට වඩා හොඳ පිළිතුරක් යමෙකු සතුව ඇතැයි මම විශ්වාස කරමි.

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

ඉහත කේතය මඟින් ඔබේ ලැයිස්තු අයිතම තුනක තැන්පත් කර පළල ගැලපෙන පරිදි වෙනස් කරනු ඇත.

පහත දැක්වෙන්නේ IE9 පවා බ්‍රව්සර් හරහා පික්සල් පරිපූර්ණ අනුකූලතාවක් ලබා දෙයි:

පැහැදිලිව පෙනෙන පරිදි ප්‍රවේශය තරමක් සංවේදී ය:

1. ආදානයක් සහ ලේබලයක් සාදන්න.
2. ඒවා බ්ලොක් ලෙස ප්‍රදර්ශනය කරන්න, එවිට ඔබට කැමති පරිදි ඒවා පාවී යා හැකිය.
3. සිරස් අතට කේන්ද්‍රගත වී පෙළගැස්වීම සහතික කිරීම සඳහා උස සහ රේඛීය උස එකම අගයකට සකසන්න.
4. සඳහා em මිනුම්, මූලද්රව්ය උස ගණනය කිරීමට, බ්රව්සරය එම මූලද්රව්ය සඳහා අකුරු උස දැන සිටිය යුතුය, නමුත් එය em මිනුම් සකස් කර නො ගත යුතු ය.

මෙහි ප්‍රති results ලය ගෝලීය වශයෙන් අදාළ වන පොදු රීතියකි:

input, label {display:block;float:left;height:1em;line-height:1em;}

අකුරු ප්‍රමාණය අනුවර්තනය කළ හැකි ආකාරයකට, ක්ෂේත්‍ර කට්ටලයක් හෝ මූලද්‍රව්‍යයක්.

#myform input, #myform label {font-size:20px;}

මැක්, වින්ඩෝස්, අයිෆෝන් සහ ඇන්ඩ්‍රොයිඩ් වල නවතම ක්‍රෝම්, සෆාරි සහ ෆයර්ෆොක්ස් වලින් පරීක්ෂා කර ඇත. සහ IE9.

එක් පෙළකට වඩා වැඩි නොවන සියලුම ආදාන වර්ග සඳහා මෙම ක්‍රමය අදාළ වේ. ගැලපෙන පරිදි වර්ග රීතියක් යොදන්න.

එබැවින් මෙය බොහෝ වාර ගණනක් පිළිතුරු දී ඇති බව මම දනිමි, නමුත් දැනටමත් ලබා දී ඇති විසඳුම් වලට වඩා අලංකාර විසඳුමක් මට ඇති බව මට හැඟේ. අලංකාර විසඳුමක් 1 ක් පමණක් නොව, ඔබේ මනස්කාන්තය හීලෑ කිරීම සඳහා වෙනම විසඳුම් 2 ක්. එය පැවසීමත් සමඟ, ඔබ දැනගත යුතු සහ දැකීමට අවශ්‍ය සියල්ල අදහස් 2 ජේඑස් ෆිදෙල් හි අඩංගු වේ.

විසඳුම # 1 රඳා පවතින්නේ ලබා දී ඇති බ්‍රව්සරයේ ස්වදේශික "පිරික්සුම් කොටුව" මත ය. (මෙය ඔබට එෆ්එෆ් හි අවලස්සන මායිම් දැකිය නොහැක)

සරල HTML: (අදහස් දැක්වීම් සමඟ CSS සමාලෝචනය කිරීමට සබැඳිය අනුගමනය කරන්න, කේත වාරණය යනු ස්ටොක් ඕවර් ප්‍රවාහය තෘප්තිමත් කිරීමයි) http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

විසඳුම # 2 “චෙක්බොක්ස් ටොගල් හැක්” භාවිතා කරන්නේ ඩීඅයිවී එකක සීඑස්එස් තත්වය ටොගල් කිරීමටය, එය බ්‍රව්සරය පුරා නිසි ලෙස ස්ථානගත කර ඇති අතර, සලකුණු නොකළ සහ පරීක්ෂා කරන ලද රාජ්‍යයන් සඳහා සරල ස්ප්‍රයිට් සමඟ සැකසීම. අවශ්‍ය වන්නේ ඉහත සඳහන් පිරික්සුම් කොටුව ටොගල් හැක් සමඟ පසුබිම් පිහිටීම සකස් කිරීමයි. ඔබේ පිරික්සුම් කොටු සහ විකිරණශාලා පිළිබඳ වැඩි පාලනයක් ඔබට ඇති බැවින් මෙය වඩාත් අලංකාර විසඳුමක් වන අතර බ්‍රව්සරය පුරා ඒවා එක හා සමාන බව සහතික කළ හැකිය.

සරල HTML: (අදහස් දැක්වීම් සමඟ CSS සමාලෝචනය කිරීමට සබැඳිය අනුගමනය කරන්න, කේත වාරණය යනු StackOverflow තෘප්තිමත් කිරීමයි) http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

යමෙක් මෙම ක්‍රමවේදයන්ට එකඟ නොවන්නේ නම්, කරුණාකර මට අදහස් දක්වන්න, අනෙක් අය මෙම විසඳුම් ලබා නොගන්නේ මන්ද යන්න පිළිබඳ යම් ප්‍රතිපෝෂණයක් ඇසීමට මම කැමතියි, නැතහොත් ඒවා තිබේ නම්, ඒවා සම්බන්ධයෙන් මෙහි කිසිදු පිළිතුරක් මා නොදකින්නේ ඇයි? මෙම ක්‍රම වලින් එකක් අසාර්ථක වන බව යමෙකු දුටුවහොත්, එයද දැකීම සතුටක් වනු ඇත, නමුත් මේවා නවතම බ්‍රව්සර්වල අත්හදා බලා ඇති අතර HTML / CSS ක්‍රම මත රඳා පවතින අතර එය පැරණි හා විශ්වීය ලෙස මා දැක ඇති තාක් දුරට විශ්වීය වේ.

ඔව් ස්තූතියි! මේකත් මට සදහටම ගෙඩි ගහනවා.

මගේ විශේෂ අවස්ථාවෙහිදී, මෙය මට ප්‍රයෝජනවත් විය:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

මම භාවිතා කරන්නේ reset.css සමහර වෙනස්කම් පැහැදිලි කළ හැකි නමුත් මෙය මට හොඳින් ක්‍රියාත්මක වන බව පෙනේ.

position: relative; z- දර්ශකය සහ jQuery හි විනිවිදක / විනිවිදක වැනි සජීවිකරණ සමඟ IE හි ගැටළු කිහිපයක් ඇත.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

මෝස්තරයේ භාවිතා කර ඇති අකුරු ප්‍රමාණය අනුව වෙනස් කිරීම් අවශ්‍ය වේ <label>

PS: IE6 හි CSS වැඩ කිරීමට
මම ie7js භාවිතා කරමි .

පාවිච්චි කරන්න vertical-align: subලෙස, pokrishka දැනටමත් යෝජනා කළේය.

ෆෙඩෙල්

HTML කේතය:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS කේතය:

.checkboxes input {
    vertical-align: sub;
}

සරල විසඳුම:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Chrome, Firefox, IE9 +, Safari, iOS 9+ හි පරීක්ෂා කර ඇත