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-radiusプロパティは、IE9 以降、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

アイデア、

-webkit-border-radius次のように上に移動してみてください。

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