IE 8為img標簽創建空文本節點
[英]IE 8 creates Empty Text Node for img tag
問題描述
當我嘗試添加<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©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>標簽之后生成了空文本節點 。
我找不到為什么IE會生成空文本節點。有人可以幫助我嗎？
2 個解決方案
解決方案1
3 2012-07-11 12:04:02
IE會向標簽中空格之間的任何元素顯示此內容。 這可能不會引起任何問題。
唯一的考慮是內容是內聯的，並且在元素之間添加了空格。 在這種情況下，您要做的就是消除標簽之間的空白。
解決方案2
2 已采納 2012-07-11 12:03:27
在圖像標簽之后有一個換行符和一些空格以縮進，這導致創建一個空的文本節點。
如果您這樣編寫代碼：
<div class="logo"><img src="img/logo.png"/></div>
您將不再有空文本節點。
由於它確實是特定於IE的，所以我認為這只是解析器的一個錯誤。
IE9空文本節點
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.