كيفية محاذاة خانات التسميات باستمرار عبر المتصفحات

Question

هذا هو واحد من CSS طفيفة المشاكل التي ابتليت لي باستمرار.كيف الناس حول تجاوز سعة مكدس محاذاة عموديا checkboxes و labels باستمرار عبر متصفح?كلما محاذاة بشكل صحيح في سفاري (عادة باستخدام vertical-align: baseline على input), أنهم تماما في فايرفوكس وإنترنت إكسبلورر.إصلاحه في فايرفوكس و سفاري و أي حتما عابث.لا تضيعوا الوقت على هذا في كل مرة كنت رمز نموذج.

هنا هو رمز القياسية أن أعمل مع:

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

وعادة ما تستخدم إريك ماير إعادة تعيين ، لذلك شكل عناصر نظيفة نسبيا من تجاوزات.نتطلع إلى أي نصائح أو الحيل التي لديك لتقدمه!

Answer 1

بعد أكثر من ساعة من التغيير والتبديل ، واختبار محاولة أنماط مختلفة من العلامات ، أعتقد أنني قد حل لائق.متطلبات هذا المشروع:

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 الإعلان هو مضمنة أي هاك (النجم-خاصية الإختراق).كل من إنترنت إكسبلورر 6 و 7 سوف تلاحظ ذلك, ولكن سفاري و فايرفوكس سوف بشكل صحيح تجاهله.أعتقد أنه قد تكون صالحة CSS, ولكن لا يزال كنت أفضل حالا مع الشرطي التعليقات ؛ استخدامه فقط عن البساطة.
• يمكن أن أقول أنها أفضل فقط vertical-align بيان أن متسقة في جميع المتصفحات كان vertical-align: bottom.وضع هذا ثم نسبيا تحديد المواقع صعودا تصرف مماثل تقريبا في سفاري, فايرفوكس وإنترنت إكسبلورر فقط مع عنصر أو اثنين من التناقض.
• المشكلة الرئيسية في العمل مع المحاذاة هي أن أي العصي مجموعة من الفضاء الغامض حول عناصر الإدخال.ليس من الحشو أو الهامش الان مستمرة.تحديد العرض والارتفاع على مربع ثم overflow: hidden لسبب ما يقطع مساحة إضافية تسمح أي المواقع على التصرف بطريقة مماثلة جدا سفاري و فايرفوكس.
• اعتمادا على النص الخاص بك التحجيم ، فأنت بلا شك تحتاج إلى ضبط المواقع النسبية, عرض, ارتفاع, وما إلى ذلك للحصول على الأشياء التي تبحث صحيح.

آمل أن يساعد هذا شخص آخر!لم أحاول هذا تقنية محددة بشأن أي مشاريع أخرى من واحد كنت أعمل على هذا الصباح لذا بالتأكيد الأنابيب إذا وجدت شيء يعمل بصورة أكثر انتظاما.

Answer 2

في بعض الأحيان vertical-align يحتاج مضمنة (العمر ، التسمية ، الإدخال ، الخ...) العناصر بجانب بعضها البعض للعمل بشكل صحيح.التالية خانات بشكل صحيح محورها عموديا في أي سفاري, FF, والكروم, حتى لو كان حجم النص صغير جدا أو كبيرة.

أنهم جميعا تطفو بجانب بعضها البعض على نفس الخط ، ولكن nowrap يعني أن كل نص التسمية يبقى دائما بجانب خانة الاختيار.

الجانب السلبي هو الزائد لا معنى له 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>

الآن, إذا كان لديك طويلة جدا التسمية نص حاجة التفاف دون التفاف تحت خانة الاختيار ، كنت تستخدم الحشو السلبية النص المسافة البادئة على تسمية العناصر:

.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>

Answer 3

العمل من القلم للتلوين واحد هو الحل, لدي شيء يعمل بالنسبة لي و هو أبسط:

.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>

يجعل بكسل مقابل بكسل نفسه في سفاري (الأساس الذي أثق) و كل من فايرفوكس و IE7 تحقق جيدة.فإنه يعمل أيضا على مختلف تسمية الخط الأحجام الكبيرة والصغيرة.الآن لتحديد أي خط الأساس في اختيار المدخلات...

---

تحديث: (طرف ثالث تحرير)

المناسبة bottom موقف يعتمد على الخط بين أفراد الأسرة و حجم الخط!وجدت باستخدام bottom: .08em; بالنسبة مربع & راديو عناصر جيدة العامة قيمة.اختبرته في كروم/فايرفوكس/IE11 في ويندوز مع Arial & Calibri الخطوط باستخدام عدة صغيرة/متوسطة/كبيرة في حجم الخط.

.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>

Answer 4

واحد من السهل أن يبدو للعمل بشكل جيد هو تطبيق ضبط الوضع الرأسي خانة الاختيار عمودي محاذاة.وسوف تكون لا تزال تختلف عبر المتصفحات ، ولكن الحل هو غير معقدة.

input {
    vertical-align: -2px;
}

المرجعية

Answer 5

محاولة vertical-align: middle

أيضا رمز يبدو أنه ينبغي أن يكون:

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

Answer 6

محاولة حل بي, حاولت ذلك في IE 6, FF2 و كروم و يجعل بكسل بكسل في كل ثلاثة المتصفحات.

* {
  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>

Answer 7

تماما فقط العامل الحل بالنسبة لي هو:

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

اختبرت اليوم في كروم, فايرفوكس, اوبرا, IE 7 و 8.على سبيل المثال: كمان

Answer 8

وعادة ما تستخدم خط الطول من أجل ضبط الوضع الرأسي من نص ثابت:

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>

على أمل أن يساعد.

Answer 9

ليس لدي اختبار تماما الحل ، ولكن يبدو أن العمل العظيم.

بلدي HTML هو ببساطة:

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

ثم تعيين كافة خانات الاختيار 24px لكل من الطول والعرض.لجعل النص محاذاة لقد جعل التسمية line-height أيضا 24px وتعيين vertical-align: top; مثل ذلك:

تحرير: بعد أي اختبار أضفت vertical-align: bottom; إلى إدخال تغيير التسمية CSS.قد تجد ما تحتاجه المشروط أي 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;
}

إذا كان أي شخص يرى أن هذا لا يعمل, يرجى التكرم اسمحوا لي أن أعرف.هنا هو أنه في العمل (في كروم وإنترنت إكسبلورر - الاعتذار كما تم أخذ لقطات على شبكية العين باستخدام التشابه IE):

Answer 10

أعتقد أن هذا هو أسهل طريقة

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

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

Answer 11

هذا يعمل بشكل جيد بالنسبة لي:

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>

Answer 12

أنا لا أحب تحديد المواقع النسبية لأنه يجعل عنصر المقدمة فوق كل شيء آخر على مستوى (يمكن أن تحصل على شيء إذا كان لديك تخطيط معقد).

لقد اكتشفت أن vertical-align: sub يجعل خانات تبدو جيدة بما فيه الكفاية الانحياز في كروم ، فايرفوكس وأوبرا.لا يمكن أن تحقق سفاري منذ ليس لدي ماك و IE10 هو قليلا قبالة ، ولكن لقد وجدت لها أن تكون جيدة بما فيه الكفاية حل بالنسبة لي.

حل آخر قد يكون محاولة لجعل CSS محددة لكل متصفح و ضبط ذلك مع بعض vertical-align بنسبة %/بكسل/EMs:http://css-tricks.com/snippets/css/browser-specific-hacks/

Answer 13

الآن flexbox معتمد في جميع المتصفحات الحديثة ، شيء مثل هذا يبدو وكأنه نهج أسهل بالنسبة لي.

<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>

Answer 14

لم يكن لدي مشكلة مع ذلك مثل هذا:

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

Answer 15

