CSS边框在IE中留下小的1px间隙

我有一个带纹理边框图像的div，启用了填充。这在现代浏览器上显示得很好。但是，如果使用不带边框图像的较旧浏览器，则ive会创建一个回落到圆角边框。在IE（9,10）上，我在内容和右边框之间出现了一个非常薄的垂直间隔。有时候差距并不存在，但水平缩放我的浏览器窗口会使间隙闪烁。CSS边框在IE中留下小的1px间隙

下面有一突出的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>

的间隙的图像：

enter image description here

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

有人有什么想法吗？

来源

2014-06-29 MichaeMichael

你可以尝试用填充更换边境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 with these edits：

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

来源

2014-06-30 00:47:35 chris

谢谢克里斯。这很有魅力。不知道*为什么*它的工作虽然！我不知道有边界半径定义，即使边界没有出现，仍然会显示边界。这是一件很好的事情要知道。尽管如此，我仍然好奇为什么我首先遇到了这个问题。据我所知，圆角边框是非常标准的东西。我以前使用过它们，并没有注意到IE9/10上的差距。然而在这个例子中，我得到了差距。如果您对差距出现的原因有任何了解，我将不胜感激。 – MichaeMichael

CSS边框在IE中留下小的1px间隙

回答

相关问题