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>

间隙的图像：

如果我删除边框半径或背景剪辑，问题就会消失。但是，支持边框图像的浏览器需要存在背景剪辑。所以我想解决半径和剪辑仍然存在的问题。

有人对此有什么想法吗？

Answer 1

对于 IE 10 及更早版本，您可以尝试使用一些 javascript 和一个附加类来替换边框：

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(' ');

})();

--这将返回一个字符串，例如'Chrome 35'或'IE 11'。

---

这将检查 'IE' 和早于 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/