IE9 div具有边框半径和渗漏的背景色和边框

Question

IE is showing a bleeding bg color and border on the header area for example here in IE9. The CSS is below, but I can't understand why..

#header-wrapper {
    position: relative;
    width: 98.2%;
    margin: 0 0.8%;
    overflow: hidden;
    height: 100px;
    border: 1px solid #333441;
    border-bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#E4E4E4));
    background: -moz-linear-gradient(top,  #f6f6f6,  #e4e4e4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e4e4e4');
    border-radius: 8px 8px 0 0;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
}

Any ideas would be great..

Answer 1

If available within your project constraints. I would suggest using something like bourbon , which gives you all the mixins to do what you need, with browser compatibility in mind. However, such a tool requires SASS. Which in the long run, isn't a bad idea to know / have.

Alternatively there are other tools like modernizr , that can help you in this case as well.

Moreover, you can dig into the source code CSS frameworks such as Twitter Bootstrap and grab the code they are using for border radius.

Answer 2

http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/