فقط أريد أن أضيف أن النقاش حول 'ل' السمة على تسميات (قليلا الحمل والولادة):

يرجى العرض ، حتى عندما انها ليست ضرورية, لأنها مريحة جدا للاستخدام من جافا سكريبت:

var label = ...
var input = document.getElementById(label.htmlFor);

وهذا هو الكثير أكثر ملاءمة من يحاول معرفة هيتر التسمية قد الإدخال المتداخلة ، أو هيتر الإدخال هو قبل التسمية أو بعد..الخ.وأنه لم يسيء إلى العرض عليه..لذلك.

فقط my 2 cents.

Answer 16

إذا كنت تستخدم ASP.NET نماذج ويب كنت لا داعي للقلق حول DIVs وغيرها من العناصر أو أحجام ثابتة.ونحن يمكن محاذاة <asp:CheckBoxList> النص من خلال وضع float:left إلى CheckboxList نوع الإدخال في CSS.

يرجى التحقق من المثال التالي كود:

.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>

Answer 17

الجواب المختار مع 400+ القطرية لم يكن العمل بالنسبة لي في كروم 28 OSX, ربما لأنه لم يكن اختبار في OSX أو أنه لم يعمل في كل ما هو حولنا في عام 2008 عندما كان هذا السؤال أجاب.

الزمن قد تغير و CSS3 الجديدة الحلول الآن ممكنا.الحل يستخدم pseudoelements لإنشاء مخصص مربع.لذا ورد (إيجابيات أو سلبيات ، ومع ذلك يمكنك ننظر في الأمر) هي كما يلي:

• يعمل فقط في المتصفحات الحديثة (FF3.6+ ، IE9+, Chrome, Safari)
• يعتمد على تصميم مخصص مربع ، التي سيتم تقديمها بالضبط نفس في كل متصفح/OS.هنا لقد اختار بعض ألوان بسيطة ، ولكن يمكنك دائما إضافة التدرجات الخطية مثل أن تعطيه المزيد من الانفجار.
• وتوجه معين الخط/حجم الخط الذي إذا تغيرت, كنت ببساطة تغيير المواقع و حجم مربع لجعلها تظهر عموديا الانحياز.إذا أنب بشكل صحيح ، فإن النتيجة النهائية يجب أن تكون لا تزال بالقرب من بالضبط نفس في كل متصفح / أنظمة التشغيل.
• لا عمودي محاذاة خصائص لا يطفو
• يجب استخدام العلامات في بلدي على سبيل المثال ، فإنه لن يعمل إن تنظيما مثل هذا السؤال ، ومع ذلك ، فإن تخطيط أساسا ننظر نفسه.إذا كنت ترغب في نقل الأشياء من حولك ، يجب عليك أيضا نقل المرتبطة CSS

HTML الخاص بك:

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

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;
}

هذا الحل يخفي مربع, و يضيف و الأساليب pseudoelements إلى التسمية لخلق مرئية خانة الاختيار.لأن التسمية مرتبطة خفية مربع, حقل الإدخال سوف لا يزال الحصول على تحديث القيمة التي سيتم تقديمها مع النموذج.

jsFiddle: http://jsfiddle.net/SgXYY/6/

وإذا كنت مهتم هنا بلدي يأخذ على أزرار الراديو: http://jsfiddle.net/DtKrV/2/

نأمل شخص ما تجد هذا مفيدا!

Answer 18

إذا كنت تستخدم تويتر التمهيد, يمكنك فقط استخدام checkbox الدرجة على <label>:

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

Answer 19

تضمين مربع الطول والعرض ، وإزالة الحشو فيها بالإضافة إلى ارتفاع عمودي هوامش يساوي تسمية خط الطول.إذا نص التسمية غير مضمنة ، تعويم خانة الاختيار.فايرفوكس, الكروم, IE7+ كل تقديم المثال التالي مماثل: http://www.kornea.com/css-checkbox-align

Answer 20

