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

【问题标题】：IE 8 creates Empty Text Node for img tagIE 8 为 img 标签创建空文本节点
【发布时间】：2012-07-11 20:04:02
【问题描述】：

当我尝试添加<img> 标签时，IE8 会在图片标签后自动添加一个“空文本节点”。

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 :-

@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****************/

看这张图片

在上图中你可以看到IE在<img>标签之后生成了Empty Text Node。

我找不到为什么 IE 会生成空文本节点。谁能帮帮我..？

【问题讨论】：

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

IE 将这一点显示给页面中标签之间有空格的任何元素。这可能不会导致任何问题。

唯一的考虑是当你的内容是内联的并且它在元素之间添加了一个空格。在这种情况下，您所要做的就是消除标签之间的空格。

【讨论】：

【解决方案2】：

图像标签后有一个换行符和一些用于缩进的空格，这导致创建一个空文本节点。

如果你这样写代码：

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

您将不再有空文本节点。

由于它确实是特定于 IE 的，我认为这只是解析器的一个错误。

【讨论】：