2012-07-11 94 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