0

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

2 回答 2

1

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

于 2012-04-23T17:47:55.807 回答
0

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

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

而且由于字体大小是继承的，所以里面的所有东西a都会有这个字体大小，而里面9.5em的字体和外面的就不a一样了！9.5em

于 2012-04-24T07:08:15.573 回答