0

我在这里的页面上使用了 2.11 malsup jquery curvy corners：

http://robynrowe.sanscode.com

出于某种原因，在 ie 中，曲线角脚本使边框消失。

谁能帮我解决这个问题？

我刚刚尝试了一些工作，我将盒子包装在一个 div 中并设置背景颜色。没有修复。IE 上的弯角是不可能的吗？有没有人有任何想法？

如果您有兴趣尝试一下，这是一个 jsfiddle：http: //jsfiddle.net/KZYXH/

4

1 回答 1

1

严重讨厌IE。

无论如何，我不得不编写一些代码来用 jquery 修复它。

 $(function(){
    if($.browser.msie) $('.box').each(function(){
        var c = $(this).attr('class').replace('box','');

        $(this).wrap('<div class="round-fix '+c+'" />');
    });

    $('.round-fix').corner();
    $('.round-fix .box').corner();
    });

然后剩下的就是一些 CSS 来完成这一切

    .box{
        margin-bottom: 16px;
         padding:10px 10px 10px 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .border-pink{
        border: 2px solid #EB008B;
    }
    .border-brown{
        border: 2px solid #754C28;
        background-color: #F4EDE9;
    }
    .border-green{
        border: 2px solid #00AA00;
    }

/* IE FIX */
    .round-fix{
        margin-bottom: 1em;
        padding: 2px;
    }
    .round-fix .box{
        background-color: white;
        margin-bottom: 0;
    }
    .round-fix.border-pink{
        background-color:#EB008B;
    }
    .round-fix.border-brown{
        background-color:#754C28;
    }
    .round-fix.border-brown .box{
         background-color: #F4EDE9;
    }
    .round-fix.border-green{
        background-color: #00AA00;
    }

所以基本上 - 我有一堆盒子在角落不会出现，因为malsup使用背景颜色并忽略边框颜色。我将圆形 div 包裹在另一个 div 中，并将边框颜色从内部 div 应用到外部 div（只是通过 css，虽然这可能通过 jquery 做得更好），然后我在外框上添加了一些填充。最后将内盒设置为白色，或者您通常使用的任何颜色。显然，这不适用于透明度，但是自从透明度在 IE 中什么时候起作用：p。还要注意如果您直接在元素上设置了内部框的宽度，您也需要在外部元素上设置该宽度。这适用于直接在内部元素上设置的任何 CSS 属性。

于 2011-03-13T23:42:59.707 回答