2012-07-11 65 views
1

当我尝试添加<img>标签时,IE8自动在图像标签后面添加'空文本节点'。IE 8为img标签创建空文本节点

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

看到该图片

in IE8 console

在上图中,您可以看到IE生成空文本节点后面的<img>标记。

我找不到为什么IE生成空的文本节点。可以帮助我的任何人..?

回答

2

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

如果你写的代码这样的:

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

你不会有空白文本节点了。

因为它确实是IE特有的,我认为这只是解析器的一个错误。

+0

谢谢Samuel ..现在问题解决了 – vinu 2012-07-11 12:09:47

3

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

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

+0

感谢您的快速响应。现在问题解决了 – vinu 2012-07-11 12:17:01