Question

当我在chrome和firefox上使用flex svg图像时出现浮动问题，只有它在IE上显示正确。

另一栏的评分显示为一半。

框架：Bootstrap 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

*请注意，您的CSS中引用了“localhost”图像，因此我们无法看到它们。

Chrome / Firefox上的Flexbox和Float问题

1 个答案: