0

http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form

我试图在我的博客上安装这个主题，我注意到一个小问题 - 评论部分中的头像没有完整显示，它们和容器一样被切断。我已经编辑了代码一百次，但我就是不知道问题出在哪里。帮助将不胜感激！

4

4 回答 4

1

使用您的开发人员工具栏 (Chrome) 并检查图像。如果您没有看到图像有任何问题，请检查 DOM，直到您发现问题为止。检查它们的宽度、高度、填充、边距以及“顶部”和“左侧”CSS 属性。

这个元素太小了<div class="avatar-image-container vcard">。max-height: 36px

即使图像是 45x45，图像元素本身也具有 35x35 的宽度和高度属性。

于 2014-02-21T23:24:03.857 回答
1

你限制了高度，这就是它被切断的原因。

注释掉这样的height规则：

#comments-block .avatar-image-container {
  left: -41px;
  width: 48px;
  /* height: 48px; */
  margin-top: 25px;
}

.comments .avatar-image-container {
  float: left;
  /* max-height: 36px; */
  overflow: hidden;
  width: 36px;
}

#comments-block .avatar-image-container {
  /* height: 37px; */
  left: -45px;
  position: absolute;
  width: 37px;
}

关闭这 3 个规则会显示您在规则中定义的尺寸的图像#comments-block .avatar-image-container img。

于 2014-02-21T23:30:36.030 回答
1

删除这三个，它应该可以解决问题。我认为填充是这里的罪魁祸首以及其他事情。

#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}

1）从

2) 删除 max-height.avatar-image-container

3) 你完成了。玩设置以获得所需的结果。

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

于 2014-02-21T23:33:59.050 回答
0

.comments .avatar-image-container有max-height:36px。删除它，否则你的头像将被砍掉，因为这个元素有overflow:hidden.

该图像还具有height="35"内联，这对 chrome 没有影响，但可以删除。

于 2014-02-21T23:30:34.300 回答