IE9以下瀏覽器的innerHTML忽略空格怎麼辦

antzone發表於2017-03-14
IE9瀏覽器HTML

先看一段程式碼例項再進入主題,程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>innerHTML空格問題-螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function()
{
  var thediv=document.getElementById("thediv");
  document.write(thediv.innerHTML.length);
}
</script> 
</head> 
<body> 
<div id="thediv"> 螞蟻部落 </div>
</body> 
</html>

以上程式碼在標準瀏覽器中輸出值是6，但是在IE9以下瀏覽器中的輸出值是5，也就是說在IE9以下瀏覽器中會省略去一個空格。其實精確的規則是這樣的:

在IE9以下瀏覽器中，如果父節點的第一個子節點是文字節點，且此文字節點的開頭是空格字元，那麼這幾個空格字元將會被忽略。如果最後節點噎死一個文字節點，且此節點的結尾時空格字元，那麼無論有多少個空格字元都會合併為一個字元。

特別注意:空格字元包括空格、\t、\n、\r和一個分頁符號U+000C。

解決方案:

使用全形也就是中文空格的情況下，在所有的劉拉起都會輸出6。

相關文章