IE8头痛-无法识别空白：包装前

Question

This at first seemed like a simple task which involved adding the white-space: pre-wrap to a CCE stylesheet in order to preserve spaces and line breaks. 起初，这似乎是一个简单的任务，其中涉及添加空白：将预包装换成CCE样式表，以保留空格和换行符。 At the moment the following works in Firefox perfectly. 目前，以下内容可以完美地在Firefox中运行。 In IE* in the other hand it's just one block of text with no breaks. 另一方面，在IE *中，它只是一个文本块，没有间断。

.custom_pre {
        word-wrap: break-word; /* IE */ 
        white-space: pre-wrap; /* CSS 2.1 */                            
}

When i open the dev tool in IE8 I see no conflicts. 当我在IE8中打开开发工具时，看不到任何冲突。 When i try white-space: pre it just adds one line of text with no break lines. 当我尝试white-space: pre只会添加一行文本，没有换行符。 When I try to add the <!DOCTYPE html> it makes no difference. 当我尝试添加<!DOCTYPE html>时，没有区别。 I tried wrapping the text in a DIV but did nothing. 我尝试将文本包装在DIV中，但没有执行任何操作。 I tried banging my screen but nothing either. 我尝试敲打屏幕，但一无所获。

Would anyone know what im missing for this to work with IE8? 有人知道与IE8搭配使用时会缺少什么吗？ Im at a lost. 我不知所措。

source code: 源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:ID_x0023_ msdt:dt="string">123</mso:ID_x0023_></mso:CustomDocumentProperties></xml><![endif]-->
<link type="text/css" href="Scripts/Custom_CSS/whiteboard_custom_12.css" rel="stylesheet" />
<SCRIPT LANGUAGE="JavaScript" SRC="Scripts/jquery/jquery-1.11.2.min.js"></SCRIPT>
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Severities</title>
<!--mstheme--><link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="../../../_themes/ENSEMBLENEWLOGOTHEME/ENSE1011-65001.css"><meta name="Microsoft Theme" content="ENSEMBLENEWLOGOTHEME 1011, default">
<script type="text/javascript"> 
$( document ).ready(function() {
$(".custom_pre").each(function() {
   var $this = $(this);
   $this.html($this.text());

});  
});
</script>

<style type="text/css"> 
.style2 {
                text-align: left;
}
.style3 {
                text-decoration: none;
}
</style>

</head>

<body>

<form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input type="hidden" name="MSO_PageHashCode" id="MSO_PageHashCode" value="9" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__REQUESTDIGEST" id="__REQUESTDIGEST" value="0xC3C2C98CCA1FF9BC9AB9BC539EB6B249106AB016897D63255384C3F1046CD6F7703DD22F7F111220E078EA44ADDB16DBCAE8F40B59AFA6E15F82F59117AAD46E,10 Jun 2015 01:33:44 -0000" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUBMA9kFgICAg9kFgICAQ8PFgIeC1BhcmFtVmFsdWVzMokEAAEAAAD/////AQAAAAAAAAAMAgAAAFhNaWNyb3NvZnQuU2hhcmVQb2ludCwgVmVyc2lvbj0xMi4wLjAuMCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj03MWU5YmNlMTExZTk0MjljBQEAAAA9TWljcm9zb2Z0LlNoYXJlUG9pbnQuV2ViUGFydFBhZ2VzLlBhcmFtZXRlck5hbWVWYWx1ZUhhc2h0YWJsZQEAAAAFX2NvbGwDHFN5c3RlbS5Db2xsZWN0aW9ucy5IYXNodGFibGUCAAAACQMAAAAEAwAAABxTeXN0ZW0uQ29sbGVjdGlvbnMuSGFzaHRhYmxlBwAAAApMb2FkRmFjdG9yB1ZlcnNpb24IQ29tcGFyZXIQSGFzaENvZGVQcm92aWRlcghIYXNoU2l6ZQRLZXlzBlZhbHVlcwAAAwMABQULCBxTeXN0ZW0uQ29sbGVjdGlvbnMuSUNvbXBhcmVyJFN5c3RlbS5Db2xsZWN0aW9ucy5JSGFzaENvZGVQcm92aWRlcgjsUTg/AgAAAAoKCwAAAAkEAAAACQUAAAAQBAAAAAIAAAAGBgAAAAZVc2VySUQGBwAAAAVUb2RheRAFAAAAAgAAAAYIAAAAEE1vbnRlcm8sIEVsbGlzb24GCQAAABQyMDE1LTA2LTA5VDIxOjMzOjQ0WgtkZGRzI5AVYbWSVOMPEjf44VCZqp7nuw==" />
</div>

<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=PNpbHW9JZZojtV41Fp9GxQ2&amp;t=635186629044772859" type="text/javascript"></script>

