Dlaczego pola wyboru przesuwają się po zaznaczeniu w Safari?

Question

Mam szereg wartości z zaznaczonymi checkboxami na tym page. Wygląd i działa dobrze we wszystkich przeglądarkach, z wyjątkiem Safari. Po kliknięciu któregokolwiek z pól wyboru "przeskakują" lub "opuszczają", a następnie wracają na pozycję.

Zrobiłem kilka badań, ale nie znalazłem nic o tym, jak utrzymać skrzynie z ruchu.

Oto kod do wyboru:

<p><input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br /> 

<input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span></p> 

Oto CSS:

input[type="checkbox"] { 
    width: 25px; 
    height: 25px; 
    -webkit-transform: scale(1.3,1.3); 
    display: inline-block; 
    margin-right: 5px; 
    border: 1px solid #0070BB; 
    } 

Jak projektować pola wyboru tak, że są nieruchome i tylko zmienia stan po kliknięciu?

Answer 1

Kwestia jest width i height właściwości. Dlaczego tak naprawdę ma to znaczenie, nie można znaleźć żadnych informacji na ten temat. Wydaje się, że atrybuty szerokości i wysokości działają dla domyślnego stanu skrzynki, ale są wyrzucane podczas renderowania przejścia między stanem początkowym a stanem alternatywnym.

Najlepszym rozwiązaniem będzie prawdopodobnie:

input[type="checkbox"] { 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 

    display: inline-block; 
    margin-right: 5px; 
    border: 1px solid #0070BB; 
} 

Można również użyć warunkową komentarz do kierowania starszych wersji IE (jeśli je obsługują), a następnie dodać wyraźny wysokość i szerokość, aby uzyskać styl you” re szukasz:

<!--[if lt IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

Answer 2

Wynika to z faktu, że dla pól wyboru ustawiono niestandardową szerokość i wysokość. Jeśli usuniesz reguły szerokości i wysokości ze swojego CSS, pola wyboru przestaną się poruszać, gdy je sprawdzisz.

Zrozumienie, że chcesz je powiększyć, sprawdź inne sposoby dostosowywania pól wyboru.

o to powszechny sposób: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Answer 3

http://jsfiddle.net/51chuew0/

input[type="checkbox"] { 
 
width: 25px; 
 
    height: 25px; 
 
    -webkit-transform: scale(1.3);  
 
\t -moz-transform: scale(1.3); 
 
\t -o-transform: scale(1.3); 
 
\t -ms-transform: scale(1.3); 
 
\t transform: scale(1.3); 
 
    display: inline-block;  
 
    margin-right: 5px; 
 
    border: 1px solid #0070BB; 
 
    } 
 
.matrix { 
 
    -webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */ 
 
}

<p> 
 
<div class="matrix"></div>  
 
<input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br /> 
 

 
<input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span></p>

Answer 4

najprostszy, ale roztwór roboczy:

input[type="checkbox"] { 
height: auto; 
width: auto; 

}

w CSS.