IE 8为img标签创建空文本节点

Question

When i try to add a <img> tag, IE8 automatically add a ' Empty Text Node ' after the image tag. 当我尝试添加<img>标记时，IE8会在图像标记之后自动添加“ 空白文本节点 ”。

HTML :- HTML：-

<html>
<head>
    <title>Railway Services</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="img/icon.png" />
    <link rel="stylesheet" href="css/styles.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <div id="header">
        <div id="wrapper">
            <div class="logo">
                <img src="img/logo.png"/>
            </div>
        </div>
    </div>
    <div id="page" class="homePage">
       <div id="wrapper">
          <h1>Home Page</h1>
       </div>
   </div>
   <div id="footer">
      <div id="wrapper">
            <p class="copyRight">Copyright&#169;2012 Railway Services. All rights reserved</p>
      </div>
    </div>
</body>
</html>

styles.css :- styles.css：-

@CHARSET "ISO-8859-1";
body{
   margin:0px;
   padding:0px;
   font-size:12px;
   color:#123456;
   font-family:verdana,_sans,arial;
   text-align:center;
}
#wrapper{
   width:98%;
   margin:0 auto;
}
#page{
   float:left;
   width:100%;
}
p{
   margin:0px;
   padding:0px;
}

/**********************HEADER*********************/

#header{
   float:left;
   width:100%;
}
.logo{
   float:left;
   width:20%;
   height:150px;
   cursor:pointer;
}
.logo img{
   width:100%;
   height:100%;
}

/************************HEADER END***************/

/************************FOOTER*******************/

#footer{
   float:left;
   width:100%;
}

/***********************FOOTER END****************/

See this image 看到这张图片

在IE8控制台中

In the above image you can see the IE generates Empty Text Node after the <img> tag. 在上图中，您可以看到IE在<img>标签之后生成了空文本节点 。

I can't found why IE generate empty text node.Can anybody help me..? 我找不到为什么IE会生成空文本节点。有人可以帮助我吗？

Answer 1

IE shows this to any elements in the page that has a blank space between tags. IE会向标签中空格之间的任何元素显示此内容。 This may not cause any problem. 这可能不会引起任何问题。

The only consideration is when your content is inline and it adds a space between the elements. 唯一的考虑是内容是内联的，并且在元素之间添加了空格。 In this case, all you have to do is eliminate the blank space between the tags. 在这种情况下，您要做的就是消除标签之间的空白。

Answer 2

There is a line break and some whitespace for indentation after the image tag, which leads to creating an empty text node. 在图像标签之后有一个换行符和一些空格以缩进，这导致创建一个空的文本节点。

If you write your code like that: 如果您这样编写代码：

<div class="logo"><img src="img/logo.png"/></div>

you will not have the empty text node any more. 您将不再有空文本节点。

Since it's really IE specific, I think it's just a bug of the parser. 由于它确实是特定于IE的，所以我认为这只是解析器的一个错误。

IE 8为img标签创建空文本节点

问题描述

2 个解决方案

解决方案1
3 2012-07-11 12:04:02

解决方案2
2 已采纳 2012-07-11 12:03:27

IE 8为img标签创建空文本节点

问题描述

2 个解决方案

解决方案1 3 2012-07-11 12:04:02

解决方案2 2 已采纳 2012-07-11 12:03:27

解决方案1
3 2012-07-11 12:04:02

解决方案2
2 已采纳 2012-07-11 12:03:27