<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>

الخدعة هو استخدام vertical-align فقط في خلايا الجدول أو مضمنة كتلة في حالة استخدام تسمية الوسم.

Answer 21

مع إدخال نوع خانة الاختيار ملفوفة داخل التسمية و طفت على اليسار كما يلي:

<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;
}

تأكد من ارتفاع مطابقة خط الطول من (blocklevel) .

Answer 22

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 23

دعونا أخيرا أن نلقي نظرة على مصدر المشكلة

خانات يتم تقديمها باستخدام الصور (ويمكن تحديد تلك المخصصة عن طريق CSS).هنا هو (لحالها) خانة الاختيار في فايرفوكس, وأبرز مع DOM المفتش:

وهنا نفس unstyled مربع في كروم:

تستطيع أن ترى في هامش (البرتقالي);الحشو غير موجود (سيظهر الأخضر).إذن ما هو هذا الزائفة الهامش على اليمين و على الجزء السفلي من مربع? هذه هي أجزاء من الصورة استخدام مربع.هذا هو السبب فقط باستخدام vertical-align: middle لا يكفي أن مصدر عبر متصفح المشاكل.

ماذا يمكننا أن نفعل حيال هذا ؟

خيار واحد واضح هو – استبدال الصور!لحسن الحظ, يمكن للمرء أن يفعل هذا عن طريق CSS و تحل محل تلك مع الصور الخارجية ، base64 (في CSS) الصور في CSS 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>

بلدي النتيجة هي ~7% من العرض/الارتفاع وبالتالي 0.9-1.0 بكسل في وحدة مطلقة.دقة قد يكون موضع تساؤل ، على الرغم من:محاولة قيم مختلفة zoom من أجل الاختيار.في بلدي التجارب في كل من كروم و فيفالدي الحجم النسبي الزائفة هامش مختلفة جدا في zoom القيم 10 و20 في القيم 11-19 (??):

scale يبدو أن أكثر اتساقا:

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

<input type=checkbox>

لذلك ربما ~14% و 2px هي القيم الصحيحة.

الآن أن نعرف (?) حجم شبه الهامش ، دعونا نلاحظ هذا لا يكفي.هي أحجام مربع الرموز نفسه على جميع المتصفحات ؟ للأسف!هنا ما DOM المفتش يدل على unstyled خانات:

• فايرفوكس: 13.3 px
• الكروم القائمة على: 12.8 px مقابل كل شيء ، ومن ثم 12.8 (100% - 14%) = 11px ما هو بصريا ينظر مربع
• IE 11, Edge: 13px
• سفاري:n/a (يجب أن تكون هذه مقارنة على نفس الشاشة ، أعتقد)

الآن قبل أن نناقش أي حلول أو الحيل ، دعونا نسأل:ما هو الصحيح المحاذاة ؟ ما الذي نحاول تحقيقه ؟ إلى نقطة معينة انها مسألة ذوق ، ولكن في الأساس أستطيع أن أفكر في ما يلي "لطيفة" التحالفات' جوانب:

نص و مربع على نفس الأساس (أنا تعمدت لا ضبط مربع الحجم هنا):

أو يكون نفس خط الوسط حيث من أحرف صغيرة:

أو نفس خط الوسط حيث من حروف (إنه من السهل أن نرى الفرق المختلفة حجم الخط):

و أيضا علينا أن نقرر ما إذا كان حجم خانة الاختيار يجب أن يكون على قدم المساواة إلى ارتفاع حرف صغير, حرف أو أي شيء آخر (أكبر, أصغر أو بين صغيرة ورأس المال).

في هذه المناقشة دعونا ندعو محاذاة لطيفة إذا كان مربع الاختيار على نفس الأساس كما نص على حرف (a المستبعد الاختيار):

الآن ما هي الأدوات التي يجب أن:

1. ضبط حجم مربع
2. التعرف على الكروم مع شبه مهمشين خانة الاختيار وتعيين أنماط محددة
3. ضبط مربع/ملصق المحاذاة العمودية

?

1. فيما يتعلق خانة تعديل حجم:هناك width, height, size, zoom, scale (هل فاتني شيء؟). zoom و scale لا تسمح لتعيين الحجم المطلق ، حتى أنها قد تساعد فقط مع ضبط حجم النص ، عبر متصفح حجم (ما لم نتمكن من كتابة المتصفح-قواعد محددة). size لا يعمل مع كروم (لم يعمل مع IE ؟ على أي حال, انها ليست مثيرة للاهتمام). width و height العمل في كروم وغيرها من المتصفحات, حتى نتمكن من تحديد حجم شيوعا, ولكن مرة أخرى, في كروم ذلك يحدد حجم الصورة كاملة ، وليس مربع نفسها.ملاحظة:هو الحد الأدنى(العرض والارتفاع) الذي يحدد مربع الحجم (إذا عرض ≠ ارتفاع, منطقة خارج مربع مربع إضافة إلى "شبه الهامش").

   والشيء المؤسف هو الزائفة الهوامش في مربع كروم لم يتم تعيين إلى الصفر أي عرض heights, بقدر ما أستطيع أن أرى.

2. أخشى أنه لا يمكن الاعتماد عليها CSS-الطريقة الوحيدة هذه الأيام.

3. دعونا النظر في المحاذاة العمودية. vertical-align لا يمكن أن تعطي نتائج متسقة عند تعيين إلى middle أو baseline بسبب كروم الزائفة هامش الخيار الحقيقي الوحيد للحصول على نفس "تنسيق النظام" على جميع المتصفحات هو محاذاة علامة الإدخال إلى top:

   

   (في الصورة:vertical-align:أعلى ، أسفل وأسفل دون box-shadow)

فما النتيجة التي نحصل عليها من هذا ؟

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

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

المقتطف أعلاه تعمل مع الكروم (الكروم القائمة على المتصفحات) ، ولكن المتصفحات الأخرى تتطلب حجم أصغر من مربع.يبدو أن من المستحيل ضبط كل من حجم و المحاذاة العمودية في الطريقة التي يعمل حول الكروم مربع صورة شاءت. اخر اقتراح هو:استخدام خانات مخصصة بدلا من ذلك – و عليك تجنب الإحباط :)

Answer 24

وعادة ما ترك خانة الاختيار المسماة ثم جعل "التسمية" عنصر مستقل.انها الألم, ولكن هناك الكثير عبر متصفح الفرق بين كيف خانات والتسميات يتم عرضها (كما لاحظت) أن هذه هي الطريقة الوحيدة التي يمكنني يمكن أن تقترب من السيطرة على كيف يبدو كل شيء.

أنا أيضا في نهاية المطاف القيام بذلك في winforms التنمية لنفس السبب.أعتقد أن المشكلة الأساسية مع التحكم خانة الاختيار هذا هو حقا اثنين من عناصر مختلفة:مربع التسمية.باستخدام مربع ، أنت وترك الأمر إلى منفذي أن تقرر كيف أن هؤلاء العناصر المعروضة بجوار بعضها البعض (و هم دائما على خطأ ، حيث الخطأ = لا ما تريد).

أنا حقا آمل أن شخص ما لديه أفضل إجابة على سؤالك.

Answer 25

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>

رمز أعلاه سيتم وضع قائمة من البنود في threecols فقط تغيير الاعراض لتناسب.

Answer 26

التالي يعطي بكسل مثالية الاتساق عبر المتصفحات ، حتى IE9:

النهج معقولة جدا ، لدرجة كونها واضحة:

1. إنشاء إدخال التسمية.
2. عرض لهم كتلة لذا أنت يمكن أن تطفو لهم كما تريد.
3. تعيين الطول و خط الطول إلى نفس القيمة لضمان مركز محاذاة عموديا.
4. بالنسبة م القياسات لحساب ارتفاع العناصر ، يجب على المتصفح معرفة ارتفاع الخط على تلك العناصر ، ويجب أن لا يكون في حد ذاته مجموعة في م القياسات.

