IE 8 creates Empty Text Node for img tag
Question
When i try to add a <img> tag, IE8 automatically add a ' Empty Text Node ' after the image tag.
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****************/
See this image
In the above image you can see the IE generates Empty Text Node after the <img> tag.
I can't found why IE generate empty text node.Can anybody help me..?
2 answers
solution1
3 2012-07-11 12:04:02
IE shows this to any elements in the page that has a blank space between tags. 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.
solution2
2 ACCPTED 2012-07-11 12:03:27
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.