Фантомная "граница" вокруг угла изображения, отображаемого в IE8 - PullRequest
Новая
       43

Фантомная "граница" вокруг угла изображения, отображаемого в IE8

0 голосов
/ 29 апреля 2010

У меня есть ряд изображений, содержащихся в одном div. Эти изображения представляют собой изображения в формате jpg с одним словом (например, «Домой», по которому пользователь нажимает для перехода на разные страницы. Когда я запускаю сайт на ie8, в правом нижнем углу каждого из этих изображений появляется небольшая горизонтальная черта Эта черта активна в том, что, если я нажимаю на нее, она активирует действие, прикрепленное к изображению (то есть появляется следующая страница). Таким образом, это, очевидно, часть изображения.

Странная часть в том, что сам файл изображения вообще не имеет границ. Это текст на белом фоне. Остальные 99% периметра являются «чистыми» (т.е. фантомная граница не отображается). Это только крайний правый конец нижнего края, который отображает эту черту.

Когда я запускаю сайт в Firefox, все нормально (без тире). Я немного читал об ошибках, но я не вижу этого в 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>

1 Ответ

0 голосов
/ 17 января 2011

Вы пытались удалить пробелы вокруг каждого тега image, который находится внутри тега ? Я знаю, это звучит глупо, но это, безусловно, исправляет это в IE6.

У меня нет IE8 для проверки моей проблемы (как вы и описали), но я нашел этот вопрос, когда искал менее хакерское решение, чем то, которое я предлагаю здесь.

...