Question

我在一个div中包含一行图像。这些图像是单字文本的jpg图像（如用户点击导航到不同页面的“Home”。当我在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>

Answer 1

您是否尝试删除每个＆lt; img /＆gt;周围的空格？位于＆lt; a /＆gt;内的标记标签？我知道这听起来很傻，但肯定会在IE6中修复它。

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

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

1 个答案: