小编Mat*_*nco的帖子

我有一个带有border-radius和背景图像的div,这在所有浏览器中都很好地显示,除了在Internet Explorer 11中,背景图像显得模糊.

我怎么能解决这个问题？

<span class="button boxsizing soundicon"></span>

CSS:

.roomscene .top .roominfo .center span.button {
    height: 29px;
    width: 29px;
    background-color: #23221d;
    border-radius: 7px;
    border: 2px solid #494742;
    margin-top: -10px;
    display: inline-block;
    float: right;
}

.roomscene .top .roominfo .center span.button:hover {
    background-color: #2f2d27;
    cursor: pointer;
}

.roomscene .top .roominfo .center .soundicon {
    background: #23221d url('../images/rooms/roominfo/soundicon.png') no-repeat center center;
}

编辑:

我注意到如果我从.soundicon(或span.button的边界半径)移除背景的"中心"位置,模糊消失,但我无论如何需要正确定位我的背景......

EDIT2:

真的很奇怪IE11的错误,似乎如果我指定位置在px而不是中心或50%,背景图像没有模糊/凌乱.

Internet Explorer仍然是一个糟糕的浏览器.

EDIT3:

没有,对于px位置,在某些图像上已经模糊,但是比使用中心/%时更少.

实际示例:

http://codepen.io/toomuchdesign/pen/ojspA

我有这个HTML结构:

<div class="container">
   <div class="row">
      <div class="col-lg-9 description"></div>
      <div class="col-lg-3 sidebar"></div>
      <div class="col-lg-9 comments"></div>
   </div>
</div>

最终的效果是这样的: 我需要这个HTML结构,因为当我有一个较小的视口和Bootstrap切换到1列模式时,我需要侧边栏列在描述和注释列之间(实际上有空的空间).

问题是,当模板不处于"移动模式"时,我想避免使用那个空白空间.

我尝试了很多方法,但我无法做到这一点,有人可以帮助我吗？

编辑

我试过这种方式:

<div class="container">
   <div class="row">
      <div class="col-lg-9">
         <div class="description"></div>
         <div class="comments"></div>
      </div>
      <div class="col-lg-3 sidebar"></div>
   </div>
</div>

并试图通过使用CSS"订单"重新排序,但没有用(它允许我做的唯一的事情是将侧边栏放在页面的开头,但不是我想要的).