Question

我正在更新页面设计上的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;
    }

有什么想法？非常感谢您的反馈。

Answer 1

确保您没有处于怪异模式。我相信怪癖这不会奏效，但如果你有良好的doctype，你应该没事。

Answer 2

可能是因为您错过了<img src="" />您缺少图像元素末尾的斜杠。 IE是垃圾，它可能是期待更多然后导致它编译图像怪异而不显示寄宿生。

Chrome和Firefox可能没有任何问题，因为某些原因运行它就好了。试试看，看看你是否还有问题。

否则我的代码中没有任何问题。

CSS填充显示在FF和Chrome中，但不在IE 8中？

2 个答案: