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

Internet Explorer和Chrome的格式化问题

1 个答案: