图像未填充border-radius

Question

我为用户Gravatar图像添加了边框半径，并确保为chrome和safari扩展添加正确的CSS，但图像并未完全填充整个圆圈。然而，它正确地在Firefox中显示。这是我的CSS以及问题的一些图像。

.gravatar{float: left; text-align: center; 
margin-top:1px; border:2px solid white;background-color:#ffffff;-webkit-border-radius:55%;-moz-border-radius:55%;border-radius:55%;box-shadow:0 0 10px rgba(0,0,0,0.3);
height: 38px;
width: 38px;
}

CSS中唯一另外提到的gravatar是

.gravatar {
    padding: 0px;
    display: inline;

}

在我的Bootstrap.min.css

中

我通过PHP从Gravatar调用图像

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

感谢您提供任何解决方案。

Answer 1

您可以使用img打包span标记，然后将这些样式应用于span。然后，添加overflow: hidden，这应该适用于WebKit。

http://jsfiddle.net/Kg4Z3/1/

PHP代码：

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><span class="gravatar-wrapper"><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></span> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>

和CSS：

.gravatar-wrapper {
    background-color: #fff;
    border: 2px solid #fff;
    -webkit-border-radius: 55%;
    -moz-border-radius: 55%;
    border-radius: 55%;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    float: left;
    height: 38px;
    margin-top: 1px;
    overflow: hidden;
    text-align: center;
    width: 38px;
}​

Answer 2

据我所知，这并不是图像没有填充边框半径的问题，而是浏览器如何渲染边框的问题。如果将边框的颜色更改为与图像不同的颜色，则可以看到实际上，在Chrome中绘制时，边框在图像下绘制。 一个潜在的解决方法是使用div包装图像，并将边框放在该div上。

我使用了16x16的图像并得到了你所做的相同结果......起初。我用div包裹它，问题就消失了。

.gravatar
{
    float: left; 
    text-align: center; 
    margin-top: 1px; 
    background-color: #ffffff;
    -webkit-border-radius:55%;
    -moz-border-radius:55%;
    border-radius:55%;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
    height: 38px;
    width: 38px;
}
.gravWrap
{
    display:inline-block;
    border-radius: 55%;
    border: solid 2px blue;
}

<div class='gravWrap'><img class='gravatar' src='img/rss16.png'/></div>

编辑：您可以像这样输出该标记：

<a href="users.php?uid=<?php echo $row['user_id']; ?>"><div class='gravWrap'><?php echo $generic->get_gravatar($email, true, 200, 'mm', 'g', array('style' => '1')); ?></div> <?php echo $row['username']; ?></a><?php echo $admin . $restrict; ?>