Internet Explorer和Chrome的格式化問題

我已將列表格式化爲三個帶有邊框的列。當我使用Firefox查看列表時，列表格式完美，但是當我在Chrome中查看列表時，格式稍微偏離了一些，使用Internet Explorer時，格式化更爲明顯。我正在尋找幫助，確定如何在三種瀏覽器中使格式看起來相同Internet Explorer和Chrome的格式化問題

這是顯示我的列表的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; 
}

我會固定並欣賞的格式問題的任何幫助。

來源

2017-02-17 Jecker

在Chrome中似乎有一個已知的錯誤導致這樣的行爲。對於類似的問題，請參見here,here和here。

在你的情況，這似乎工作：

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

JSFIDDLE

來源

2017-02-17 19:34:23 sol

該解決方案解決了鍍鉻的問題，但不能解決I.E.問題。你知道I.E.的解決辦法嗎？ – Jecker

Internet Explorer和Chrome的格式化問題

回答

相關問題