0

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

问题出在 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框架相关。

在这里您可以找到我的代码的演示。

更新 1

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

在此处输入图像描述

它看起来像水平方向但不是垂直方向调整大小的锚。

4

1 回答 1

1

尝试在链接上设置box-sizingto 。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);

}
于 2013-11-13T18:44:53.883 回答