html - Internet Explorer 和 Chrome 的格式问题

Question

我已将列表格式化为带边框的三列。当我使用 Firefox 查看列表时，列表的格式非常完美，但是当我在 Chrome 中查看列表时，格式略有偏差，而使用 Internet Explorer 时，格式甚至更差。我正在寻求帮助来确定如何使格式在三种浏览器中看起来相同

这是一个jsfiddle显示我的列表的链接。

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

这是 CSS:

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

我会感谢任何解决格式问题的帮助。

Answer 1

Chrome 中似乎有一个已知的错误导致了这样的行为。参见 here , here和 here对于类似的问题。

在您的情况下，这似乎可行:

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

JSFIDDLE