2

我为我的用户 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; ?>

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

4

2 回答 2

3

据我所知，这不是图像没有填充边框半径的问题，而是浏览器呈现边框的方式之一。如果把边框的颜色改成和图片不同的颜色，可以看到其实在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; ?>
于 2012-10-29T18:18:18.433 回答
2

您可以用 a 包装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;
}​
于 2012-10-29T18:16:50.687 回答