即使定义了高度，删除链接（href 标记）后图像也会变大答案

【问题标题】：Image becomes larger after link (a href tag) is removed even though height is defined即使定义了高度，删除链接（href 标记）后图像也会变大
【发布时间】：2012-04-24 15:08:15
【问题描述】：

我之前有一些图片链接，其中所有图片都有定义的高度。删除链接（a href 标记）后，图像变大了。

见截图：http://i.stack.imgur.com/ePsxC.png

我希望它看起来像第一行，它们的大小都相同（而第二行的圆圈更大，因为我删除了链接），但我不希望圆圈链接到任何事物。我还定义了边距和边框，所以我认为这不是默认浏览器问题。这可能与我保存图片链接的嵌套 div 有关，但我不知道是什么。

非常感谢您提供的任何帮助。

这里是网站，如果它有助于查看源代码：http://ink-12.web5test.terc.edu/aboutus/example.cfm

相关CSS：

.text2col{
margin-left:12.5em;
border:0.1em solid black;
background-color:white;
padding:1em;
min-width:46em;
overflow:auto;
text-align:left;
max-height:31em;

}

.text2colin{
overflow:auto;
}

.teaminfo{
margin-left:5em;
margin-top:-0.25em;
}

#img{
text-align:center;
}

.imgteam{
margin:1em;
height:auto;
width:auto;
float:left;
text-align:center;
}

.imgteam a:hover img{
border:0.2em solid #cd05ff;
}

.imgteam img{
display:inline;
margin:0;
border:0.2em solid black;
width:9.5em;
height:9.5em;
-moz-border-radius:4.75em;
-webkit-border-radius:4.75em;
border-radius:4.75em;
}

.imgschool{
margin:1em;
height:auto;
width:auto;
float:left;
text-align:center;
}

.imgschool a:hover img{
border:0.2em solid #cd05ff;
}

.imgschool img{
display:inline;
margin:0;
border:0.2em solid black;
width:19em;
height:9.5em;
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
}

.teamcaption{
text-align:center;
font-weight:normal;
width:auto;
margin:0.2em;
}

.imgteamsmall img{
width:4em;
height:4em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em;
border:0.2em solid black;
float:left;
}

相关html：

<div class="text2colin">

<div class="imgschool"><a target="blank" href="http://terc.edu"><img src="img/school.png" alt="picture of school"></a>
<div class="teamcaption"><p class="img"><strong>Name of school</strong><br />School system</p>
    </div>
</div>              

<div class="imgteam"><a href="#teacherinfo"><img src="img/school.png" alt="picture of teacher"></a>
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

<div class="imgteam"><a href="teacherinfo"><img src="img/school.png" alt="picture of teacher"></a>
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>                

</div><!--end div class=text2colin-->

<div class="text2colin">

<h4>Section Header Two</h4>

</div><!--end div class=text2colin-->

<div class="text2colin">

<div class="imgschool"><a target="blank" href="http://terc.edu"><img src="img/school.png" alt="picture of school"></a>
<div class="teamcaption"><p class="img"><strong>Name of school</strong><br />School system</p>
    </div>
</div>

<div class="imgteam"><img src="img/school.png" alt="picture of teacher">
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

<div class="imgteam"><img src="img/school.png" alt="picture of teacher">
<div class="teamcaption"><p class="img"><strong>Teacher's name</strong><br />Grade # Teacher</p>
    </div>
</div>

【问题讨论】：

反正我这里试的时候不会出现，那你有没有更多的样式，可以改变a元素的字体大小？
@MrLister，感谢收看。忘记放考场了；我现在已经编辑了 URL。不，我没有在其他任何地方定义 a 元素——实际上，我不知道我可以，这就是我为 img 定义样式的原因。

标签： css image hyperlink image-resizing

【解决方案1】：

尝试使用 px 而不是 em。示例：height: 100px。

【讨论】：

谢谢，但这并不能解决问题。

【解决方案2】：

问题不在于您在此处发布的那段 CSS，而在于您的 fonts.css 样式表中，您有

a:link {text-decoration:none; color:blue; font-size:0.9em}

并且由于字体大小被继承，a 中的所有内容都将具有此字体大小，a 中的9.5em 将与它之外的9.5em 不同！

【讨论】：