هذه النتائج في تطبيقها عالميا القاعدة العامة:

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

مع حجم الخط قابل للتكيف في شكل حقول أو عنصر.

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

اختبار في أحدث كروم, سفاري و فايرفوكس على ماك, نظام التشغيل ويندوز, اي فون, الروبوت.و IE9.

هذا الأسلوب هو المرجح تنطبق على جميع أنواع المدخلات التي لا تزيد عن سطر واحد من النص.تطبيق نوع المادة لتناسب.

Answer 27

لذا أعلم أن هذا قد تم الرد عليها مرات عديدة ، ولكن أشعر أن لدي طريقة أكثر أناقة حل من تلك التي قدمت بالفعل.وليس فقط 1 أنيقة الحل ، ولكن 2 منفصلة حلول دغدغة يتوهم الخاص بك.وقال مع ذلك, كل ما تحتاج إلى معرفته ومعرفة ترد في 2 شبيبة كمان مع التعليقات.

---

الحل #1 يعتمد على الأم "مربع" من معين متصفح, ولكن مع تطور...الوارد في شعبة وهو أسهل الموقف عبر متصفح, مع تجاوز:خفية إلى ويقطع الزائد من 1px امتدت خانة (هذا إذا كنت غير قادر على رؤية القبيح حدود FF)

HTML بسيطة: (اتبع الرابط لاستعراض css مع تعليقات كتلة التعليمات البرمجية هو إرضاء ستاكوفيرفلوو) http://jsfiddle.net/KQghJ/

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

---

الحل #2 يستخدم "خانة الاختيار تبديل هاك" إلى تبديل CSS الدولة من شعبة ، والذي تم وضعه بشكل صحيح عبر المتصفح و الإعداد بسيطة العفريت على مربع الاختيار غير محددة والتحقق من الدول.كل ما هو مطلوب هو لضبط خلفية موقف مع خانة الاختيار تبديل هاك.هذا في رأيي هو أكثر أناقة الحل لديك المزيد من السيطرة على خانات & أجهزة الراديو ، و يمكن أن تضمن أنها تبدو هي نفسها عبر المتصفح.

HTML بسيطة: (اتبع الرابط لاستعراض CSS مع تعليقات كتلة التعليمات البرمجية هو إرضاء ستاكوفيرفلوو) http://jsfiddle.net/Sx5M2/

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

---

إذا كان أي شخص نختلف مع هذه الأساليب ، يرجى ترك لي تعليق, أنا أحب أن أسمع بعض ردود الفعل على الآخرين لماذا لم تأتي عبر هذه الحلول ، أو إذا كان لديهم لماذا لا أرى إجابات هنا فيما يتعلق بهم ؟ إذا كان أي شخص يرى واحد من هذه الأساليب تفشل ، سيكون من الجميل أن نرى هذا أيضا, ولكن هذه قد تم اختبارها في أحدث المتصفحات تعتمد على HTML / CSS الأساليب التي هي قديمة جدا و العالمي بقدر ما رأيت.

Answer 28

ياي شكرا!هذا الأمر قد يقود لي المكسرات إلى الأبد.

في حالتي هذه التي عملت بالنسبة لي:

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;
}

أنا باستخدام إعادة تعيين.المغلق الذي قد يفسر بعض الاختلافات, ولكن يبدو أن تعمل بشكل جيد بالنسبة لي.

Answer 29

position: relative; لديه بعض القضايا في IE باستخدام z-index والرسوم المتحركة مسج مثل هذا slideUp/slideDown.

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;
}

مسج:

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

التصميم ربما يحتاج القرص اعتمادا على حجم الخط المستخدم في <label>

PS:
يمكنني استخدام ie7js لجعل css العمل في IE6.

Answer 30

استخدام ببساطة 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;
}