Formatierungsproblem mit Internet Explorer und Chrome

Question

Ich habe eine Liste in drei Spalten mit Rahmen formatiert. Wenn ich die Liste mit Firefox anschaue, ist die Liste perfekt formatiert, aber wenn ich die Liste in Chrome anschaue, ist die Formatierung etwas aus und mit Internet Explorer ist die Formatierung noch mehr ausgeschaltet. Ich suche nach Hilfe, wie man die Formatierung über die drei Browser gleich aussehen lässt.

Hier ist ein jsfiddle Link, der meine Liste zeigt. Hier

ist die HTML:

<fieldset> 
<legend>Automobiles:</legend> 
<div class="tierGrp gm"> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="2" checked >Spark</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="8" checked >Sonic</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="32" checked >Cruze</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="10" checked >Malibu</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="17" checked >Impala</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="21" checked >SS Sedan</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="13" checked >Camero</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="29" checked >Corvette</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="9" checked >Motorsports</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="30" checked >Trax</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="25" checked >Equinox</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="27" checked >Traverse</label> 
    <label class="cars chevrolet" style="display:block"><input type="checkbox" value="28" checked >Tahoe</label> 
</div> 
</fieldset> 

Hier ist die CSS ist:

.tierGrp { 
    align:center; 
    text-align:center; 
    font-size:26px; 
    background-color:#EEE; 
    width:625px; 
    height:auto; 
    display:block; 
    margin-bottom: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    } 
.gm { 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
    -webkit-column-fill: balance; 
    -moz-column-fill: balance; 
    column-fill: balance; 
    -webkit-column-gap: 5px; 
    -moz-column-gap: 5px; 
    column-gap: 5px; 
    text-align:left; 
} 
.cars { 
    font-size: 18px; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    font-weight:300; 
    border:1px solid #3498DB; 
    border-radius:5px; 
    background:#EDF5FA 50% 50%; 
    height:auto; 
    min-width:100px !important; 
    padding-left:5px; 
    padding-right:5px; 
    cursor: pointer; 
} 

Ich würde jede mögliche Hilfe appriciate die Formatierung Problem beheben.

Answer 1

Es scheint einen bekannten Bug in Chrome zu geben, der ein solches Verhalten verursacht. Für ähnliche Fragen siehe here, here und here.

In Ihrem Fall scheint dies zu funktionieren:

.cars { 
    -webkit-transform: translate3d(0,0,0); 
} 

JSFIDDLE