【发布时间】：2011-09-21 13:35:47
【问题描述】：
我正在更新页面设计上的 CSS，试图在我的图像周围放置边框，图像和边框之间有 7px 的填充。它似乎在 Firefox 和 Chrome 中运行良好，但 IE 直接在图像上显示边框，没有填充。有什么建议？
CSS 代码：
img.right {
float: right;
margin: 0px;
border: 1px solid #999;
padding: 7px;
margin-left: 10px;
margin-bottom: 5px;
}
HTML：
<img src="images/homepage_challengecoin.jpg" class="right">
编辑：感谢您的反馈，正如@JackMcE 建议的那样，我尝试在图像标签中添加空格和反斜杠，但我仍然遇到问题。我想我可能会发布大部分页面代码，看看我的样式中是否存在一些我遗漏的冲突。因此，这是一段更完整的页面代码（对不起，我知道它有点乱）：
<HTML>
<HEAD>
<TITLE>Health Campaign</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="_css/main.css">
<STYLE type="text/css">
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
position:relative;
left:65px;
}
LI {
color: black; /* text color is white */
background: white; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 12px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
.thumbnail
{
float:center;
margin:auto;
}
div.figureRight {
float: right;
border: solid;
border-width: 1px; /* sets border width on all sides */
border-color: #333333;
margin: 0.3em;
padding: 0.4em;
}
div.figureLeft {
float: left;
border: none;
border-width: 1px; /* sets border width on all sides */
border-color: #333333;
margin: 0.1em;
padding: 0.1em;
}
div.figureLeft p {
text-align: center;
font-style: italic;
font-size: 10 px;
text-indent: 0;
}
H1 {
font-size:1.3em;
color:black;
text-align:center;
}
H2
{
font-size:14px;
color:black;
text-align:left;
}
H3
{
font-size:14px;
color:black;
text-align:center;
}
LI.withborder {
border-style: solid;
border-width: 1px; /* sets border width on all sides */
border-color: #333333;
text-align:justify;
width:600px;
padding: 20px;
position:relative;
left:-30px;
margin-left: -15px;
margin-right: -15px;
}
LI.rightbar {
border-style: none;
text-align:justify;
width:150px;
position:relative;
left:-55px;
}
div#footer{
position:absolute;
top:1000;
left:0;
width:100%;
height:footer-<length>;
}
</STYLE>
</HEAD>
<BODY background="images/background3_long2.jpg">
<div id="wrap">
<div id="main">
<TABLE WIDTH=900 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=4 align="center">
<a href="index.html"><IMG SRC="images/topGraphic5.jpg" border="0"></a> </TD>
</TR>
<TR>
<TD valign="top">
</TD>
<TD ROWSPAN=11 valign="top" width="630">
<UL>
<LI class="withborder"><SPAN style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Cambria, "Hoefler Text", Garamond; line-height: 1.3em;">
<br>
<img src="images/HealthyHeroes_Campaign.jpg" class="left" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <!-- temporary line breaks to hold height of box -->
</span></font>
</ul>
<img src="images/dots10.png">
<UL>
<LI class="withborder"><SPAN style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Cambria, "Hoefler Text", Garamond; line-height: 1.3em;">
<br>
<h2>Events and Conferences</h2>
<img src="images/HealthyHeroes_Events.jpg" class="center" />
<img src="images/HealthyHeroes_Events2.jpg" class="center" />
<br><br>
</span></font>
</ul>
</TD>
<td rowspan=11 valign="top" width="156">
<br>
</td>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=171 HEIGHT=79></TD>
</TR>
</TABLE>
</div>
</div>
<div id="footer">
<IMG SRC="images/spacer.gif" width="10"><IMG SRC="images/footer.jpg">
</div>
</BODY>
</HTML>
这是我一直在为新编辑工作的外部样式表：
img.left {
padding: 7px;
float: left;
border: 1px solid #999;
margin-top: 0px;
margin-left: 0px;
margin-right: 10px;
margin-bottom: 5px;
}
img.right {
float: right;
margin: 0px;
border: 1px solid #999;
padding: 7px;
margin-left: 10px;
margin-bottom: 5px;
}
img.center {
margin: 5px;
border: 1px solid #999;
padding: 7px;
margin-top: 0px;
}
有什么想法吗？非常感谢您的反馈。
【问题讨论】：
-
它对我很有用jsfiddle.net/VcQ88
-
Internet Explorer 的哪个版本？
标签： css image internet-explorer