<script> var MSOWebPartPageFormName = 'form1';</script><script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=SKi7C%2FTrsh1U%2FCnIwkB9Ag%3D%3D"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=SKi7C%2FTrsh1U%2FCnIwkB9Ag%3D%3D"></script><script type="text/javascript" language="javascript" src="/_layouts/1033/core.js?rev=mHKsOQ0iU3Q5jdm9OZNDdg%3D%3D"></script>
<script type="text/javascript"> 
//<![CDATA[

                function DoCallBack(filterText)
                {
                    WebForm_DoCallback('g_a652973d_3b2a_41e3_808c_f3193354b309',filterText,UpdateFilterCallback,0,CallBackError,true);
                }
                function CallBackError(result, clientsideString)
                {                
                }
            //]]>
</script>
<script type="text/JavaScript" language="JavaScript"> 
<!--
var L_Menu_BaseUrl="/sites/SERVIPCManagement/imc";
var L_Menu_LCID="1033";
var L_Menu_SiteTheme="ENSEMBLENEWLOGOTHEME";
//-->
</script><SCRIPT LANGUAGE='JavaScript' > 
<!--
//-->
</SCRIPT>
                <table style="width: 100%">
                                <tr>
                                                <td>
<table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td valign="top"><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPartg_a652973d_3b2a_41e3_808c_f3193354b309" width="100%" OnlyForMePart="true" allowDelete="false" style="" ><table border="0" align="center" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt2="urn:frontpage:internal"><tr><td><table border="0" cellspacing="0" width="900px"><tr><td class="style2" style="height: 226px;"><br><br><table width="900px" align="left" class="style16" border="1" cellspacing="1" cellpadding="1"><tr><td colspan="4" style="border: 1px solid #C0C0C0; padding: 10px; background-color: #CCCCCC;" align="center"><strong>SM Handoff</strong></td></tr><tr><td style="width: 183px"><strong>Client:</strong></td><td colspan="3">RSA</td></tr><tr><td style="width: 183px"><strong>Ticket:</strong></td><td>2341419</td><td width="100px"><strong>MINT</strong>:</td><td>20150609112</td></tr><tr><td style="width: 183px"><strong>Incident Description:</strong></td><td colspan="3">eBusiness Websites unavailable</td></tr><tr><td style="width: 183px"><strong>Business

                                            Impact:</strong></td><td colspan="3" class="custom_pre">Customers test test test test.
<br/>
<br/>&amp;lt;&amp;gt;()&amp;quot;&amp;#39;&amp;amp;</td></tr><tr><td style="width: 183px"><strong>What was done:</strong></td><td colspan="3" class="ms-alignleft"><div class="custom_pre">- test
<br/>
<br/>- test. 
<br/>
<br/>- Test. 
<br/>
<br/>- Test. 
<br/>
<br/>- Test. 
<br/>
<br/>*MINT* 
<br/>Testtesttesttesttest.
<br/></div></td></tr><tr><td style="width: 183px"><strong>Next steps:</strong></td><td colspan="3" class="custom_pre">Test
<br/>
<br/>NEXT MINT: June 10th at 12:00   </td></tr><tr><td style="width: 183px"><strong>Resources</strong>:</td><td colspan="3" class="custom_pre">Test: test
<br/>test: test </td></tr><tr><td style="width: 183px"><strong>Last  
                                            SM assigned:</strong></td><td colspan="3">test</td></tr></table></td></tr></table></td></tr></table></div></td>
    </tr>
</table>

                                                                                    </td>
                                </tr>
                </table>


<script type="text/javascript"> 
//<![CDATA[

WebForm_InitCallback();//]]>
</script>
</form>

</body>

</html>

Answer 1

I don't have an actual ie8 browser to test on, but using ie 8 emulation on ie11, and looking at this page of Eric Meyer's, it looks like white-space: pre-wrap; 我没有要测试的实际ie8浏览器，但是在ie11上使用ie 8仿真，然后看一下Eric Meyer的这一页，它看起来像white-space: pre-wrap; works just fine in IE8: 在IE8中可以正常工作：

空白：预包装

This page also seems to indicate that this should work in IE8. 该页面似乎也表明该功能应在IE8中有效。

Maybe there's something else wrong on your page (actual code/html/css always helps). 也许页面上还有其他问题（实际的code / html / css总是有帮助的）。

EDIT: Since seeing your code, it appears that your actual issue is the way you're replacing the section of text you want to show. 编辑：由于看到您的代码，看来您的实际问题是您要替换要显示的文本部分的方式。 It looks like converting the section to text, and then back to html through jQuery is messing up your formatting (likely removing all line breaks). 看起来将部分转换为文本，然后通过jQuery重新转换为html会破坏您的格式（可能会删除所有换行符）。 Instead you could try to use this answer , or another one on that page to replace the offending characters in that section. 相反，您可以尝试使用此答案或该页面上的另一个答案来替换该部分中令人反感的字符。 ...or if coming from a database maybe just replace server-side. ...或者如果来自数据库，则可能只是替换服务器端。

IE8头痛-无法识别空白：包装前

问题描述

1 个解决方案

解决方案1
1 2015-06-10 01:02:02

IE8头痛-无法识别空白：包装前

问题描述

1 个解决方案

解决方案1 1 2015-06-10 01:02:02

解决方案1
1 2015-06-10 01:02:02