Chrome/Firefox上的Flexbox和Float問題

Question

當我在Chrome和Firefox上使用flex svg圖像時，出現float問題，只有它在IE上顯示正確。

該評級在另一列顯示一半。

框架：引導2

Bootplay：http://www.bootply.com/KQKMnpHtdL

CSS

/* CSS used here will be applied after bootstrap.css */ 
#krating { 
    display: inline-block; 
    left: 4px; 
    position: relative; 
    top: 4px; 
} 
#krating-top { 
    float: right; 
} 
.c-rating { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.c-rating__item { 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 0 14px; 
    -ms-flex: 0 0 14px; 
    flex: 0 0 14px; 
    height: 14px; 
    background: url('https://www.newf1.nl/components/com_kunena/template/crypsis/assets/images/stars.svg'); 
    background-size: 200%; 
    background-position: 0 0; 
    cursor: pointer; 
} 
.c-rating__item.is-active { 
    background-position: -14px 0; 
} 
.c-rating__item .is-active:hover { 
    background-position: 0; 
} 

HTML

<td class="span5"> 
<div class="krow"> 
    <a title="View Topic 'J SH hs cj sdchj dhs chds cjhsdc hds cjsd cjds cjs'" class="hasTooltip topictitle" href="/develop/forum/welcome-mat/50-j-sh-hs-cj-sdchj-dhs-chds-cjhsdc-hds-cjsd-cjds-cjs" rel="nofollow">J SH hs cj sdchj dhs chds cjhsdc hds cjsd cjds cjs</a> 
    <div id="krating-top"> 
     <ul class="c-rating"> 
      <li class="c-rating__item is-active" data-index="0"></li> 
      <li class="c-rating__item is-active" data-index="1"></li> 
      <li class="c-rating__item is-active" data-index="2"></li> 
      <li class="c-rating__item is-active" data-index="3"></li> 
      <li class="c-rating__item is-active" data-index="4"></li> 
     </ul> 
    </div> 
</div> 
<div class="hidden-phone"> 
    Topic started 3 hours 50 minutes ago, 
    by 
    <a title="View admin's Profile" class="kwho-admin" href="/develop/forum/user/237-admin" rel="nofollow">admin</a> 
</div> 
</td> 

See here the changes between browsers

Answer 1

您需要爲您的評分圖標指定一個寬度。

.c-rating__item { 
    width: 14px; 
} 

你可以看到它在這裏工作在這個新的bootply：http://www.bootply.com/12LbfUB0IF

*請注意，你的「localhost」在CSS中引用圖片，所以我們無法看到它們。