Question

之前我有一些图像链接，其中所有图像都有一个定义的高度。删除链接（一个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>

Answer 1

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

Answer 2

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

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

随着字体大小的继承，a中的所有内容都将具有此字体大小，而9.5em中的a将与9.5em之外的{{1}}不同它！

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

2 个答案: