css - Why do checkboxes move when checked in Safari? -


i have series of values checkboxes pre-checked on page. , work fine in browsers, except safari. when click on of checkboxes 'jump' or 'drop' down , move position.

i did research, didn't find how keep boxes moving.

here code checkbox:

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

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

how style checkboxes stationary , change state when clicked?

the issue width , height properties. why matters anyones guess, , can't find information on issue. seems width , height attributes work default state of box, gets thrown out while rendering transition between initial , alternate state.

the best solution be:

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

you can use conditional comment target older versions of ie (if support them) , add explicit height , width style you're looking for:

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