参见英文答案 >
IE11 making background image text blurry4个
我有一个具有border-radius和背景图像的div,这在所有浏览器中都很好地显示,除了Internet Explorer 11中,背景图像显示模糊.
我有一个具有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位置,已经模糊的某些图像,但小于如果我使用中心/％.
实例：
解决方法
将bg图像放在span元素中.这将使边框半径和背景图像保持不同的元素.
.element {
border-radius: 7px;
border: 2px solid #494742;
}
.element span {
background-image:url('imagepath.png');
}
