IE8中显示的图像角落周围的幻影“边框”答案

【问题标题】：Phantom "border" around corner of image displayed in IE8IE8中显示的图像角落周围的幻影“边框”
【发布时间】：2011-01-17 18:47:11
【问题描述】：

我有一行图像包含在一个 div 中。这些图像是单个单词文本的 jpg 图像（例如用户单击以导航到不同页面的“主页”。当我在 ie8 上运行该站点时，每个图像的右下角都会出现一个小的水平破折号. 这个破折号是活跃的，如果我点击它，它会激活附加到图像的动作（即出现下一页）。因此，它显然是图像的一部分。

奇怪的是图像文件本身没有任何边框。它是白色背景上的文本。其余 99% 的周边是“干净的”（即不显示幻像边框）。它只是显示此破折号的底部边缘的最右端。

当我在 Firefox 中运行该站点时，一切都很好（没有破折号）。我读了一些关于 ie 的 bug，但我没有在 ie8 中看到这个。我努力使用clearfix，但它没有做任何事情。

这里是相关代码。它在发生问题的 div id NavButtons 中：

谢谢！

   <style type="text/css">

       .LeftIndent
       {
           left: 415px;
           position: relative;
       }

       #Tagline
       {
           float: left;
           width: 433px;
       }


       #Body
       {
           float: left;
           width: 732px;
       }

       #TotalPage
       {    
           width: 1280px;
           margin-left: auto;
           margin-right: auto;
           border-left-style: solid;
           border-left-color: #5E91A8;
           border-left-width: 15px;
           border-right-color: #5E91A8;
           border-right-width: 15px;
           border-right-style: solid;
       }
       </style>

<div id="TotalPage">
    <div>
        <img src="../Images/Header.jpg" alt="Image Missing" id="ImgBanner" align="left"/>
    </div>

    <div id="GrDash1">
        <img src="../Images/GreenSeparator.jpg" alt="Image Missing" />
    </div>

    <div id="NavButtons">
        <div class="LeftIndent">
            <asp:ContentPlaceHolder ID="NavHome" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavCap" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavBel" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavBio" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavExp" runat="server">
            </asp:ContentPlaceHolder>

            <img src="../Images/VerticalDash.jpg" alt="Image Missing" />

            <asp:ContentPlaceHolder ID="NavCon" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>             

    <div id="GrDash2">
        <img src="../Images/GreenSeparator.jpg" alt="Image Missing" />
    </div>

    <div>
        <div id="Tagline" >
            <img src="../Images/Tagline.jpg" alt="Image Missing" style="margin-top: 0px" />
        </div>
        <div id="Body">
            <asp:ContentPlaceHolder ID="BodyText" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>

    <div>
        <img src="../Images/CopyrightFooter.jpg" alt="Image Missing" style="margin-top: 10px" />
    </div>

</div>

【问题讨论】：

标签： html internet-explorer-8 border

【解决方案1】：

您是否尝试过删除标签内的每个标签周围的空格？我知道这听起来很傻，但它肯定会在 IE6 中修复它。

我没有 IE8 来测试我的问题（正如您所描述的那样），但我在寻找比我在这里提出的解决方案更简单的解决方案时发现了这个问题。

【讨论】：