Opera 12.16要求圆形图像产生椭圆形

Question

我正在为我的客户创建一个主题，他给出的设计需要一些带有边框和shodow的圆形图像。

问题在于Opera，它会产生椭圆形而不是圆形图像。

这是Opera产生的结果：

这是必需的结果，例如Chrome产生的内容：

我的HTML代码如下

<div class="row homeCategoryImageLinks">
    <div class="columns large-3 small-6 medium-6 ">
        <a href="#">
            <img src="oil.jpg" />
        </a>
    </div>
    <div class="columns large-3 small-6 medium-6 ">
        <a href="#">
            <img src="oinopoioa.jpg" />
        </a>
    </div>
    <div class="columns large-3 hide-for-small hide-for-medium ">
        <a href="#">
            <img src="athairia.jpg" />
        </a>
    </div>
    <div class="columns large-3 hide-for-small hide-for-medium ">
        <a href="#">
            <img src="meli.jpg" />
        </a>
    </div>
</div>

这是我的CSS代码：

.homeCategoryImageLinks
{
    margin-top: -164px !important;
    z-index: 3500 !important;
    margin-bottom: 25px !important;
}

.homeCategoryImageLinks div.columns
{
    z-index: 3501;
}

.homeCategoryImageLinks a
{
    z-index: 3502;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    padding: 5px;
    background-color: #FFF;
    border-radius: 55%;
    display: table;
}

.homeCategoryImageLinks a img
{
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: table-row;
    width : 100%;
}

整个项目基于Foundation框架，因此HTML元素中的一些类与Foundation框架相关。

您可以在此处找到我的代码的 DEMO 。

更新1

这是我在Opera的检查模式中将列悬停在元素上方时的结果。

它的接缝像锚点大小调整但不垂直。

Answer 1

尝试在链接上设置box-sizing至border-box。

homeCategoryImageLinks a
{
    z-index: 3502;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    padding: 5px;
    background-color: #FFF;
    border-radius: 55%;
    display: table;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

我认为问题在于你在链接中添加了填充，然后将图像的宽度设置为100％，因此它将包含填充，这将反过来扩展链接..

---

或者，您可以向图像添加5像素的边框，而不是填充到链接..

<强>更新

尝试

.homeCategoryImageLinks a
{
    z-index: 3502;
    display: table;
}

.homeCategoryImageLinks a img
{
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: table-row;
    width : 100%;
    border:5px solid white;


    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);

}