IE7 причина "Текст - пустой текст Node"

Я использую панель инструментов веб-разработчика IE для устранения неполадок. Пустое пробел появляется ниже элемента списка, и я не могу логически понять, почему. Используя панель инструментов веб-разработчиков, я вижу, что в примере 1 ниже "Текст - пустой текст Node" выводится ниже "Текст - Google". По иронии судьбы, во втором, с пространством, вставленным вручную после слова "Google", этот текст node больше не появляется. Для меня было бы полным смысла, если бы результаты были отменены. Любые идеи, что может вызвать это странное поведение?

Примечание: это происходит в IE7, но не в IE8.

<li><a href="www.google.com">Google</a></li> - empty text node appears at end

<li><a href="www.google.com">Google </a></li> - no empty text node

Обновление: Хорошо, я сузил эту проблему. В принципе, кажется, что существует конфликт между некоторыми атрибутами, которые я использую. Мне нужно, чтобы теги отображались в виде блока, поэтому они будут корректно обертываться, когда есть несколько строк. Но мне также не нужно пустое пространство между элементами. Я не совсем уверен, почему это пустое пространство решает проблему и предпочитает не просто "взломать" его.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a
{
    display:block;
}
li
{
    zoom: 1;
}
</style>
    </head>
<body>
    <ul>
        <li>
        <div style="background-color:blue">
            <a href="#"><img  src="http://www.google.com/intl/en_ALL/images/logo.gif"/></a>
        </div>
            <ul>
                <li style="background-color:Red"><a href="#">One</a></li>
                <li style="background-color:green"><a href="#">Two </a></li>
                <li style="background-color:Yellow"><a href="#">Three</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

Ответ 1

Теперь, когда <a> является элементом уровня блока, вы должны также дать ему hasLayout.

a
{
    display:block;
    zoom:1;
}

Ответ 2

Я видел, как это происходило с изображениями, окруженными пустыми div, в которых этот уродливый "текст node" создавал пробелы, которые подталкивали div ниже него.

<div class="top"></div>
<img src="image.jpg" />
<div class="bottom"></div>

Решение, которое сработало для меня, состояло в том, чтобы обернуть изображение в div:

<div class="top"></div>
<div><img src="image.jpg" /></div>
<div class="bottom"></div>

Ответ 3

это может иметь отношение к "макету", ваш масштаб: 1 может работать, также попробуйте один из них:

li { display: block; }
li { width: auto; }
li { width: 100%; }

вам может потребоваться противодействовать их отображению: inline или float: left, если вы пытаетесь отобразить список в виде горизонтального меню.

надеюсь, что поможет

Ответ 4

Я столкнулся с аналогичной проблемой со встроенным списком, над которым я работал. IE7 добавлял небольшое количество места после каждого из моих элементов списка. У меня возникли трудности с поиском проблемы, но я, наконец, обнаружил, что пробел в моем HTML вызывал пробел. Я удалил пустое пространство, и все было исправлено. См. Пример до и после ниже:

<!-- Before -->
<ul>
     <li><a href="#">My Account</a></li>
     <li><a href="#">Support</a></li>
     <li class="last"><a href="#">Logout</a></li>
</ul>

<!-- After -->
<ul>
     <li><a href="#">My Account</a></li><li><a href="#">Support</a></li><li class="last"><a href="#">Logout</a></li>
</ul>

Надеюсь, это поможет кому-то!

Ответ 5

Работа с Asp.Net. Я заменил теги <a href=""></a> тегами <asp:HyperLink NavigateUrl="" runat="server"></asp:HyperLink>, и он сработал.

Я понимаю, что исходный вопрос касается не Asp.Net, но я наткнулся на него в своем собственном поиске

Ответ 6

Я решил эту проблему, добавив выравнивающий буксир в изображение, например (я использую DTD HTML 4.01 Transitional):

Перед

<div class="OpenParagraph"></div>
<div><img alt="-" width="489" height="1" border="0"  src="/image/fadeBigBorder.gif"></div>
<div class="OpenParagraph"></div>

После

<div class="OpenParagraph"></div>
<div><img alt="-" width="489" height="1" border="0" align="absMiddle" src="/image/fadeBigBorder.gif"></div>
<div class="OpenParagraph"></div>

Ответ 7

У меня была эта проблема, и я понял, что теги doctype и html не обновлялись

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Ответ 8

Я столкнулся с аналогичной проблемой в теге в IE7, решение такое же, как и выше, парень, который исправил тег

просто не сломайте строку в теге, проблема исправлена.

Ответ 9

Я выбрал вариант этого iisue, который является phantom точкой слева от моего элемента списка в IE9 в собственном виде Решением было применить этот стиль к элементу LI

LIST-STYLE-TYPE: none;

HTH