Opera上的奇怪CSS边框问题

Question

我有一个链接里面有一些文字，它适用于所有浏览器但是在歌剧中，底部的圆角不起作用。

我使用此css类作为链接：

.currentJob:link, .currentJob:visited {
    border: 1px solid #dcd3ce;
    background: #ffffff url(../images/applyIcon.jpg) right top no-repeat;
    margin: .5em 1.5em 1.5em 1.5em;
    display: block;
    text-decoration: none;
    color: #000000;
    overflow: hidden;
    -moz-border-radius: 10px;
    border-radius: 10px;
    webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
 }

这里是demo。

有谁知道我怎么能在歌剧中解决这个问题？奇怪的是链接：hover在Opera中完美运行。

Answer 1

-moz-border-radius: 10px;
webkit-border-radius: 10px;
khtml-border-radius: 10px;

只有border-radius: 10px;就足够了。 IE9 +，Firefox 4 +，Chrome，Safari 5+和Opera支持border-radius属性。

但代码中令人不安的部分是

.jobCloseDate {
text-align: center;
color: #ffffff;
font-style: italic;
padding: .5em;
display: block;
background-color: #006A8A;
}

将上述代码更改为

.jobCloseDate {
text-align: center;
color: #ffffff;
font-style: italic;
padding: .5em;
display: block;
border-radius:0 0 0.5em 0.5em;
background-color: #006A8A;
}

我为这个块添加了border-radius:0 0 0.5em 0.5em;，因为在没有这个的歌剧中，jobCloseDate没有给出圆角。

请参阅此链接以获取完整代码http://jsfiddle.net/EG6sS/9/

Answer 2

这不是一个很好的解决方案，在.jobCloseDate上添加边框半径可以工作：

http://jsfiddle.net/EG6sS/3/

.jobCloseDate {
    border-radius: 0 0 10px 10px;
}

替代解决方案。它是kludgy，但它的工作原理。删除溢出并向下移动最后一个元素，以便“白色像素”不可见。

http://jsfiddle.net/EG6sS/21/

.currentJob:link, .currentJob:visited {
    border: 1px solid #dcd3ce;
    border-bottom: 0;
    background: #ffffff url(../images/applyIcon.jpg) right top no-repeat;
    margin: .5em 1.5em 1.5em 1.5em;
    display: block;
    text-decoration: none;
    color: #000000;
    border-radius: 10px;
    /* removed overflow */
}
.jobTitle {
    font-weight: bold;
    color: #006A8A;
    margin: .6em 45px .1em .6em;
    font-size: 1.1em;
    display: block;
}
.jobLocation {
    /* removed .5em from the bottom margin and added it to the top position on the next element */
    margin: 0 .7em 1em .7em;
    display: block;
    font-size: 0.85em;
}
.jobCloseDate {
    text-align: center;
    color: #ffffff;
    font-style: italic;
    padding: .5em;
    display: block;
    background-color: #006A8A;
    /* added the following styles */
    border-radius:0 0 10px 10px;
    position: relative;
    top: .5em;
    left: -1px;
    margin-top: -1px;
    margin-right: -2px;
    border: inherit;
    border-top: 0;
}
.currentJob:hover, .currentJob:visited:hover {
    border: 1px solid #006A8A;
    color: #000000;
}

Answer 3

一个想法，

尝试-webkit-border-radius并将其向上移动，以便：

1. -webkit-border-radius: 10px;
2. border-radius: 10px;