html - 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;
 }

这是演示。

有谁知道我如何在歌剧中解决这个问题？奇怪的是 link:hover 在 Opera 中完美运行。

Answer 1

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

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

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

.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;
}

替代解决方案。这很笨拙，但它有效。删除溢出并向下移动最后一个元素，以便“白色像素”不可见。

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;