CSS边界在IE中留下1px的小差距

Question

我有一个带纹理边框的div - 启用填充的图像。这在现代浏览器上显示正常。但是，当使用没有边框图像支持的旧浏览器时，我已经创建了一个圆角边框的后退。在IE（9,10）上，我在内容和右边界之间有一个非常薄的垂直间隙。有时差距不存在，但水平缩放我的浏览器窗口会使间隙闪烁。

这是一个强调问题的JSfiddle：http://jsfiddle.net/67tG6/8/

CSS

.menu_tab {
    width: 90px;
    height:250px;
    background: rgb(230,140,130);
    border: 28px solid rgb(230,140,130);
border-image: url("http://chromafunk.com/images/menu_tab.png") 30 30 40 30 fill round;
    border-radius: 20px;
    border-top: 0px;
    background-clip: padding-box;
 }

HTML

<div class="menu_tab"></div>

差距的图像：

如果我删除border-radius或background-clip，问题就会消失。但是，对于支持边界图像的浏览器，需要存在背景剪辑。所以我想用半径和剪辑解决这个问题。

有人有任何想法吗？

Answer 1

您可以尝试使用一些javascript和一个额外的类替换IE 10及更早版本的填充边框：

的CSS：

.menu_tab {
width: 90px;
height:250px;
background: rgb(230,140,130);
border: 28px solid rgb(230,140,130);
border-image: url("http://chromafunk.com/images/menu_tab.png") 30 30 40 30 fill round;
border-radius: 20px;
border-top: 0px;
background-clip: padding-box;
}

.menu_tab_ie{
    padding:28px;
    padding-top:0px;
    border:none;
}

---

How can you detect the version of a browser?

navigator.bwsr= (function(){
var ua= navigator.userAgent, tem, 
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
    tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
    return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
    tem= ua.match(/\bOPR\/(\d+)/)
    if(tem!= null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');

}）（）;

- 这将返回一个字符串，例如＆＃39; Chrome 35＆＃39;或者＆＃39; IE 11＆＃39;。

---

这将检查＆＃39; IE＆＃39;和早于11的版本添加将应用填充并删除边框的类：

var x = navigator.bwsr;

if(x.indexOf('IE')>-1){
  var xNum = x.split(' ');
  var x2=Number(xNum[1]);
  if(x2<11){
    $('.menu_tab').addClass('menu_tab_ie');
  }
  else {console.log('border-image should display');}
}
else {console.log('border-image should display');}

---

以下是您的jsfiddle以及这些编辑：

http://jsfiddle.net/67tG6/18/