を使用して画像の周囲に境界線を追加します
img
{
border-color: #bbbbbb;
}
画像は次のようにhtmlで定義されます
`<img src="/Thumb?product=CPU-EP0520EL01">`
ブラウザの画像プロパティによると、画像サイズは130x130ピクセルです。FirefoxとChromeでは境界線は表示されません。
Firebug inspect要素の[スタイル]タブには、スタイルが適切に適用されているように表示されます。
img {
border-color: #BBBBBB;
}
.category-list li a, ul#category-list li .button {
font-size: 11px;
}
a:link, a:visited {
color: #A80000;
font-weight: bold;
}
.category-list li {
text-align: center;
}
.category-list {
list-style: none outside none;
}
body {
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
}
Internet Explorer 9では、境界線が正しく表示されます。Jqueryuiのデフォルトのstlyeが使用されます。ui-corner-allクラスをimg要素に追加しましたが、問題が解決しません。境界線が表示されません。(この場合、IE9は丸みを帯びた境界線を正しく表示します)。
ChromeとFireFoxで画像の周りに丸みを帯びた境界線を表示するにはどうすればよいですか?