firefox边框白线

时间:2013-07-10 03:42:31

标签: html css css3

我的网站中的某些元素存在边框和半径样式(border-radius)问题,我想摆脱它们,因为它看起来并不好看。请参阅下图:

screenshot of my website which having a problem on the border part

正如你在标题部分看到的那样,它已经设置为使用css3在曲线边界上但是一条令人讨厌的白线弄乱了我漂亮的标题所以我想知道是否有办法摆脱它,或保留它像一个干净的边框(没有标题曲线左下方的白色混乱)在右侧标题底部边框曲线/半径上相同。

继承我标题的html结构:

<header id="header" role="banner">
    <span class="extend clear">

    </span>
</header> 

和它的css。

#header{
    background: #575656;
    overflow: auto;
    border: 1px solid #454545;
    background-color: #575656;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#575656));
    background-image: -webkit-linear-gradient(top, #333333, #575656);
    background-image: -moz-linear-gradient(top, #333333, #575656);
    background-image: -ms-linear-gradient(top, #333333, #575656);
    background-image: -o-linear-gradient(top, #333333, #575656);
    background-image: linear-gradient(top, #333333, #575656);
    -pie-background: linear-gradient(to bottom, #333333, #575656); /*ie 6-9 via PIE*/

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333, endColorstr=#575656);

    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;

    behavior: url(PIE.htc);
}
#header span{
    padding: 20px 15px;
    border-bottom: 1px solid #838181;
    overflow: auto;
    display: block;
}

那个馅饼的东西就是显示,它是http://css3pie.com/

的链接

谢谢,我愿意接受任何想法,建议和建议。

3 个答案:

答案 0 :(得分:1)

这是无效的:

-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;

此外,它在firefox中运行正常:fiddle

以下内容也应该在firefox中应用:

 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;

答案 1 :(得分:0)

Firefox的语法无效。将您的代码更改为:

-moz-border-bottom-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;

答案 2 :(得分:0)

border-bottom-right-radius

border-bottom-top-radius

border-bottom-bottom-radius

border-bottom-left-radius

尝试使用这些