Tuesday, December 23, 2008

ie中空白渲染的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form action="test_submit" method="get" accept-charset="utf-8">
<input type="text" name="some_name" value="" id="name">
<div id="x" style="white-space:pre;">x xx x</div>
<div id="y">y yy y</div>
<p><input type="button" value="click here" onclick="document.getElementById('name').value=document.getElementById('x').innerHTML"></p>
<p><input type="button" value="click here" onclick="document.getElementById('name').value=document.getElementById('y').innerHTML"></p>
</form>
</body>
</html>

上面的例子在ie6/ie7中测试时可发现y组成的字符串,其中的空格被ie渲染过后,取到的innerHTML已经变为一个空格了,在firefox/safari上在渲染后看上去是只有一个空格,但innerHTML取到的还是与原码是保持一致的。

No comments :